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

URL: https://pro.flexablock.com/the-banner-block-a-hero-section-that-reads-clearly-over-any-image/
Published: 2026-07-15T01:37:29+00:00
Updated: 2026-07-17T01:15:13+00:00
Author: admin

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

Build the top of your page — background, heading, text and buttons — as one block, with an overlay that keeps every word readable over a photo.

## 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.

### Launch day is closer than you think

Everything you need to ship your next landing page, in one editor.

[Start free trial](#)

**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.

### Field notes from the road

A photography journal, updated whenever the light is worth stopping for.

[Read the journal](#)[Subscribe](#)

**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.

### The autumn collection is here

New pieces, warm tones, limited runs.

[Shop the collection](#)

## Give your hero one home

The Banner block ships with Flexa Block. Install the plugin and it’s waiting in the editor the next time you build a page — overlay, buttons and all.

[Download Flexa Block](https://wordpress.org/plugins/flexa-block/)