Image banner

Image banner places an eyebrow, a heading, text and up to two buttons over one large image. You choose the height, from Small to Full screen, where the text sits, and how strong the overlay between the image and the text is. The color scheme sets both the overlay color and the text color.

You add the text as blocks, so you can reorder them or leave any of them out.

Best practices#

• Use a 2400 × 1200 px image with a calm area where the text will sit. Set a focal point so the subject stays in view on phones, where the banner is taller than it is wide.
• Check readability. If the text is hard to read, raise Overlay opacity or choose a scheme with more contrast. See Colors and color schemes.
• One clear action. A single solid button is easier to act on than two equal ones. Use the second, outline button for a softer option.
• Use it first. As the first section on a page, its image loads with high priority, which helps the page appear quickly.
• Heading size. Extra large makes a strong statement on a home page. Medium or Large suits landing and about pages.

Preset tips#

• Sorrel opens its home page with a large image banner, using its clay scheme with a light 25% overlay.
• The About page template in every preset also starts with an image banner.

Handle

image-banner

Group

Heroes and banners

Where

Add it to any template with Add section in the theme editor.

Settings#

Blocks#

Add blocks to this section from the theme editor, then drag them to change their order.

Eyebrow#

You can add this block once.

Heading#

You can add this block once.

Text#

You can add this block once.

Buttons#

You can add this block once.