Hero Section

The hero section is the large, prominent banner at the top of a webpage. It is the first thing visitors see and the single most valuable real estate on your site. It must communicate your value proposition, set the visual tone, and drive the primary action within seconds.

Category: Cro (also: Design, UX)

Author: Atomic Glue Research Team

## Definition

The hero section is the full-width banner area at the top of a webpage, typically occupying the entire viewport above the fold. It contains the primary headline, supporting subheadline, and main CTA button, often accompanied by a hero image, illustration, or video background. The hero section is the digital equivalent of a storefront window. It has two jobs: stop the scroll and start the conversion. If the hero section is weak, the rest of the page does not matter because the visitor never sees it.

## Elements of a High-Converting Hero

A strong hero section has: (1) A single, benefit-driven headline that communicates the core value proposition. (2) A supporting subheadline that adds context and specificity. (3) A primary CTA button with clear, action-oriented copy. (4) A supporting visual (image, illustration, or video) that reinforces the message. (5) Optional but recommended: a secondary trust signal (testimonial snippet, logo wall, or a secondary navigation link). (6) Zero clutter. No carousels. No multiple competing messages.

## The Hero Carousel Anti-Pattern

Carousels in the hero section are one of the most tested and most consistently failed design patterns. Click-through rates on carousel slides 2, 3, and beyond are near zero. Users interpret the carousel as a banner and ignore it entirely (banner blindness). The only message that matters is slide 1, and it gets degraded by the rotating UI. The solution: pick the single most important message and commit to it. If you have multiple messages, build a page hierarchy, not a carousel.

## Hero Section Performance

The hero section is the most performance-critical part of the page. If it loads slowly, the visitor sees a blank space or a flash of unstyled content. Optimize hero images aggressively (use next-gen formats, lazy-load below-the-fold content, inline critical CSS). A slow hero section feels like a slow website, and slow websites convert worse. The relationship between load time and conversion is linear: every 100ms delay reduces conversion by roughly 1%.

## Note

Video backgrounds in hero sections are almost always a bad idea for conversion. They increase load time, add distraction, and often autoplay with sound (which drives users away). If you must use a video, keep it short, silent by default, and below 2MB. A static hero image or illustration will almost always outperform a video background in conversion tests.

## In code

<!-- Optimized hero section with progressive enhancement -->
<section class="hero">
  <div class="hero-text">
    <h1>Turn Traffic Into Revenue</h1>
    <p class="hero-sub">
      Data-driven CRO that finds every leak in your funnel
      and plugs them with evidence, not opinions.
    </p>
    <a href="/audit" class="hero-cta">Get Your Free Audit</a>
  </div>
  <div class="hero-visual">
    <!-- Use <picture> for responsive images -->
    <picture>
      <source srcset="/hero.webp" type="image/webp">
      <img src="/hero.png" alt="Dashboard preview" loading="eager">
    </picture>
  </div>
</section>

<style>
  .hero {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    padding: 2rem;
    gap: 2rem;
  }
  .hero-text {
    flex: 1;
    max-width: 600px;
  }
  .hero h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.1;
    margin-bottom: 1rem;
  }
  .hero-cta {
    display: inline-block;
    padding: 16px 32px;
    background: #0055FF;
    color: white;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
  }
</style>

## Common questions

Q: Should my hero section have a video?

A: Probably not. Test it. In most cases, a static image or illustration outperforms video for conversion. Video increases load time and cognitive load. If video helps your specific product (demonstrating software, showcasing a physical product), test carefully.

Q: How long should the hero headline be?

A: Short enough to read in under 3 seconds. 6-12 words is the sweet spot. The subheadline can be longer (15-25 words) to add context. Brevity is not a constraint. It is a discipline.

Q: Should I use a hero section on every page?

A: Yes, for top-level pages. Landing pages, product pages, and category pages all benefit from a clear hero section. Internal pages like knowledge bases or dashboards may not need one.

## Key takeaways

• The hero section is the most valuable real estate on your website
• One headline, one CTA, one message. No carousels
• Hero carousels are a tested and failed design pattern. Use one message
• Optimize hero load time aggressively. Every 100ms delay costs ~1% conversion
• Video backgrounds usually hurt conversion. Test before shipping

## Related entries

• [Above the Fold](atomicglue.co/glossary/above-the-fold)
• [Value Proposition](atomicglue.co/glossary/value-proposition)
• [Call to Action (CTA)](atomicglue.co/glossary/call-to-action-cta)
• [Landing Page](atomicglue.co/glossary/landing-page)

Last updated July 2026. Permalink: atomicglue.co/glossary/hero-section