Image banner

Image banner is a heading and short text centered over a background image, the full width of the page. It is a preset of the theme's flexible Section, so once you add it you have the section's full set of controls. It lives under the Banners group in Add section.

Add the section

1. In the theme editor, open the page where you want the banner.
2. Click Add section and open the Banners group.
3. Choose Image banner.

It starts with an eyebrow, a heading, and a caption over an empty background. Add your image and edit the text.

Set the background image

The image is the section's background, under Appearance. Select the section, set Background to Image, then pick your Image and, if a wide photo crops badly on phones, a Mobile image.

A dark gradient Overlay is already on so the text stays readable. See Common section settings for the background and overlay controls.

Edit the content

The banner ships with three blocks, stacked and centered. Select each one in the section's blocks to edit it:

• An Eyebrow: the small label above the heading.
• A heading: the large line, built from an Accent text block so you can italicize part of it for an accent color.
• A Rich text caption: the supporting line below the heading.

Add a Button block if you want a call to action, or remove any block you do not need.

Size and height

The banner ships at 70% of the screen height on desktop and 60% on phones, set under Size with Minimum height. Width starts at Full. Set it to Page if you want the content to line up with the rest of the page instead of spanning the screen.

Video and parallax variants

The Banners group has two siblings that share Image banner's look. They differ in the background, and one of them differs in how it is built:

• Video banner: identical to Image banner, except Background is set to Video. The video plays muted and looped behind the text.
• Parallax image banner: the background image drifts slowly as the page scrolls. This one puts its content inside a Parallax pane block rather than on the section itself, so the Image, Overlay, and Corner radius are on the pane, not on the section. It starts at 70% of the screen height on desktop and 60% on phones, with a dark gradient already on. Its blocks are an Accent text heading, a Separator rule, and an Eyebrow caption. See Animations and parallax.

Pick whichever background suits the section.

Common settings

Image banner uses the standard Layout, Size, Appearance, Border, Color, Padding, Margin, and Visibility controls. See Common section settings.

Tips

• Pick an image with room for text. A busy center (a full table of jars and produce, say) makes the heading hard to read even with the overlay, so shoot or crop with an empty corner.
• Keep the heading to one line or two. A long heading competes with the image and wraps awkwardly on phones.
• For two banners side by side, use the Split banners preset instead. For a banner with the header sitting over it, see the Hero slideshow.