Banner grid

The banner grid component can be used to create a series of image banners that occupy different widths and heights in relation to eachother.

Banner grid on the Gaia preset

Quick start

• Click into each nested Image banner block and upload/select an image

• Edit the nested Heading and Button blocks

Settings

• Container type: This allows you to select full to create full-bleed layouts, padded to apply the global horizontal gap setting to a full bleed section, or max to constrain the blog posts to the maximum container size.

• Row height: Sets the minimum height for each row in the banner grid. The exact size of the banner is determined in each individual banner setting based on the number of rows and columns it occupies.

  • Extra small option is only available in version 1.6.0 and later

• Vertical/horizontal grid gap: Override your global grid to create tigher grids.

Blocks

This section comes preloaded with two different types of blocks:

• Section header (hidden by default, fill in the settings to display)

• Banner grid item: This block houses each image banner block. The following settings are available:

  • Desktop column and row: On desktop there are 4 columns. For each banner grid item, choose how many rows and columns you wish for the banner to occupy on desktop.

  • Mobile column and row: On mobile there are 2 columns. For each banner grid item, choose how many rows and columns you wish for the banner to occupy on mobile.

Examples & Inspiration

Banner grids have customizeable spacing and row settings to accomodate for a wide variety of images.

Gaia preset

Gloss preset

Primavera preset

Savoir preset

Can't find the setting you're looking for? The following settings are explained in detail in common settings:

• Color scheme/Color scheme transition

• Padding

• Borders