Above the Fold Design: What to Show Before Visitors Scroll
Learn what to include above the fold on your website. Best practices for hero sections, CTAs, and first impressions that convert.
"Above the fold" refers to everything visible on your page before a visitor scrolls. It's the first thing they see, and it shapes every decision that follows: stay or leave, scroll or bounce, convert or exit.
The term comes from newspapers—stories "above the fold" of a folded paper were the ones that sold copies. The digital equivalent is just as consequential. Your above-the-fold section isn't just a design area. It's your opening argument for why someone should stay on your page at all.
Why Above-the-Fold Design Drives Conversion Rate
The "everyone scrolls now" argument misses the point. Yes, users scroll—but they scroll because something above the fold gave them a reason to. Nielsen Norman Group research shows that users spend the majority of their viewing time above the fold. The question isn't whether they scroll. It's whether your above-the-fold content earns that scroll.
For conversion rate optimization, the above-the-fold section has an outsized impact compared to anything below it. Visitors who don't see a clear value proposition and CTA immediately are more likely to bounce before they ever reach your social proof, features, or pricing. Fixing your hero section is almost always the highest-leverage starting point in any landing page optimization effort.
The 5 Essential Above-the-Fold Elements
Every high-converting hero section contains these five elements—all visible without scrolling:
1. Headline: Your Value Proposition in One Line
Your headline must answer three questions in under three seconds: What is this? Who is it for? Why does it matter? Most headlines answer only the first question.
The clearest test: show your page to someone unfamiliar with your product for five seconds, then cover the screen. Ask them: "What does this product do, and who is it for?" If they can't answer both parts, your headline needs work.
Compare these:
- Weak: "The Future of Project Management" — sounds impressive, says nothing specific
- Strong: "Ship projects 2× faster — the project tool built for remote design teams"
2. Subheadline: Expand Without Overwhelming
The subheadline elaborates on your headline's promise—one or two sentences that add context without repeating it. If your headline is benefit-focused ("Ship 2× faster"), the subheadline can explain the mechanism ("Automated handoffs, async standups, and shared feedback loops—built into your workflow").
3. Primary CTA: Visible Without Scrolling
Your main call-to-action must be visible above the fold on every device. This is non-negotiable. A CTA that requires scrolling to find will be missed by a significant portion of your visitors—particularly those with shorter attention spans or on smaller screens.
See our full guide on CTA button best practices for contrast, copy, and sizing guidelines that maximize click-through rate once the button is in the right position.
4. Hero Visual: Support the Message, Don't Compete With It
The visual should answer a question your copy raises, not decorate the page. Product screenshots showing the actual interface convert better than lifestyle photography for most SaaS products. Abstract illustrations convert better than stock photos. Whatever you use, the visual should make the headline more believable—not distract from it.
5. Trust Signal: Social Proof Before the Decision
At least one trust element should appear above the fold: customer count, star rating, media logos, or a short testimonial. Trust signals reduce the anxiety of acting on an unfamiliar product. See our guide on social proof placement for what works where.
Above-the-Fold Layout Patterns
Centered Hero
Works best for products with a single, focused message and no complex visual to explain. Common for SaaS tools, apps, and products where the CTA is the page's entire purpose. The centered layout directs all attention to the headline and button with nothing competing on either side.
Split Hero (Text Left, Visual Right)
Works best for products that need a visual to be understood—dashboards, interfaces, physical products. The left-to-right reading flow means visitors encounter your value proposition before the visual, which is the correct order: message first, proof second.
What to Avoid
- Full-bleed image with text overlay — Contrast problems, CTA often invisible, especially on mobile
- Auto-play video hero — Increases load time, annoys users, rarely improves conversion rate
- Carousel/slider — Research consistently shows most users never see past slide 1. A single strong message outperforms a rotating one
- Navigation that dominates — A thick navigation bar eating 20% of above-fold space is a common mistake, particularly on desktop
Common Above-the-Fold Mistakes
Mobile: A Different Fold
On mobile, the fold sits much higher—often cutting off content that appeared above the fold on desktop. This makes above-the-fold design a mobile-first problem as much as a desktop one.
Key mobile considerations:
- Headline length: What fits in one line on desktop wraps to three on mobile. Write headlines that work at 320px wide.
- CTA position: Your primary CTA should appear before the hero image on mobile, not after it. Many desktop layouts place the visual first—fine on desktop, fatal on mobile.
- CTA size: Minimum 44px height, full-width or near-full-width. Don't make visitors hunt for a small button with a thumb.
- Navigation: Collapse to a hamburger menu on mobile. A full navigation bar on small screens consumes above-fold space your headline needs.
- Load time: The above-the-fold experience includes how fast it appears. A hero image that delays paint by 2–3 seconds costs you visitors before they've seen anything.
How to Diagnose Your Above-the-Fold Section
Two tests you can run before touching traffic or running A/B tests:
The Blur Test
Screenshot your page and apply a 10–15px Gaussian blur. Three questions:
- Can you identify the headline area?
- Is the CTA visible and distinct?
- Does anything decorative dominate over the message?
If your CTA disappears when blurred, you have a contrast or hierarchy problem—not a copy problem. Run a visual hierarchy analysis to get a scored breakdown of what your visitors notice first and what they miss entirely.
This is one of the most common findings in BlurTest analyses. In our first week, over 300 landing pages were analyzed. A recurring pattern: pages scoring in the 40s on CTA visibility had the button positioned below the fold or using low contrast. After owners moved or restyled the CTA based on the analysis, the same pages rescored in the 80s—without changing any copy or running a single test.
The 5-Second Test
Show your page to someone unfamiliar with your product for exactly 5 seconds, then ask:
- What does this product do?
- Who is it for?
- What would you click if you wanted to try it?
If they can't answer all three, your above-the-fold section isn't doing its job. This test costs nothing and is more reliable than any gut feeling about your own design.
Above-the-Fold Checklist
| Element | Check |
|---|---|
| Headline | Answers what, who, and why in one line ✓ |
| CTA | Visible without scrolling on mobile and desktop ✓ |
| CTA contrast | Stands out on blurred screenshot ✓ |
| Trust signal | At least one visible above fold ✓ |
| Visual | Supports the headline, doesn't compete with CTA ✓ |
| Mobile headline | Readable at 320px width without wrapping awkwardly ✓ |
| No carousel | Single static hero instead of rotating slides ✓ |
| Load time | Hero section paints within 2 seconds ✓ |
If your above-the-fold section passes this checklist, the next step is testing variants. Once the fundamentals are in place—clear message, visible CTA, trust signal—A/B testing headline copy and CTA text becomes much more reliable, because you're testing genuine improvements rather than working around structural problems.