What is a hero section?

A hero section is the top design region of a webpage — typically the first major content block visible to users. It usually contains the page's primary headline, supporting subheadline, hero image or video, and primary call-to-action (CTA). The hero is the highest-leverage real estate on any marketing page.

According to a 2024 Unbounce study of 10,000+ landing pages, redesigning the hero section alone produced average conversion lifts of 30-50% across tests. Because users decide within 3 seconds whether to engage, the hero is the single most important design decision on any conversion-oriented page.

How a hero section works

A high-performing hero section includes:

• Headline — clear, specific value proposition in 5-12 words
• Subheadline — clarifying detail or context in 1-2 sentences
• Hero visual — image, video, animation, or product screenshot
• Primary CTA — single action button with action-oriented copy
• Optional trust signals — customer logos, brief testimonial quote, ratings

The hero typically occupies 60-100% of the above-the-fold viewport. Effective heroes are scannable in under 3 seconds while still communicating differentiated value.

According to Nielsen Norman Group eye-tracking research, users spend approximately 80% of their above-the-fold attention on the hero region. The hero earns or loses the next interaction.

Hero design patterns:

• Headline + subhead + CTA + product image — most common SaaS pattern
• Video hero — autoplay loop demonstrating the product
• Split layout — headline left, image right (or reversed)
• Animated illustration hero — branded visual narrative
• Bold-statement hero — text-only with massive typography

The hero needs to do three jobs simultaneously: (1) explain what the product is, (2) explain why it matters, (3) invite the next action.

Examples of hero sections in practice

Example 1: Stripe homepage hero

Stripe's hero combines a bold headline ("Financial infrastructure to grow your revenue"), brief subhead, dual CTAs (Start now / Contact sales), and a customer logo bar. The design has been studied as a B2B SaaS hero benchmark.

Example 2: Notion's product hero

Notion's homepage hero shows a single product screenshot animated to demonstrate use cases, paired with the headline "The happier workspace" and a simple "Get Notion free" CTA. The visual storytelling earns scrolls and drives signup.

Example 3: Solopreneur SaaS hero

A solo SaaS founder's hero uses a tight headline ("Generate a week of social posts in 2 minutes"), subhead ("AI-powered content for solopreneurs"), and a product screenshot. Single CTA: "Start free trial." The focused hero converts at 5-8% of homepage visits.

When to invest in hero design

Invest in hero design when:

• You're launching a new landing page
• You're redesigning the homepage
• You're seeing high bounce rates from above-fold-only visitors
• You're A/B testing for conversion lift
• You're optimizing paid ad destination pages
• You're refining product positioning

When NOT to over-invest in hero

• Pre-PMF positioning shifts — Don't perfect the hero before knowing the product story
• Resource pages — Long-form articles benefit less from hero polish
• Brand discovery sites — Where exploration matters more than conversion

Hero section vs related concepts

Hero section is the design unit; above-the-fold is the viewport boundary. The hero typically dominates above the fold but often extends slightly below.

Common mistakes with hero sections

• Vague headlines — "Welcome to [brand]" or "We help businesses grow" don't differentiate.
• Cluttered design — Multiple CTAs, claims, or images dilute the focus.
• Slow-loading hero images — Heavy images delay first-paint and kill conversion.
• Mobile-broken layouts — Hero designs need to adapt to small screens elegantly.
• No proof signals — Cold visitors need trust signals (logos, ratings, brief testimonials).

Frequently asked questions about hero sections

What makes a great hero section? Clarity above creativity. The best heroes communicate what the product is, why it matters, and what to do next within 3 seconds. Specific value propositions outperform vague claims. Strong visuals support the message rather than competing for attention.

How do I write a strong hero headline? Focus on outcome, not features. "Send 10x more emails in half the time" beats "Email automation platform." Specificity wins: numbers, time-savings, money outcomes. Test 5-10 variants and pick the clearest. Read aloud — if it doesn't make you want to know more, sharpen it.

How do I implement a great hero? Pick one specific value proposition. Write a 5-12 word headline. Add a 1-2 sentence subhead with supporting detail. Choose a hero visual (product screenshot, video, illustration). Add a single primary CTA. Test variants.

What tools help build hero sections? Webflow, Framer, Carrd for design-focused builders. Figma for hero mockups. Lottie for animated heroes. Next.js Image for performance optimization. PostKit's marketing pages use Next.js + Tailwind for hero design.

Should the hero include a video? Sometimes. Hero videos increase engagement on product-led pages but slow page load. Use video when the product is hard to explain in static (Notion, Loom). Use static images when speed matters more than demonstration.

How long should the hero section be? Vertical: 60-100% of the initial viewport. Wider than the viewport: never. Hero copy: headline 5-12 words, subhead 15-30 words. Keep it scannable in under 3 seconds.

How PostKit uses hero sections

PostKit's marketing pages use hero sections optimized for conversion. The homepage hero combines a clear headline, brief subhead, a single "Start free trial" CTA, and an animated product mockup showing content generation. Each product surface (Social Autopilot, Ad Studio, ASO Screenshot Maker) has its own hero tailored to that audience. Founder Tadeáš Raška has tested multiple hero variants including text-only, image-led, and video-led versions, sharing results in build-in-public posts.

Related glossary terms

• Above the fold — Viewport that contains the hero
• Below the fold — Content that follows the hero
• Landing page — Page type where hero matters most
• CTA — Critical hero element
• Conversion rate optimization (CRO) — Discipline applied to hero design

Sources

• Unbounce Conversion Benchmark Report
• Nielsen Norman Group hero research
• CXL Institute hero design