Anatomy of a high-converting hero
The hero does more work than the rest of the page combined. Here's every block it needs - and the order that turns a glance into a click.
The hero is the most expensive real estate on the internet. It's the only section every visitor sees, and most of them decide whether to stay within a few seconds of it loading. Get it right and the rest of the page gets a chance. Get it wrong and nothing below the fold matters. Here's the block-by-block anatomy we use.
01The eyebrow
A short line above the headline that sets context - category, audience, or a one-line promise. It's small, but it orients the reader instantly so the headline can do its real job without explaining itself. Keep it to a few words; it's a signpost, not a sentence.
02The headline
The single most important element on the page. It should name the outcome the reader wants in plain, confident language. Specific beats clever; clear beats comprehensive. If the headline only makes sense after reading the subhead, the headline isn't finished.
A visitor should understand your headline at a glance and your offer in a breath.- the five-second standard
03The subhead
One or two lines that earn the headline's claim - the "how" beneath the "what". This is where a concrete mechanism or differentiator lives. The headline makes the promise; the subhead makes it believable.
Read your headline and subhead alone, with nothing else. Do they answer what is this and why should I care? If you need the rest of the page to make them land, tighten them.
04The primary CTA
One dominant action, styled to be the loudest thing in the hero. Use an action-and-outcome label - "Start converting", not "Submit" - and give it real contrast and a generous hit area. A single secondary link (a quiet "see how it works") is fine; a second button competing for attention is not.
05The proof bar
Immediately beneath the ask, hand the visitor a reason to trust it: logos, a rating, a specific number, a one-line testimonial. Proof placed right next to the CTA defuses doubt at the exact moment it appears. Specificity is everything - real names and real numbers, never "trusted by many".
06The visual
The hero image or animation should show the product doing its job or dramatize the outcome - not decorate the space. If a visitor learns nothing from removing it, it's wallpaper. And whatever you choose, it has to load fast: a heavy hero that paints late costs you the very seconds it was meant to win.
<!-- Hero priorities, in source order --> <p class="eyebrow">For Series-A SaaS teams</p> <h1>Close the books in a day</h1> <p class="subhead">Automated reconciliation, audit-ready.</p> <a class="cta">Start your trial</a>
Sequence the six blocks in that order, keep each one doing exactly one job, and the hero stops being decoration and starts being a conversion engine. Everything below the fold is a follow-up argument - but only if the hero earns the scroll.
Need a hero
that delivers?
We design high-performance heroes that drive real results.
Start a project →