The hero section is what visitors see before scrolling, so it carries the most weight for first impressions and bounce rate. Its only job is to make the offer clear and prompt one action.
Clarity beats completeness here, resist the urge to cram everything in.
The hero formula
- Headline, a benefit-led statement of what you offer
- Subheadline, one or two lines that add specificity or handle the main objection
- Primary CTA, one prominent, action-oriented button
- Hero visual, an image, animation, or 3D scene that supports the message
- Trust signal (optional), a rating, logo strip, or short proof point
Common hero mistakes
- Burying the value proposition under a vague slogan
- Multiple competing CTAs that split attention
- An oversized visual that pushes the headline and button off mobile screens
Test on mobile first
Most traffic is mobile, where the visible area is smallest. If your headline, value proposition, and CTA all fit on a phone without scrolling, they'll fit everywhere else.
Frequently asked questions
Should everything important be in the hero?
Your core message and primary CTA belong in the hero, but people do scroll. Use the hero to earn attention, then make the full case below it.
How big should the hero visual be?
Large enough to support the message but never so large it pushes the headline and CTA off the screen, especially on mobile.