Hero Section: What to Put Above the Fold So People Keep Reading

The hero section is the first visible part of a page, the part that appears before anyone scrolls, and it decides whether the visitor keeps reading or leaves. In a few seconds it must answer three questions: what you offer, who it is for, and what they should do now. If it fails, the rest of the page, however good it is, is left without readers.

This guide explains which elements make up a good hero, what job each one does, how to keep it consistent with the ad that brought the visitor, why the design should be thought for mobile first, and how to look after load speed. It closes with a checklist for reviewing yours.

What is the hero section and why does it decide whether people keep reading?

The hero is the header block of a landing: the headline, the subheadline, the main button, and an image or video that occupy the screen on load. It takes its name from the English “hero,” for being the protagonist of the page. It is also known as the “top of the page” or by the English phrase “above the fold.”

It matters because attention is limited and the decision to stay is made very fast. Before reading a single sentence of the rest, the visitor has already formed an impression from what they see on arrival. A clear hero invites them to continue; a confusing, crowded, or slow one causes abandonment, and no later section can fix it because nobody reaches it.

What elements should a hero section have?

An effective hero does not need many components, but it does need each one to do its job well. These are the five that should not be missing.

• A clear headline. It should say in one sentence what you, the visitor, gain from the offer. Prioritize the concrete result over a clever slogan nobody understands at first glance.
• A supporting subheadline. One or two lines that clarify how the benefit is achieved or who it is for. If the headline promises, the subheadline explains without repeating.
• A visible action button. A single primary button, with a clear verb and contrast that stands out against the background. Avoid several actions competing with each other.
• Visual proof. An image, a product screenshot, or a short video that shows what is offered in real use. Generic stock photos add little.
• A trust signal. A brief piece of data that reduces risk: client logos, a rating, a verifiable user count, or a guarantee badge.

The headline is the piece that weighs most, and it deserves its own work. If you want to go deeper, review how to write the headline of a sales page and test several versions before you settle on one.

The trust signal does not have to be large: a line with a real figure or a couple of logos is enough. To choose which one to show, what is explained about social proof and how it reduces visitor doubt in the first seconds will help you.

What job does each hero element do?

To review your header with judgment, it helps to think of each piece by the job it does and by the signal that something is failing. The table sums it up.

| Element | Its job | Signal that it is failing |

| --- | --- | --- |

| Headline and subheadline | Communicate what you offer and what people gain in under five seconds | Visitors ask what you do or leave without scrolling |

| Action button | Point to the next step with a single clear path | Few clicks on the button or clicks split across several options |

| Image or video | Show the product in use and reinforce the message | A decorative image that explains nothing or that slows the load |

| Trust signal | Reduce perceived risk before asking for an action | Doubts about reliability that show up in inquiries and in support |

If an element is not doing its job, do not decorate it: rewrite it or remove it. A hero with four pieces that work outperforms one with seven that get in each other’s way.

An important nuance: that the hero is decisive does not mean the visitor never scrolls. People go down a page when what they see at the top gives them a reason to. That is why the hero’s goal is not to tell everything, but to spark enough interest for the visitor to want to keep reading and discover the rest of your argument.

Why must the hero match the ad?

Anyone who arrives from an ad, an email, or a search result brings a promise in their head. If the hero does not confirm it immediately, the visitor thinks they have landed on the wrong page and leaves. That match between what you promised outside and what they find inside is called message match.

Make sure the headline, the offer, and even the images in your hero repeat the language of the ad. That is the idea developed in ad-to-page congruence: if the ad talks about a first-month discount, the hero should show it, not hide it in the middle of the page.

When you have several campaigns with different promises, the ideal is a hero adapted to each one, even if the rest of the page is the same. Changing only the headline and the subheadline is often enough to keep the thread.

How do you design a hero thought for mobile first?

A large share of visits arrives from the phone, and there the visible space is much smaller. Design the mobile version first and then expand it to desktop, not the other way around. It is worth reviewing how a landing behaves on mobile with a 4G connection before you treat the design as done.

• Prioritize the essentials. On a small screen there is room for the headline, a short subheadline, and the button. If the image pushes the button out of view, reduce it or move it below.
• Text that is readable without zooming. Use a comfortable type size and enough contrast; a headline that is too long splits into five lines and loses force.
• A comfortable tap target. The button should be large enough and separated from other elements so it can be tapped with a thumb without errors.

How does load speed affect the hero?

The hero is the first thing that loads, so its weight sets the first impression. A huge image or a video that starts slowly leaves the visitor looking at a blank screen, and many will not wait. Applying good web-speed practices in this area pays off more than anywhere else on the page.

Compress the main image and use modern formats such as WebP, define its size so the page does not shift on load, and avoid animated sliders or heavy background videos. The largest visible element, which Google measures as LCP within Core Web Vitals, should appear in under two and a half seconds. If you have to choose between a spectacular image and a fast one, keep the fast one.

How to review your hero section step by step

Use this list every time you create a landing or want to improve an existing one. It takes only a few minutes.

1. Show your page to someone who does not know it for five seconds and ask them to tell you what you offer and who it is for.
2. Check that the headline promises a concrete result and that the subheadline explains it without repeating it.
3. Verify that there is a single primary button, visible without scrolling on mobile and on desktop.
4. Confirm that the hero repeats the promise of the ad or the link the visitor arrived from.
5. Measure the load: reduce the weight of the main image and test again until the hero appears almost instantly.

With Atomicat you can assemble a hero with headline, button, image, and trust signal from blocks already optimized for mobile, and change the copy by campaign without touching code.

Frequently asked questions

What is the hero section of a web page?

It is the header block you see when the page loads, without scrolling. It usually includes a headline, a subheadline, an action button, and an image or video, and its job is to capture attention and orient the visitor.

What should the hero section of a landing include?

A clear headline, a subheadline that completes it, a single action button, visual proof of the product, and a brief trust signal. All of that should match the promise of the ad that brings the visitor.

What is the difference between hero and above the fold?

They refer to almost the same thing. “Above the fold” is the area visible without scrolling and the hero is the design block that occupies it, although on small screens what is visible varies by device.

How heavy should the hero be to load fast?

There is no single figure, but it is worth compressing the main image, using modern formats, and avoiding heavy background videos. The goal is for the largest element to appear in under two and a half seconds.

How do I know if my hero works?

Watch whether the visitor scrolls, how many clicks the primary button gets, and how many people leave as soon as they arrive. Then test a different version of the headline or the image and compare the results.

Win the first seconds and the rest will follow

Everything you write below the hero only has value if the visitor gets that far. A clear headline, a single button, real visual proof, and a fast load turn the header into the strongest argument on your page, and it is the part where any improvement shows first.

Start your free trial and create a landing with a hero that holds people from the first second, without writing a single line of code.