A hero section is the first screen visitors see on a landing page or homepage, designed to communicate what you do, who it’s for, and what action to take next. The three must-haves are a clear headline that names the outcome, a primary call-to-action above the fold, and a supporting visual that proves the promise. Skip any one of those and conversion drops.
What Is a Hero Section?
The hero section is the prime real estate of any website. It sits at the top of the page, occupies the first viewport on desktop and mobile, and acts as the elevator pitch for everything below. Visitors spend less than three seconds deciding whether to scroll, click, or leave, and that decision happens in the hero.
A hero is more than a banner. Its role is to compress the entire value proposition into a single screen, answering four silent questions: what is this, who is it for, why should I care, and what do I do next. The standard anatomy includes a headline, a subheadline, a primary call-to-action, an optional secondary CTA, and a visual element (photo, illustration, video, product shot, or 3D render).
The 3 Jobs of a Hero
Every effective hero does three things in sequence, because attention is a depleting resource.
Clarify. Tell the visitor what the product is in plain language. “Workflow automation for design teams” clarifies in five words. “Reimagine what’s possible” clarifies nothing.
Qualify. Help the right visitor recognize themselves and the wrong visitor leave. Naming the audience (“for B2B marketing teams”) or use case (“ship campaigns 3x faster”) filters traffic so the people who stay are the people who convert.
Motivate. Give the visitor a reason and a way to act now. A specific CTA (“Start a 14-day trial”) with a frictionless next step beats vague invitations (“Learn more”) that defer the decision.
Headline Patterns That Work
Most high-converting hero headlines follow one of four patterns. Pick based on what the audience knows and what objection is loudest in their mind.
Outcome pattern. Name the result. Example: “Get more leads from your website in 30 days.” Works when the audience knows the problem and is comparing solutions on results.
Mechanism pattern. Name the unique method. Example: “AI-powered scheduling that learns your calendar habits.” Works when the category is crowded and you need to differentiate on how, not just what.
Named tribe pattern. Name the audience. Example: “The CRM built for solo consultants.” Works when the audience feels underserved by generic tools and a specific identity signal is the strongest hook.
Contrast pattern. Position against a familiar alternative. Example: “All the power of a design agency, none of the timeline.” Works when the prospect already knows the alternative and the friction it creates.
Avoid headlines that lean on cleverness, abstraction, or insider jargon. A clever headline that requires a second read costs you the third-second decision.
Subheadline Structure
The subheadline is the second-most-read line on the page. It clarifies the headline if it leans poetic, reinforces the promise with specificity, and sets up the offer so the CTA feels like the logical next step.
A strong subheadline runs 12 to 25 words. If the headline says “Stop chasing invoices,” the subheadline might read “Automated reminders, late-fee logic, and one-click recovery built for freelancers and agencies under 20 people.” The headline names the pain. The subheadline names the fix and the audience.
Primary CTA: Wording, Style, Placement
The primary CTA is the single most important element on the page in terms of revenue impact. Get this right and modest improvements elsewhere compound. Get it wrong and the rest of the hero is decoration.
Wording. Use a verb that names the action and the value. “Get my free audit” beats “Submit.” “Start free trial” beats “Sign up.” First-person framing (“Start my trial”) often outperforms imperative framing (“Start your trial”) by 5 to 15 percent because it lets the visitor mentally rehearse the action.
Style. The CTA button should be the most visually dominant interactive element in the hero. High color contrast, generous padding (16 to 24 pixels vertical, 24 to 40 pixels horizontal), legible type at 16 pixels or larger, and a solid fill. Avoid ghost buttons for the primary action. They look elegant in mockups and underperform in production. See our guide to CTA button design for the full breakdown.
Placement. The CTA sits below the subheadline, left-aligned with the headline on most layouts. It must be visible without scrolling on common viewports (1366×768 desktop, 390×844 mobile). If the CTA falls below the fold, the hero is too tall.
Secondary CTA: When to Add One
A secondary CTA is useful when you have two distinct audience segments at different stages of intent. The classic pairing is “Start free trial” (high intent) and “Watch demo” (medium intent, still evaluating). The secondary CTA gives the medium-intent visitor a way to engage without forcing a premature commitment.
Style the secondary CTA as visually subordinate to the primary: a text link, a ghost button, or a lower-contrast fill. Skip it entirely if both options compete for the same intent level. Two equally weighted CTAs is the same as no CTA. Decision paralysis kills conversion.
Hero Visuals: Photo, Illustration, Video, 3D, Product Shot
The hero visual carries half the emotional weight of the section. The right format depends on what you are selling and what proof the audience needs.
Product shot. Best for SaaS and hardware. Show the product in use with realistic data and a state that hints at the outcome. A dashboard with a green-trending chart sells the result, not just the feature.
Photo. Best for services and human-centered offerings. Authentic, on-brand photography (not generic stock) builds trust. The subject should look at the camera or at the headline to direct attention.
Illustration. Best for abstract concepts and brands that want a distinctive identity. Custom illustration signals craft. Generic vector packs signal the team did not invest.
Video. Best for products that need motion to be understood. Auto-play looping video works only when it loads in under one second and respects reduced-motion preferences. A heavy video that delays Largest Contentful Paint costs more conversion than it earns.
3D and interactive. Best for high-end brands and design tools. Scenes built with tools like Spline can differentiate strongly but require strict performance budgets.
Above-the-Fold Layout Rules
Above the fold means the area visible in the first viewport without scrolling. On a 1366×768 desktop with about 100 pixels of browser chrome, that leaves roughly 668 vertical pixels. Mobile shows even less.
Five rules apply to almost every hero. First, the headline, subheadline, and primary CTA must all be visible in the first viewport on both desktop and mobile. Second, use a grid with clear alignment (typically a two-column split or a centered single column). Third, leave generous whitespace around the CTA so it visually pops. Fourth, make the hierarchy unambiguous: headline biggest, subheadline medium, CTA bold, supporting elements quiet. See our visual hierarchy guide for the underlying logic. Fifth, keep the navigation lightweight (4 to 6 links plus one CTA).
Mobile Hero Design
More than 60 percent of web traffic comes from mobile, and for many B2C categories closer to 80 percent. Mobile hero design is not a scaled-down version of desktop. It is its own discipline.
Stack vertically. Two-column layouts that work beautifully on desktop become cramped on a 390-pixel screen. The order on mobile is headline, subheadline, primary CTA, then visual below. Putting the visual first pushes the headline below the fold and loses the scroll.
Apple and Google both recommend a minimum 44×44 pixel tap target. Mobile CTAs should be 48 pixels tall or more with near-full-width layout. A 64-pixel desktop headline should drop to 32 to 40 pixels on mobile with 25 to 35 characters per line. Test load performance ruthlessly: a hero that takes four seconds on a mid-tier Android over 4G converts 30 to 50 percent less than one that renders in under one second.
Common Hero Mistakes
Most underperforming heroes fail in predictable ways.
Vague headline. “Transform your business” or “The future of work” tell the visitor nothing. Replace with a concrete outcome, mechanism, or audience signal.
Hidden CTA. Low-contrast ghost buttons, generic labels like “Learn more,” or multiple competing CTAs reduce the click rate. Make the primary CTA visually dominant and verbally specific.
Slow video or heavy hero image. A hero asset that delays Largest Contentful Paint past 2.5 seconds hurts both conversion and Core Web Vitals. Compress, use modern formats (WebP, AVIF), and serve mobile-optimized variants.
Poor color contrast. Text over a busy image or weak overlay fails WCAG AA. Use a solid background, strong overlay, or dedicated text panel for 4.5:1 contrast on body text and 3:1 on large headlines.
Carousel heroes. Rotating slides almost always underperform a single focused hero. Visitors tune out moving content, click-through on slides 2 and beyond is often under 1 percent. Pick one message and commit.
10 Hero Examples to Study
Studying production heroes from category leaders teaches more than any framework. These ten consistently demonstrate strong hero discipline:
- Stripe. Outcome headline, gradient visual, single primary CTA, subtle secondary action.
- Linear. Mechanism headline on speed, animated product visual, single CTA.
- Notion. Tribe-naming headline, proof logos below, dual CTA (sign up, request demo).
- Figma. Outcome headline on collaboration, autoplay product video, single CTA.
- Webflow. Mechanism headline (visual development), product animation, strong CTA hierarchy.
- HubSpot. Tribe plus outcome (“Grow better with HubSpot”), platform visual, free CTA.
- Shopify. Audience-named outcome (“Start your business”), real merchant photography.
- Vercel. Mechanism headline, abstract gradient visual, sign-up CTA.
- Calendly. Outcome headline (easy scheduling), product UI screenshot, single CTA.
- Apple product pages. Single product shot, large product name, single CTA, near-zero clutter.
The common thread: every one of these commits to one message, one visual treatment, and one primary action.
Hero Testing Framework
The hero is the single highest-leverage A/B test target on any site. A 15 percent lift compounds across every downstream conversion event. Test in this order to capture the largest gains first.
Headline first. Swap between the four patterns (outcome, mechanism, named tribe, contrast). Headline changes typically produce the largest effects (10 to 40 percent lifts when the current headline is weak).
CTA wording next. First-person versus imperative, specific outcome versus generic action, with or without a friction-reducing modifier (“free,” “no credit card,” “in 60 seconds”). Expect 5 to 20 percent lifts.
Visual third. Product shot versus illustration, photo versus video, with or without a person in frame. Visual tests are slower to read because the effect often shows up in downstream engagement.
Layout last. Centered versus split, with or without secondary CTA, with or without social proof. Layout tests usually produce smaller effects (2 to 8 percent) but compound once headline and CTA are dialed.
Run each test to statistical significance. For the full framework, see our A/B testing guide.
Need a hero that earns its real estate? The team at Framer Websites designs and ships hero sections that convert, built on the patterns above and tuned to your audience.
FAQ
How long should a hero section be?
The hero should fit within the first viewport on both desktop and mobile, roughly 600 to 700 vertical pixels on a 1366×768 desktop including the navigation. If the headline, subheadline, and primary CTA all fit without scrolling, the height is correct. If they push below the fold, reduce padding, shrink the visual, or shorten the copy.
Should I use a video in my hero section?
Use video only if it loads in under one second on a mid-tier mobile device, respects reduced-motion preferences, and adds clarity a static visual cannot. For most SaaS and service businesses, a high-quality static visual outperforms video because the load cost outweighs the engagement gain.
How many CTAs should a hero have?
One primary CTA is always required. A secondary CTA is optional and only useful when you have two audience segments at different intent levels (ready-to-buy versus still-evaluating). Style any secondary CTA as visually subordinate to the primary so the hierarchy is unambiguous.
What is the ideal hero headline length?
Five to twelve words for most heroes. Long enough to communicate a specific outcome, mechanism, or audience signal. Short enough to read in two seconds. Longer headlines should be split into a tight headline plus a supporting subheadline.
Should the hero have social proof?
A single strip of customer logos, a rating, or a one-line testimonial below the CTA can lift conversion by 5 to 15 percent, particularly for SaaS and high-consideration purchases. Avoid social proof that competes with the headline or pushes the CTA below the fold.