Skip to main content
Start for FreeBook a demo

Pages and conversion

What is a hero section?

The hero section is the first full-width block a visitor sees on a page, usually a headline, an image and the main call to action.

A real store example

David Meet David Gold page: over 900 Meta ads linked here.

The page opens on the numbers that sell the bar: 28g of protein, 150 calories, 0g of sugar. A hero that states the reason to buy in a few words does its job before the shopper scrolls.

Open the pageSee their ads

Getting hero section right

  1. Say what it is and why it's better

    The headline should pass the five-second test: a stranger can say what you sell and why to choose it.

  2. Show the product on a phone screen

    Most paid traffic is mobile. Check that the image, headline and button all fit in the first screen.

  3. Check how many people scroll past it

    A scroll heatmap shows how many visitors leave from the hero and how many keep reading.

Replo heatmaps show click, scroll and revenue heat on every page you publish with Replo.

See Replo heatmaps

Hero section questions

What should a hero section include?
A headline that says what you sell and why it's better, one line of support, a product image or video and one primary button. Proof such as a star rating can sit just below.
Should the hero be a video or an image?
Use video when movement shows the product working, such as a texture or a before and after. Otherwise a sharp image loads faster, and speed matters more on mobile.
How long should a hero headline be?
Short enough to read in a glance: usually 4 to 8 words. Put the detail in the line beneath it, and save specifics such as ingredients or sizes for the sections further down.

Related terms

Browse the glossary

Value proposition

A value proposition is the one clear reason a customer should buy from you: what you offer, who it's for and why it beats the alternatives.

CTA

A CTA (call to action) is the button or line that tells a visitor the next step to take, such as "Shop now" or "Build your pillow".

Landing page

A landing page is a page built for one campaign or audience, with one goal, usually where ad or email traffic lands.

Heatmap

A heatmap is a picture of a page that shows where visitors click, move and how far they scroll, with hot colors for the most activity.

Keep reading