Hero section design is the single highest-leverage area on your website. Visitors decide within five seconds whether to keep reading or leave, and the hero is the only piece of your site that gets every single one of them. A great hero answers three questions instantly: what is this, who is it for, and what should I do next. Get those right and the rest of the page works harder.
The Anatomy of a Modern Hero Section
Every effective hero contains five elements arranged in a deliberate hierarchy. Skip any one of them and you leave conversion on the table. Pile them up without intent and you create noise.
1. The Headline
The headline is your single most-read sentence. It must communicate the outcome the visitor wants in their language, not yours. Strong headlines are concrete, specific, and short. “Send invoices in 60 seconds” beats “Streamline your billing operations.” One promises a clear result. The other promises a meeting.
The trap most teams fall into is writing headlines for the founder, the investor, or the internal team rather than the visitor. Your headline is not a brand statement. It is the answer to the question “what is this thing.”
2. The Subhead
The subhead does the work the headline cannot. If the headline names the outcome, the subhead names the audience and the mechanism. “For freelancers who hate accounting. Connect your bank, send invoices, get paid.” The subhead is where you earn the click below it.
Keep it under 25 words. Two sentences max. If you cannot summarize what you do in two sentences, you have a positioning problem, not a copy problem.
3. The Primary Call to Action
One primary CTA, not three. Pick the action that matters most to your business and make it visually unmistakable. “Start free trial,” “Get a demo,” “See pricing.” The CTA copy should describe what happens next, not what the visitor must do. “Start your free trial” is better than “Sign up.”
If you need a secondary action, make it visually subordinate. A ghost button or text link, not another solid button competing for attention.
4. The Visual
The visual proves the headline. If you say you save people time, show the time being saved. If you say you make beautiful invoices, show a beautiful invoice. Generic stock photography signals you do not have a real product or do not believe in it enough to show it. Real product screenshots, even ugly ones, beat polished mockups of nothing.
5. Social Proof
One small line of social proof inside the hero builds enough trust to extend the scroll. Customer logos, a star rating with review count, a number of users, or a single quote. Keep it small and quiet. The headline still owns the spotlight.
Eight Hero Patterns That Work in 2026
1. Split-Screen
Headline and CTA on the left, product visual on the right. The classic SaaS hero. Predictable, but predictable works. Linear, Notion, and most B2B tools use a variation of this pattern because it lets you place a screenshot at full fidelity next to the value proposition.
2. Full-Bleed Video
A muted, looping video fills the viewport with copy overlaid. Best for products where motion is the point: video tools, animation software, hardware. Bad for products where the visual fights the copy for attention.
3. Animated Hero
An interactive or scroll-triggered animation that demonstrates the product. The current Framer site is a textbook example. Done well, the animation IS the demo. Done badly, it is friction. Performance budget matters.
4. Custom Illustration
Brand illustrations replace product screenshots. Works when your product is hard to visualize (data, infrastructure, services) or when you are leading with brand personality before features. Notion’s older heroes used this approach beautifully.
5. Photography
Real photography of real customers, real products, or real teams. Mercury and Ramp lead with this because it signals seriousness in financial categories. The photo must look intentional, not stock.
6. Carousel
Multiple value propositions rotating through a single hero slot. Almost always a mistake. Carousels reduce engagement on every slide because the visitor has to wait or interact. Pick your single best message and commit to it.
7. Minimalist Text
A massive editorial headline and a single CTA. No image. The Pitch homepage and many newer Substack publications use this. Works when your brand voice is the primary asset. Hard to pull off without bold typography. See our complete guide to website typography for the type system needed to make this pattern work.
8. Interactive Demo
The hero IS the product. Click around without signing up. Clay, Cron, and a wave of new B2B tools have made this the new gold standard for category-defining sites. It removes the abstraction layer between marketing and product.
Conversion Principles That Always Apply
The pattern matters less than these underlying principles.
Match message to source. Visitors arriving from a paid ad, a podcast, or a Google search all carry different expectations. The strongest sites segment hero variants by traffic source and serve the version that matches what was promised.
Above the fold matters less than you think. Mobile traffic now exceeds desktop, and the entire concept of “above the fold” loses meaning when scroll behavior is universal. That said, what loads first still matters. See our deep dive on above the fold design for the full breakdown.
Speed is design. A hero that loads in 600ms feels qualitatively different from one that loads in 2.4 seconds. Every 100ms shaves measurable conversion. Optimize images. Avoid hero videos that block render. Use a CDN.
Read the hero out loud. If it sounds like a brand statement, rewrite it. If it sounds like an exhausted founder explaining their product to their mom, you are close.
Mobile Hero Design
Mobile heroes get less screen and more compromise. Three rules: stack vertically (never try to preserve a desktop split-screen on mobile), shrink the headline only as much as you must (mobile typography can still be large and bold), and prioritize the CTA in the visible viewport (a hero that requires scrolling to reach the button is broken).
Test heroes on a 375-pixel-wide viewport before you ship. Most teams design at 1440 and patch mobile after the fact. The result is a desktop hero with a mobile compromise. Reverse the order: design mobile first, then expand. Our mobile first design guide covers the workflow.
Common Hero Mistakes
The same five mistakes show up on most underperforming sites. Vague headlines that describe industry problems instead of customer outcomes. Two or three competing CTAs that dilute attention. Stock photography that looks like every other site in your category. Hero videos that play with sound or block page load. Carousels that visitors never wait through.
Avoid all five and you will outperform 70% of competitors before you optimize anything else. For the broader playbook, our landing page design best practices guide covers the rest of the page.
How to Test Your Hero
The fastest test is the five-second test. Show your hero to five people who do not know your product. Ask them: what does this company do, who is it for, and what would you click next. If three of five cannot answer all three within five seconds, the hero needs work.
For deeper testing, use heatmaps to see where visitors actually click and scroll, and run A/B tests on the headline and CTA copy. The visual rarely changes conversion as much as the words.
If you want a hero that converts and a site to match, our team builds exclusively in Framer. See our pricing or start a project.
Frequently Asked Questions
How long should a hero headline be?
Aim for under 10 words. The strongest headlines are 5 to 8 words and describe a concrete outcome the visitor wants. Long headlines lose readers before the message lands.
Should I use one CTA or two in the hero?
One primary CTA always wins. If you need a secondary action, make it visually subordinate (text link or ghost button). Two equally weighted buttons split attention and reduce conversion on both.
Do hero videos hurt page speed?
They can. A poorly compressed hero video that blocks render hurts both performance and conversion. If you use video, lazy load it, compress aggressively, and provide a static fallback for slow connections. Otherwise, lean on a static image or a lightweight animation.