The Banner Block: A Hero Section That Reads Clearly Over Any Image

The hero is the hardest block to assemble by hand

You’re building a landing page, and the top of it — the hero — is the one part every visitor is guaranteed to see. It’s also the fiddliest to assemble: a background image, a heading that has to stay legible on top of it, a line of supporting text, and a button or two, all lined up and still holding together on a phone. Stack those as separate pieces and one of them is always a little off.

The Banner block gives that hero one home — backdrop, words and buttons in a single block you edit right on the canvas.

A backdrop — image, gradient or solid colour — with an overlay you dial in until the heading is readable.

Heading, supporting text and up to two buttons, together in one block and already aligned.

Set the banner’s height, and whether the content sits at the top, middle or bottom of it.

Boxed or full width, with the text column left, centred or right.

Plus the usual spacing, colour and typography controls, so it fits your design instead of fighting it.

Setting one up takes a minute. Pick a background, type your heading and button label, then drag the overlay until the text pops — the preview shows you the finished hero as you go. No CSS, no separate cover-image plugin, nothing to line up afterwards.

See the Banner block a few ways

Every hero below is one Banner block. Only the settings change — the background, the overlay, and where the content sits.

A gradient backdrop, content centred, one button. The simplest hero — a colour wash, a heading and a single call to action, all in the middle.

A photo behind the text, dimmed by an overlay. The same block over an image, with the overlay turned up so the heading stays sharp — and a second button beside the first.

Boxed and narrower, content pinned to the bottom. A contained band instead of a full-width wash, with the heading and button resting on the lower edge.