The 4 Rules Every Hero Section Should Pass

The hero decides whether the rest of the page gets read. Most of the conversion difference between two pages is decided above the fold.

Say what it is

The most common hero failure is a headline that sounds impressive and communicates nothing.

A visitor who has never heard of you needs to know what the business does within a couple of seconds. Clever positioning that requires a paragraph of context to decode costs you the people who did not stay for the paragraph.

Plain beats clever here, every time.

Match the source

If someone arrives from an ad about a specific thing, the hero should continue that specific conversation, ideally in similar words.

Any gap between what the ad promised and what the page says creates a moment of doubt about whether they are in the right place, and that moment is where they leave. Message match is one of the highest-return fixes available and it costs nothing but attention.

One action

A hero with several competing options splits attention and reduces the chance of any of them being taken.

Decide what the primary action is. Make it the visually dominant element. A secondary option can exist, quieter, for people not ready. Three equally weighted options is a decision the visitor will resolve by leaving.

Proof where the doubt is

The moment after reading what you do is the moment the visitor wonders whether it is true.

Something concrete sitting right there, a number, a recognisable logo, a specific result, answers that at the point it arises rather than three sections down where fewer people reach.

Show the thing

An image that shows the actual product, service or outcome outperforms an abstract one. Generic imagery communicates nothing and, worse, signals that there was nothing specific to show.

Do not make it full height by default

A hero that fills the viewport hides the fact that there is more page. Some visitors do not scroll, because nothing indicated there was a reason to.

Letting the next section peek above the fold measurably increases scroll depth, and scroll depth is upstream of everything below it.

Test the headline before anything else

The headline carries more conversion weight than any other element on the page.

Before redesigning layout or changing colours, test the headline. It is the cheapest change available and reliably the most consequential, and it is the element most often written once and never revisited.