Hero Section
Hero Section is the top section of a webpage - the first content area a visitor sees on arrival, typically before any scrolling. The hero section is the single most important surface on most landing pages because it determines whether visitors continue reading, click a primary call-to-action, or leave. A hero section usually includes a headline, subheadline, primary CTA, and a supporting visual (image, video, or illustration).
The anatomy of a hero section
Six standard components:
Primary headline. The main value-proposition statement. Usually the largest text on the page.
Supporting subheadline. Expands on the headline with specifics. Usually 1–2 sentences.
Primary CTA. The main action the visitor should take. ‘Start free trial,’ ‘Get a demo,’ ‘Read the guide.’
Secondary CTA (sometimes). An alternative action. Often ‘Watch demo video’ or ‘See how it works.’
Supporting visual. Image, illustration, or video that reinforces the value proposition.
Trust signals. Customer logos, awards, review stars, usage statistics. Often just below the main content.
What makes a hero section work
Five principles:
Clarity over cleverness. Visitors should understand what the product does in five seconds. Clever headlines that require decoding lose visitors.
Specific value proposition. ‘The best CRM’ is weaker than ‘CRM for consulting firms managing 50-500 clients.’
Focused CTA. One primary action. Multiple competing CTAs dilute decision-making.
Authentic visual. Product screenshots, real customer photos, actual interfaces. Stock photography reads as generic.
Above-the-fold priority. Everything essential in the first screen. Below-the-fold content supports; hero converts.
Common hero section mistakes
Five failures:
Vague headline. ‘Transform your business.’ Means nothing. Every visitor is already transforming their business in some direction.
Too many CTAs. Three buttons competing for attention. Visitors don’t choose; they leave.
Stock photography. Smiling office people in business attire. Generic and forgettable.
Feature-focused. Hero describes features rather than outcomes. Visitors don’t know why features matter.
Jargon-dense. ‘AI-powered cloud-native revenue-operations orchestration platform.’ Impressive-sounding; communicatively worthless.
Hero section testing
Four A/B test categories:
Headline variations. Different value-proposition framings. Often produces the biggest conversion-rate shifts.
CTA copy. ‘Start free trial’ vs ‘Get started free’ vs ‘Try it free.’ Small differences accumulate.
Visual type. Product screenshot vs video vs illustration. Different visuals work for different products.
Social-proof placement. With hero vs below hero. Changes the trust dynamics of the first impression.
Modern hero patterns
Five common approaches in 2026:
Product-screenshot hero. The product itself is the visual. Common for SaaS and dev tools. Shows rather than tells.
Video-autoplay hero. Short looping video demonstrating the product. Can be effective; can be distracting. Test carefully.
Illustration hero. Custom illustration reinforcing the value proposition. Strong for brand-differentiation purposes.
Photography hero. Real people, real situations. Works for services and human-facing products.
Minimal-text hero. Oversized headline, tiny subhead, one CTA, no visual. Relies on strong copy. Common on text-focused sites.
Hero section for different audience stages
Three audience-awareness levels:
Unaware audience. Don’t know they have the problem. Hero educates about the problem, then positions the product.
Problem-aware audience. Know the problem; evaluating solutions. Hero explains how this specific solution works.
Solution-aware audience. Know the category; comparing providers. Hero focuses on differentiation from alternatives.
Same product; different heroes for different campaign audiences.
Hero section measurement
Four metrics:
Hero bounce rate. Percentage of visitors who leave without scrolling. Signals hero-section failure.
Time to first scroll. How long before visitors scroll. Faster isn’t always better - too fast means the hero didn’t engage.
CTA click rate. Primary-CTA click percentage. The direct hero-success metric.
Subsequent engagement. Do hero visitors go on to complete the funnel? Hero quality affects downstream conversion, not just immediate clicks.
How content supports hero sections
Two content-marketing connections:
Blog posts drive traffic to landing pages. A well-designed hero on the landing page converts that traffic. Content and hero work together; one without the other underperforms.
Content programmes inform hero messaging. Themes that resonate in content articles often become effective hero headlines. Content is a testing ground for messaging.
We built Penfriend partly to produce the content that brings traffic to landing pages with well-designed heroes. A content programme driving 100K organic visits to landing pages whose hero section converts at 5% produces very different results than the same traffic on a hero converting at 1.5%. Both halves matter.
Related terms
- Landing Page - the surface hero sections anchor
- Above the Fold - the region hero sections occupy
- Conversion Rate Optimization (CRO) - the discipline hero sections drive
- Call-to-Action (CTA) - a hero section’s primary action
- Headline - the hero’s most important text element