How to Design a High-Converting Hero Section (Copy-Paste Code)

#css #html #design #webdev

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.