Header Banner

Usage

Header Banner opens a post or page with its own featured image, title and tags. There is nothing to type or upload in the block: it reads all three from the page it sits on, so changing the title or the featured image changes the banner too.

Add the block at the top of the content, then set the page's featured image in the page settings sidebar. On large screens the title and tags sit over the image, on a gradient in your primary color. On smaller screens they follow the image.

The preview in the editor follows what you're editing, before you save: type a new title or pick another featured image and the banner updates.

When to use it

Use it on blog posts, case studies and landing pages where the featured image should lead the page. Tags show only on content that has them, such as blog posts.

The banner needs a featured image. Without one, large screens show nothing and smaller screens show only the title.

The title in the banner is the page's main heading (H1), so the rest of the page should start at H2.

Tips

• Inside a Query Loop, each banner shows the image and title of its own post.
• In a synced pattern, the banner shows the page the pattern is placed on, so one pattern works across many pages.
• Title Style changes the size and look of the title. It stays the page's main heading whichever you choose.
• For a banner with its own image, headline and buttons, use Hero instead.