Hero Section
A hero section is the prominent block at the top of a landing page, typically combining a headline, supporting text, a visual, and a primary call to action.
Key takeaways
- A hero is a composite block; it works through hierarchy, not through one element.
- Repeating the ad's own phrasing in the hero lowers bounce through immediate recognition.
- A relevant screenshot supports the claim; decorative photography takes space without adding evidence.
- Removing navigation from a quiz landing hero leaves exactly one thing to click.
- Flat hero test results usually mean positioning is wrong, not presentation.
In depth
A hero section is a composite: headline, supporting line, a visual, one primary action and often a small trust element. It works through hierarchy rather than through any single part. Type size, contrast and whitespace set the reading order, so the eye lands on the headline, is handed to the supporting line, and arrives at the button. When two elements compete for the same visual weight the sequence breaks, and the visitor has to work out the order for themselves.
Message match is the strongest lever. When the hero repeats the phrase from the ad or search result that brought the visitor, recognition is immediate and bounce falls. Visual choice matters second: a relevant screenshot or diagram supports the claim, while a decorative stock photo takes space without adding evidence. A second call to action, a navigation bar full of links, or an autoplay video usually costs more in dilution than it returns in options offered.
In practice the hero is built last, once the offer and audience are settled, and rewritten whenever the traffic source changes. Many teams keep several hero variants per campaign while the rest of the page stays fixed. On a quiz funnel page the hero is the entry point: the headline frames the outcome, the supporting line gives length and format, and one button starts the scorecard, with navigation removed so nothing else invites a click.
A hero cannot compensate for the wrong audience or an offer nobody wants, and no amount of contrast on the button changes that. Teams that keep testing hero variants after the gains flatten are usually optimising presentation when the real problem is positioning. The pattern also fits poorly where the visitor arrives already convinced, such as a pricing page reached from inside a trial, and on editorial pages, where a large decorative block simply delays the text the reader came for.
Example in practice
How to measure it
Two numbers describe hero performance: click-through rate on the primary action, and bounce rate among visitors who never scroll. Read both per traffic source, since a hero written for one ad will underperform for another. A high bounce rate alongside a strong click rate on the small remainder points at message mismatch rather than at a weak button or a poor colour choice.
Test one variable at a time and hold the rest of the page fixed, otherwise you cannot tell whether the headline or the image moved the result. Follow the winner past the click as well: a hero that lifts quiz starts but drops completion has attracted people the offer does not fit, which is a loss dressed up as an improvement.
Common mistakes
Teams write the hero first, before the offer and audience are decided, and end up with copy that describes the company rather than the visitor's outcome. Write the result the visitor gets first, as a sentence you would say out loud on a call, then compress it into the headline and move the specifics into the supporting line. If you cannot say who the page excludes, the hero is still too broad.
The second failure is the crowded hero: two buttons of equal weight, a full navigation bar, a rotating carousel and a row of badges. Each addition asks the visitor to choose rather than to act, and carousels in particular move the message away before it has been read. Give one action the dominant contrast, make secondary links visibly lighter, and replace the carousel with its single strongest frame.
Frequently asked questions
What is the most common hero section mistake?
A headline that is clever or feature-focused instead of value-focused, so visitors cannot tell what they get. Leading with the concrete outcome the quiz delivers usually converts far better.
What belongs in a hero section?
A headline stating the outcome, one supporting line carrying the specifics, a visual that clarifies rather than decorates, and a single primary action. A short trust element such as a customer count or a one-line quote can help if it is true and brief. Everything else, including navigation on a dedicated landing page, is optional and usually subtractive.
Should a hero use an image or a video?
Use an image when the visual clarifies what the product does, such as a screenshot or a labelled diagram. Video works when the offer resists a one-sentence explanation, but keep it click-to-play; autoplay competes with the headline and delays the first render. Decorative photography adds page weight without adding information the visitor can act on.
Should a landing page hero include navigation?
On a dedicated campaign page, usually not. Navigation offers exits from a page whose purpose is one action, and the visitor arrived from an ad rather than from browsing. Keep the logo and any legally required links. On a homepage the calculation reverses, because visitors arrive with mixed intent and genuinely need routing.
How is a hero section different from above the fold?
Above the fold is a viewport measurement: whatever is visible before scrolling. A hero section is a designed block with a defined composition. They usually overlap but are not the same, since a tall hero can extend below the fold on a phone, and an announcement bar can occupy visible area without belonging to the hero at all.
How long should hero copy be?
The headline works best as one readable line at mobile width, which usually means fewer than about ten words. The supporting line can run to two lines and carries the qualifiers: for whom, how long, what it costs. Past that, text starts pushing the button off the screen, trading clarity for completeness at the worst possible moment.
How often should the hero be updated?
Whenever the offer, the audience or the traffic source changes, rather than on a schedule. A hero written in one campaign's language feels off to visitors arriving from a different ad. Many teams keep a shared page body and swap only the hero per campaign, which preserves message match without maintaining a separate page for every variant.