Your hero section gets about 3 seconds to answer one question: "what is this, and is it for me?" Here's the boring, copy-paste pattern that converts — and the flashy one that quietly kills your clicks.
Five elements, in priority order
A benefit-led headline, a one-line subhead, one primary CTA, a supporting visual, and a single trust signal. The most common mistake I see is two equally loud buttons — they split attention and lower clicks on both.
Copy-paste it
<section class="hero">
<h1>Launch a fast website this weekend</h1>
<p>Hand-coded templates that pass Core Web Vitals.</p>
<a class="cta" href="/templates">Browse templates</a>
</section>
.hero{max-width:640px;margin:0 auto;padding:96px 24px;text-align:center}
.hero h1{font-size:clamp(2rem,5vw,3.25rem);line-height:1.1}
.cta{display:inline-block;background:#4a9eff;color:#fff;padding:14px 28px;border-radius:8px}
That renders in well under a second, has zero layout shift, and works on every screen via clamp(). Boring — and boring converts.
Write the headline about the visitor, not you
Weak: "We build modern web templates." Strong: "Launch a production-ready website this weekend." If a competitor could paste their logo above your headline and it'd still be true, it's too generic.
Things that quietly tank conversion
- A carousel (a single static message tests better, almost always)
- A heavy background video that delays LCP past 2.5s
- Two equal CTAs splitting intent
- Text over a busy image with no overlay (fails contrast)
Want hero sections already built to these standards? I package tested patterns into hero UI kits at DesignToCodes.
What's your current hero headline? Paste it below, and I'll tell you if it passes the "competitor logo" test 👇
Top comments (0)