Hero sections: how to design the top of your page
The hero is the large section at the top of a page, usually a headline, a supporting line, an image, and a call to action. It is the first thing every visitor sees, which makes it the most valuable space on the page. Visitors decide within seconds whether to stay, so the hero has to let a stranger understand what you do and what to do next without scrolling. This guide covers what belongs there, how to choose the image, and a free way to test it.
What belongs above the fold
"Above the fold" just means what a visitor sees before they scroll. On a phone, that is a smaller area than most people design for, so be strict about what earns a place.
- A clear headline that says what you do and for whom. Plain beats clever: "Emergency plumbing in Edmonton, day or night" tells a visitor more than "Flow with confidence".
- One short supporting line with the main benefit or the reason to choose you.
- One obvious call to action. If there are four equal buttons, there is no call to action.
- A trust cue, such as a short proof point, a rating that is genuinely yours, or a recognisable credential.
What to leave out
- A vague slogan or a generic welcome message.
- A giant menu that pushes the real content down.
- A slider that rotates through several messages. Few visitors wait for the second slide, so the first one has to carry everything anyway.
- A video that auto-plays with sound, or one that delays the page loading.
Choosing a hero image
The image sets the tone before anyone has read a word. The right one reinforces your message, and the wrong one confuses it or makes the business look cheap.
- It should be relevant. A picture of what you actually do, or of the result, beats a generic image of people at a laptop.
- Real photography generally outperforms generic stock, because it is specific to you and visitors can tell. Our guide on stock vs real photos covers the trade-off.
- It should not fight the headline. Leave enough calm space, or enough contrast, that the text stays readable on every screen size.
- It should load fast. The hero image is very often the element Google measures as Largest Contentful Paint, so a huge, unoptimised photo makes the whole page feel slow. Resize it, use a modern format, and do not lazy-load it, because it is the first thing needed.
If an image does not add meaning, or slows the page down, it is not earning its prime position.
The five-second test
The quickest way to know whether your top section works costs nothing.
- Show your homepage to someone who has never heard of your business, for five seconds, then hide it.
- Ask three questions: What does this business do? Who is it for? What would you do next?
- If they cannot answer all three, neither can your real visitors, and you are losing people before they scroll.
What usually fails the test
- A vague headline such as "Welcome" or "Excellence in everything".
- No clear next action, or too many competing ones.
- A hero image that does not show what you do.
- Text over an image that is unreadable on a phone.
The fix, in order
- Rewrite the headline so it says what you do, for whom, and the payoff.
- Pick one primary call to action and make it unmistakable.
- Choose or replace the image so it supports the message, then make sure it is optimised.
- Run the five-second test again with someone new.
Clarity beats cleverness every time. If you want a quick read on how your headline scores, our free headline grader is a good place to start.