Hero Section Design: How to Make Users Stay (With Examples)

The hero is a promise, not a banner

Most visitors decide whether to stay before they scroll. In that moment they are not reading, they are scanning for three answers: what is this, is it for me, and what do I do next. A hero section that answers those three earns the scroll. One that opens with a slogan, a slider or a stock photo of a handshake asks the visitor to do the work, and most of them will not.

This post is only about that first screen. How it hands over to the rest of the page is covered in landing page structure that actually converts.

The five jobs of a hero section

1. Name the outcome. The headline says what changes for the reader, not what the company is.
2. Name the audience. Either in the headline or the line under it, so the right reader recognises themselves and the wrong one leaves quickly.
3. Explain the how, briefly. The subheading adds the mechanism in one sentence: the service, the product, the approach.
4. Offer one action. A single primary button, with an optional quiet secondary link for readers who are not ready.
5. Show one piece of proof. A client row, a rating, a single outcome. Enough to make the promise believable before the scroll.

Anything else in the hero competes with those five.

Headlines, before and after

The fastest way to see the principle is to rewrite some real-sounding headlines.

None of the "after" versions are clever. They are specific, and specificity is what makes a stranger stop scanning.

Pick the pattern that fits the business

Design details that decide whether it reads

• Hierarchy before decoration. The headline should be clearly the largest thing on the screen. If a background image or an animation is louder than the words, the page has chosen spectacle over clarity.
• Measure the line length. Headlines that run edge to edge on a wide screen are hard to read. Keep them to about two lines at desktop width.
• Contrast is not optional. Text over a photograph needs a tested overlay, not a hopeful one. If you have to squint, so does the visitor.
• One button that looks like a button. A primary action should be the most obviously clickable thing in view. Two equally weighted buttons split the decision.
• Motion supports, never gates. A subtle entrance is fine. A headline that only appears after an animation finishes is a headline some people never read.

Designing the hero for a phone

Most traffic is on a phone, and a desktop hero squeezed into a narrow column is the most common reason mobile converts worse than desktop.

• Keep the headline, subheading and button above the fold at a typical phone height. Push the visual below them if it does not fit.
• Make the button full width or close to it. Thumbs miss small targets.
• Cut the subheading shorter for mobile if you must. The headline stays.
• Check that nothing sticky, a cookie bar, a chat bubble, an announcement strip, covers the button.

How to test a hero without a testing tool

Show the first screen, and only the first screen, to five people who do not know your business. Give them five seconds, then take it away and ask: what does this company do, who is it for, and what would you click. If fewer than four can answer all three, rewrite the headline before touching anything else.

Then watch the numbers that matter for a hero: the share of visitors who scroll past the first screen, and the click rate on the primary button. If those move after a headline change, the hero is doing its job. For the wider picture of what to measure, see the beginner guide to website conversion optimization.

Common hero mistakes

• Sliders and carousels. Nobody waits for slide three. Choose the one message that matters.
• A video with no words. Beautiful, silent, and it answers none of the three questions.
• Leading with the company name. Your logo already says who you are.
• Asking for too much too soon. A "book a strategy call" button on a first visit can be too big a step. Offer the next step the visitor is ready for.

If the hero is right and the page still does not convert, the problem is further down. Why your website is not converting walks through where to look next, and the words themselves are covered in the website copy guide.

Frequently asked questions

How long should a hero headline be?

Long enough to name the outcome and ideally the audience, usually six to twelve words. Short is only better if it stays specific.

Should the hero have an image or a video?

An image or product screen that shows the outcome helps. Decoration that says nothing does not. Video is fine as long as the words work without it.

Should the form go in the hero?

Yes for paid campaign pages and ready-to-act traffic. No for considered purchases, where the page has to explain before it asks.

Do I need a secondary call to action?

Only as a quiet text link for readers who are not ready, such as seeing the work or reading the process. Two equal buttons split the decision.

How often should I change the hero?

Whenever the offer or the audience changes, and otherwise when the numbers say it is not working. Changing it for novelty mostly resets what you have learned.