Grid banner
The Grid banner section shows up to six image tiles in a grid. Each tile can have an image, a link, and text placed over the image.
Add the section from the section picker. The preset starts with three tiles.
Section settings
| Setting | Description |
|---|---|
| Section width | 3 options for container |
| Subheading | Small text above the heading. |
| Heading | Title of the section. To underline words, wrap them in italics in the heading field. |
| Drawn underline | Underline under the heading words. On by default. Choose one of these styles: |
| Description | Text below the heading. |
| Heading size | 3 options for the heading size |
| Content alignment | 3 options for the content alignment |
| Column gap | 5 options for column gap |
| Enable carousel on mobile | The tiles swipe with pagination on mobile. Default: off. |
| Hide item description on mobile | Hide the description text of each tile on mobile. Default: on. |
| Item height | 4 options for the tile height |
| Show divider | Toggles the visibility of a horizontal divider line within the section. Default: off. |
Section padding
| Setting | Description |
|---|---|
| Top | Customize the top margin of the section, from 0 to 100 px. Default: 48 px. |
| Bottom | Customize the bottom margin of the section, from 0 to 100 px. Default: 48 px. |
Tile settings (banner item)
| Setting | Description |
|---|---|
| Color scheme | Select colors from Theme settings -> Colors. |
| Image | Image used on desktop. |
| Mobile image | Image used on mobile. If you leave it empty, the desktop image is used. |
| Link | Makes the whole tile clickable. |
| Desktop content position | Nine positions, from Top left to Bottom right. The preset uses Bottom left. |
| Text alignment | 3 options for the text alignment |
| Show arrow icon | Show an arrow icon on the tile. Default: on. |
| Overlay opacity | Darkness of the overlay on the image, from 0% to 100%. Default: 20%. |
Each tile can hold these content blocks: Heading, Subheading, Highlight text, and Description.
Layout
The layout changes with the number of tiles. On desktop:
- One tile fills the full width.
- Two tiles sit side by side.
- Three tiles place one large tile on the left, with two stacked tiles on the right.
Check the preview in the theme editor after you add or remove tiles.
Mobile
Below 768 px, the tiles stack in one column, or swipe in a carousel when the carousel setting is on.
No comments yet