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, set under Appearance.

1. Select the section and open Appearance.
2. Set Background to Image.
3. Pick your Image, and a Mobile image if you want a different crop on phones.

A dark Overlay gradient is already on so the text stays readable. Adjust it under Appearance if your image is light or dark.

Edit the content

The banner ships with three blocks, stacked and centered. Select each one in the block list 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

By default the banner ships at 70% of the screen height on desktop and 60% on phones. Change this under Size with Minimum height. Set Width to Page if you want it to match your content width instead of spanning the screen.

Video and parallax variants

The Banners group has two siblings that share Image banner's layout and controls, so everything above applies. They differ only in the background:

• Video banner: the background is a video instead of a photo. Set it under Appearance with Background set to Video. The video plays muted and looped behind the text.
• Parallax image banner: the background image drifts slowly as the page scrolls, for a sense of depth. It starts at 70% of the screen height with a dark gradient already on.

Pick whichever background suits the section. The eyebrow, heading, and caption blocks work the same way in all three.

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 makes the heading hard to read, even with the overlay.
• 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.