Image banner
The Image banner shows a large image or a muted looping video with content on top: subheading, heading, text, buttons and any other content blocks. Place the content in one of nine positions, separately on mobile.
How to set it up
Step 1: Add the Image banner section
- In the theme editor, open the page you want and click Add section under Template.
- Search for Image banner and select it (1).
Step 2: Set the media
- Choose an Image (1), a mobile image or a Video, the media ratio or height, the overlay and parallax.
Step 3: Place the content
- Choose the Content position and a Text color scheme (a light-text scheme on dark images), then add content blocks.
Settings reference
Image banner
| Media | |
|---|---|
| Image | An image from your files. |
| Mobile image | Optional. Use a portrait crop for phones. |
| Video | Plays muted on loop and replaces the image. |
| Media ratio | Options: Adapt to image, Square (1:1), Portrait (4:5), Tall (3:4), Story (9:16), Landscape (4:3), Wide (16:9), Cinema (21:9). |
| Mobile media ratio | Options: Adapt to image, Square (1:1), Portrait (4:5), Tall (3:4), Story (9:16), Landscape (4:3), Wide (16:9), Cinema (21:9). |
| Height | Options: Adapt to media ratio, Small, Medium, Large, Full screen. |
| Mobile height | Options: Adapt to media ratio, Small, Medium, Large, Full screen. |
| Overlay opacity | Slider. |
| Parallax on scroll | Turns this on or off. |
| Content | |
| Content position | Options: Top left, Top center, Top right, Middle left, Center, Middle right, Bottom left, Bottom center, Bottom right. |
| Mobile content position | Options: Top left, Top center, Top right, Middle left, Center, Middle right, Bottom left, Bottom center, Bottom right. |
| Text color scheme | Use a light-text scheme on dark images. |
Section width, corners, padding, color scheme, divider and visibility work the same in every section: see Section layout and spacing. Headings, subheadings and descriptions: see Section headings and text.