Hero section

The hero section is the large block at the top of a web page, usually with a headline, a short explanation, a button and an image. It's the first thing every visitor sees, and on most homepages it fills the entire first screen, above the fold.

What a hero section usually contains

• A headline with your value proposition
• A subheading of one or two lines
• A call to action, sometimes with a secondary link
• An image, video or illustration, ideally showing the product or result
• Optionally a trust signal, like a review score or client logos

Common mistakes

• A beautiful image without a message. A full-screen photo with a vague slogan leaves visitors guessing.
• Sliders. Rotating slides split attention, and most visitors only see the first one.
• Too much text. The hero is not the place for your whole story.
• Broken on a phone. The image often pushes the headline and button below the first screen on a small screen. See your first screen on a phone.

Is your hero section working?

The hero section is what reviewers judge on StayOrBounce: a screenshot of your first screen on a laptop and on a phone, rated on four questions. Low scores on Do I understand what this is? usually point at the headline; low scores on Would I stay? often at the button.