Hero Section Landing Page Best Practices: What to Put Above the Fold

Your hero section landing page real estate is the most valuable pixels you own. Get it right and visitors scroll. Get it wrong and they bounce before your product ever gets a chance.

Quick answer: A high-converting hero section needs five things: a specific headline that names the outcome, a subheadline that clarifies who it's for, one primary CTA with action-oriented copy, a supporting visual that shows the product in use, and one trust signal like a customer logo row or a review rating. Skip the stock illustrations and vague taglines.

What counts as the hero section?

The hero is everything a visitor sees before they scroll. On a 1440x900 desktop viewport, that's roughly the top 600 pixels after your nav. On mobile, it's tighter, often just 400 pixels of content.

Nielsen Norman Group's eye-tracking research found that users spend 57% of their time above the fold, and attention drops sharply after the second screen. That first viewport is where you win or lose the click.

What should the headline actually say?

The headline is the single highest-leverage element on the page. It should answer one question in one glance: what do I get if I use this?

Three headline formulas that consistently work:

1. Outcome + timeframe. "Ship your SaaS landing page in an afternoon."
2. Pain removal. "Stop losing signups to a slow-loading homepage."
3. Specific mechanism. "Turn Stripe webhooks into Slack alerts in 3 clicks."

What doesn't work: generic value props like "The modern way to grow your business" or "Empowering teams to do their best work." These say nothing. Your competitor could paste them onto their site and nobody would notice.

Test your headline with the swap test. Replace your product name with a competitor's. If the sentence still makes sense, your headline is too generic.

For more headline patterns tied to buttons and clicks, see our breakdown of call-to-action examples that fix drop-off.

How long should the subheadline be?

One or two sentences. Max 20 words.

The subheadline exists to answer the follow-up questions the headline raises: who is this for, and how does it work?

If your headline is "Ship your SaaS landing page in an afternoon," a good subheadline is: "Drag-and-drop builder with SEO defaults built in. No designer, no code, no monthly minimum."

Bad subheadlines repeat the headline in different words. If yours starts with "We help..." or "The platform that...", rewrite it.

What CTA copy converts best?

One primary CTA. Not three. Not "Sign up or learn more or watch demo." One.

The CTA button should describe what happens after the click, not what the visitor has to do. Compare:

• "Submit" (bad)
• "Sign up" (weak)
• "Get my free page" (good)
• "Start building in 60 seconds" (better)

First-person copy ("Get my free page") often outperforms second-person ("Get your free page"). It's small, but it shows up in tests.

Place the CTA where the eye naturally lands: below the subheadline, left-aligned on desktop, centered on mobile. Use a color that appears nowhere else in the hero. If your brand is blue, make the button orange or green. Contrast beats brand consistency every time.

Once your hero is live, test the CTA properly without wasting traffic.

What visual should you use?

Show the product. Not a person smiling at a laptop. Not an abstract 3D shape. The product.

The best hero visuals fall into three buckets:

• Product screenshot with annotations. Highlights the specific feature that delivers the headline's promise.
• Short looping video. 5-10 seconds, no audio, shows the core workflow.
• Interactive demo embed. Loom, Arcade, or Storylane embeds let visitors touch the product before signing up.

Stock photos of teams high-fiving are the fastest way to signal "generic SaaS." Illustrations of rockets and gears say the same thing. If a visitor can't tell what your product does from the hero image alone, replace it.

Mobile-specific note: heavy hero videos tank Largest Contentful Paint scores. Google's page experience data shows LCP under 2.5 seconds correlates with higher engagement. If your hero video pushes LCP past that threshold, use a static screenshot on mobile and load the video only on desktop.

Do you need social proof above the fold?

Yes, but keep it small.

One trust signal, not five. Options that work:

• A row of 4-6 customer logos (only real customers, no "as featured in TechCrunch" from a passing mention)
• A star rating with review count ("4.8 on G2, 340 reviews")
• A specific customer count ("Trusted by 2,400 SaaS founders")
• A single strong quote with a name, photo, and company

Skip: badges like "SSL secured" (basic hygiene, not a differentiator), press logos from a single blog mention, or vague numbers like "millions served."

Common hero section mistakes

Here's what we see kill hero conversion rates, ranked by frequency:

Mistake	Why it hurts	Fix
Vague headline	Visitor can't tell what you do in 3 seconds	Name the specific outcome
Multiple CTAs	Split attention, weaker click rate on the main goal	One primary, one ghost/text link max
Carousel or slider	Studies from Nielsen Norman show slider engagement is near-zero on slides 2+	Static hero
Nav bar clutter	8+ nav items dilute focus from the CTA	4-5 items max, hide the rest in a menu
Autoplay video with audio	Instant bounce trigger	Muted loop or click-to-play
Full-width stock photo	Signals generic SaaS	Product screenshot or short demo

For a deeper audit of what's breaking your first impression, read our guide on above-the-fold problems killing first impressions.

How do you test hero section changes?

Change one element at a time. Headline, then CTA copy, then visual. Never all at once, or you won't know what moved the needle.

Minimum sample size before calling a winner: aim for 200 conversions per variant, not just 200 visitors. Smaller SaaS sites often need to run tests for 2-4 weeks to hit statistical significance. If your traffic is under 500 visits a week, run sequential tests (change, measure, keep or revert) instead of split tests.

Heatmaps and session recordings are your best friend for hero optimization. If visitors are clicking your headline expecting a link, or ignoring your CTA entirely, you'll see it in the data. See our comparison of heatmap tools for landing page UX analysis to pick one that fits your budget.

Frequently asked questions

How tall should a hero section be?

Aim for 100vh or slightly less on desktop, so the entire hero fits in one viewport without scrolling. On mobile, keep it under 700px total height so users can see a hint of content below the fold, which encourages scrolling.

Should the hero section include a form?

Only if the form is your primary conversion goal (like a waitlist or free trial with no other steps). For most SaaS pages, a single CTA button that opens a modal or scrolls to a form section converts better than an inline form that clutters the hero.

What's the ideal headline length for a hero section?

Six to twelve words. Under six often feels vague, over twelve gets skimmed. The exact number matters less than clarity. If a 15-word headline is specific and your 8-word version isn't, ship the longer one.

Do animated hero sections convert better?

Rarely. Subtle animations (like a cursor demoing a click) can help, but heavy parallax scrolls, floating elements, and animated backgrounds usually distract from the CTA and hurt page speed. Test before committing.

Should I put pricing in the hero section?

Not the full pricing table, but a price anchor can work for high-intent traffic. "Starts at $19/mo" or "Free forever plan" in the subheadline sets expectations and filters out mismatched visitors before they scroll.

How often should I refresh my hero section?

Audit it quarterly. Refresh when your positioning changes, when a competitor copies your headline, or when heatmap data shows visitors are bouncing at the fold. Small changes (CTA copy, trust signal) can happen monthly. Full redesigns should be earned by evidence, not habit.

Can I use the same hero across all landing pages?

No. Your homepage hero speaks to a broad audience, but campaign-specific landing pages should have heroes tailored to the traffic source. A Google Ads landing page for "convertkit alternative" should have a headline that names ConvertKit, not a generic pitch.

---

Ready to see exactly where visitors stop scrolling on your hero section? PagePulse gives you scroll depth heatmaps, session recordings, and A/B testing built for landing pages, without the enterprise pricing. Start your free audit and find out what your hero is really doing.