You have about five seconds to convince visitors to stay. Nielsen Norman Group research shows that users often leave web pages within 10-20 seconds, with the first few seconds being critical.
The hero section - the above-the-fold content visitors see immediately upon landing - is where that decision happens. Before visitors scroll, read your copy, or examine your offer, they're making a snap judgment based on what they see in those first few seconds.
A strong hero section captures attention, communicates value, and creates desire to learn more. A weak one loses visitors before they give you a chance.
This guide covers what belongs in your hero section, how to arrange it for maximum impact, and the common mistakes that cause visitors to bounce immediately.
What Is the Hero Section?
The hero section is the portion of your landing page visible without scrolling - the "above the fold" content that creates the first impression.
The hero section must accomplish:
- Confirm visitors are in the right place (message match)
- Communicate your core value proposition
- Create interest in learning more
- Provide a path to conversion
Some visitors never scroll past the hero. For them, this section is your entire pitch. The hero must work as both an introduction and as a complete conversion argument.
Essential Hero Section Elements
High-converting hero sections consistently include these elements:
1. Primary Headline
The most important element on the page. Your headline must:
- Communicate what you're offering
- Connect to visitor needs or desires
- Match the message that brought them here
- Create curiosity or desire
Effective headline characteristics:
- Specific rather than generic
- Benefit-oriented or curiosity-inducing
- Clear and immediately understandable
- Aligned with ad or email copy
For detailed headline strategies, see our landing page headlines guide.
2. Supporting Subheadline
The subheadline expands on the headline with:
- Additional context or specificity
- Supporting benefit or proof point
- Clarification of the offer
- Audience qualification
The headline/subheadline combination:
- Headline: Grab attention, communicate primary benefit
- Subheadline: Support, clarify, or expand
Example:
- Headline: "Cut Your Reporting Time in Half"
- Subheadline: "AI-powered analytics that builds dashboards automatically, so you can focus on insights instead of spreadsheets"
3. Hero Image or Video
Visual content that:
- Shows the product or outcome
- Creates emotional connection
- Supports the value proposition
- Reinforces credibility
Image options:
- Product screenshot or demo
- Outcome visualization
- Customer using the product
- Abstract representation of benefits
Video considerations:
- Can increase engagement when done well
- Risks slowing page load
- May distract from primary CTA
For more on video strategy, see our landing page video guide.
4. Primary CTA
The hero section should include a conversion path:
- Clear, prominent button
- Action-oriented copy
- Obvious next step
- Above the fold placement
Visitors ready to convert shouldn't have to scroll to find the CTA.
5. Trust Indicator (Recommended)
A quick credibility signal:
- Customer logos ("Trusted by...")
- Social proof snippet ("Join 10,000+ customers")
- Key testimonial quote
- Security badge or certification
This addresses immediate trust concerns without requiring scroll.
Hero Section Layout Options
Left-Right Split (Most Common)
┌─────────────────────────────────────────────────────┐
│ ┌────────────────────┐ ┌───────────────────────┐ │
│ │ │ │ │ │
│ │ Headline │ │ │ │
│ │ Subheadline │ │ Hero Image │ │
│ │ │ │ │ │
│ │ [CTA Button] │ │ │ │
│ │ │ │ │ │
│ │ Trust indicator │ │ │ │
│ └────────────────────┘ └───────────────────────┘ │
└─────────────────────────────────────────────────────┘
Best for:
- Product-focused pages where showing the product matters
- B2B landing pages
- Software and SaaS
Advantages:
- Clear visual hierarchy
- Eye naturally moves from copy to image to CTA
- Flexible for various content lengths
Centered Hero
┌─────────────────────────────────────────────────────┐
│ │
│ Headline (centered) │
│ Subheadline (centered) │
│ │
│ [CTA Button] │
│ │
│ Trust indicator │
│ │
│ ┌───────────────────────┐ │
│ │ Hero Image │ │
│ └───────────────────────┘ │
│ │
└─────────────────────────────────────────────────────┘
Best for:
- Simple, focused offers
- Event or webinar registration
- Single-product pages
Advantages:
- Strong focus on headline
- Clean, uncluttered appearance
- Works well with video embeds
Full-Width Background
┌─────────────────────────────────────────────────────┐
│ │
│ ┌───────────────────────────────────────────────┐ │
│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │
│ │░░░░░░░░░░░ BACKGROUND IMAGE ░░░░░░░░░░░░░░░░░│ │
│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │
│ │ Headline (overlaid) │ │
│ │ Subheadline │ │
│ │ [CTA Button] │ │
│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │
│ └───────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────┘
Best for:
- Emotional or aspirational offers
- Lifestyle products
- Event landing pages
Cautions:
- Text must be readable over image
- Image must not distract from message
- Can slow page load if not optimized
Video Hero
┌─────────────────────────────────────────────────────┐
│ ┌────────────────────┐ ┌───────────────────────┐ │
│ │ │ │ │ │
│ │ Headline │ │ ▶ Video Player │ │
│ │ Subheadline │ │ │ │
│ │ │ │ [Play Button] │ │
│ │ [CTA Button] │ │ │ │
│ │ │ │ │ │
│ └────────────────────┘ └───────────────────────┘ │
└─────────────────────────────────────────────────────┘
Best for:
- Complex products requiring demonstration
- High-consideration purchases
- When video adds significant value
Requirements:
- Video must not autoplay with sound
- Thumbnail should be compelling
- Page must still work without video
Hero Section Copy Best Practices
Headline Writing
Be specific:
- Weak: "Improve Your Marketing"
- Strong: "Generate 3x More Qualified Leads in 30 Days"
Lead with benefit:
- Weak: "Advanced CRM Software"
- Strong: "Close More Deals Without More Effort"
Match visitor intent:
- If they searched for "email marketing software," mention email marketing
- If they clicked a cost-savings ad, lead with savings
Subheadline Writing
The subheadline should answer what the headline leaves open:
- If headline is benefit-focused, subheadline can explain how
- If headline is curiosity-driven, subheadline can clarify offer
- If headline is broad, subheadline can add specificity
Example combinations:
Headline: "Finally, Marketing That Measures Results" Subheadline: "Our platform tracks every touchpoint from first click to closed deal, so you know exactly what's working."
Headline: "Stop Chasing Leads. Start Closing Them." Subheadline: "Automated lead scoring that identifies your hottest prospects, so sales focuses on deals ready to close."
CTA Copy
Hero CTAs should be:
- Action-oriented ("Get Started," "See Demo," "Download Free")
- Specific to the offer
- Matched to visitor readiness
Strong CTA copy:
- "Start Free Trial"
- "See It In Action"
- "Get Your Custom Report"
- "Book a Demo"
Weak CTA copy:
- "Submit"
- "Learn More"
- "Click Here"
- "Continue"
Hero Image Best Practices
What to Show
Product screenshots or interface:
- Show the actual product in use
- Highlight key features visually
- Use realistic, not mockup, views
Outcome visualization:
- Show the result of using the product
- Dashboard with positive metrics
- Before/after comparison
Human element:
- Real people using the product
- Customer photos
- Team photos for service businesses
Abstract representation:
- Illustrations representing concepts
- Icons showing features
- Graphics supporting the message
Image Optimization
Technical requirements:
- Optimized for web (compressed, appropriate format)
- Responsive for different screen sizes
- Fast loading (< 200KB for hero images)
- High resolution for retina displays
Visual requirements:
- Doesn't compete with text
- Guides eye toward CTA
- Works on light and dark backgrounds if overlaid
- Looks professional and credible
Mobile Hero Section
Over 50% of landing page traffic is often mobile. Hero sections must work on small screens.
Mobile Adaptations
Layout changes:
- Stack elements vertically (headline, image, CTA)
- Image may move below or above copy
- Full-width CTA buttons
Content adjustments:
- Shorter headlines (fewer characters visible)
- Consider hiding or resizing hero image
- CTA must be thumb-reachable
Technical considerations:
- Test on actual devices
- Ensure tap targets are 44px minimum
- Image loads quickly on cellular
Mobile-First Design
For many landing pages, design mobile first:
- Design for smallest screen first
- Enhance for larger screens
- Don't just shrink desktop design
For comprehensive mobile guidance, see our mobile landing page guide.
Hero Section A/B Tests
High-Impact Tests
Headline tests:
- Different value propositions
- Benefit vs curiosity angles
- Specific vs general claims
Image tests:
- Product shot vs outcome visualization
- With humans vs without
- Photo vs illustration
- With video vs without
Layout tests:
- Left-right split vs centered
- Image size variations
- Copy length variations
CTA tests:
- Button copy variations
- Button color and size
- With vs without supporting text
Testing Considerations
The hero section receives 100% of visitor attention initially, making tests relatively fast to reach significance. Prioritize hero tests when starting optimization.
Common Hero Section Mistakes
1. Generic Headlines
Headlines that could apply to any competitor:
- "Welcome to Our Platform"
- "The Solution You've Been Looking For"
- "Powerful and Easy to Use"
These communicate nothing specific. Visitors can't tell why they should care.
2. No Clear Value Proposition
Visitors can't immediately understand what you're offering or why it matters. If understanding requires scrolling and reading, you've already lost many visitors.
3. Stock Photo Syndrome
Generic stock photos that don't connect to your specific offer. Visitors recognize stock photos - they signal "we didn't invest in this."
4. CTA Below the Fold
Hiding the call-to-action below the visible area. Visitors ready to convert must scroll to find how. Always include a CTA in the hero.
5. Competing Elements
Multiple messages, multiple CTAs, or busy designs that fragment attention. The hero should have clear hierarchy and focus.
6. Slow Loading Images
Large, unoptimized images that delay page rendering. Visitors may bounce before the hero fully loads.
7. Broken Mobile Experience
Hero sections designed for desktop that fall apart on mobile. Test on real devices, not just browser emulators.
Hero Section Audit Checklist
Content:
- Headline communicates clear value proposition
- Subheadline supports and expands headline
- Message matches traffic source
- Copy speaks to visitor needs/desires
Visual:
- Hero image supports the message
- Image is optimized for fast loading
- Visual hierarchy guides attention to CTA
- Design is professional and credible
Conversion:
- CTA is visible above the fold
- CTA copy is action-oriented and specific
- CTA is visually prominent
- Trust indicator is present
Technical:
- Page loads in under 3 seconds
- Hero displays correctly on mobile
- Tap targets are appropriately sized
- Image scales properly across devices
The Bottom Line
The hero section is your landing page's handshake - first impression, value proposition, and conversion opportunity in one compact space.
Get it right with: a specific, benefit-driven headline; supporting copy that expands the message; a visual that reinforces rather than distracts; and a clear, prominent CTA.
Get it wrong with: generic headlines, confusing layouts, slow-loading images, or hidden calls-to-action.
Most landing page optimization should start with the hero. It's where visitors decide to stay or leave, and where small improvements produce the largest impact on conversion rates.
Want expert analysis of your landing page hero sections? Book a free CRO audit and we'll review your highest-traffic pages and identify specific improvements to your above-the-fold content.
