Page Contents
Last updated: October 2026
For years, web designers were told to cram everything important into the first screen, because “nobody scrolls.” Today people scroll all the time on phones, tablets and laptops, which makes below the fold content more valuable than ever. The challenge is to design it so that visitors want to keep going, find what they need and take action.
This guide explains what below the fold means in web design, how to find where your fold is, why it matters, whether calls to action belong there and how to design the part of the page that visitors have to scroll to see. Where figures come from secondary coverage of studies, we say so.
What Does Below the Fold Mean in Web Design?
The phrase comes from newspapers. Broadsheets were folded in half for display, so the stories on the top half were visible to passers-by, and the rest were hidden. On the web, “above the fold” is the part of a page visible without scrolling, and “below the fold” is everything that requires scrolling. Our guide to the above the fold area covers the top section in detail, and this article focuses on what comes after.
How to Calculate Below the Fold
There is no single fold line on the web. It depends on the visitor’s screen size, browser window, zoom level and whether toolbars are visible. A phone may show only a few hundred pixels of height, while a large desktop monitor shows much more. You can estimate your own fold with data:
- Check screen sizes in your analytics. Look at the most common viewport sizes for your visitors, separately for desktop, tablet and mobile.
- Use a scroll map. A heatmap with scroll depth shows the point where the color fades, which is where most visitors stop. This is the real fold for your page.
- Test on real devices. Open key pages on a few phones and laptops and note what is visible without scrolling.
Design for a range of folds instead of one, and make sure the most important message works on the smallest common screen.
Why Is Below the Fold More Relevant Today?
1. Scrolling Is Second Nature
Social feeds and mobile apps have trained people to scroll constantly. Visitors expect to move down a page, especially when the first screen gives them a reason to continue.
2. There Are Too Many Screen Sizes to Predict the Fold
Because screens vary so much, content that sits above the fold on one device is below it on another. Responsive layouts reflow content, so the fold keeps moving. Designing only for a fixed fold leaves many visitors with a poor experience.
3. The Way People Buy Has Changed
Buyers research before they decide. They look for proof, details, reviews and answers to questions, and much of this information lives lower on the page. A page that stops after the first screen gives them nothing to compare.
What Do Studies Say About Scrolling?
Two well-known sets of numbers appear in many articles, and they measure different things:
- Nielsen Norman Group (NN/g) eyetracking research published in 2018 found that about 57% of page-viewing time was spent above the fold, and about 74% within the first two screenfuls. A 2010 study had found about 80% above the fold. So people scroll more than they used to, but attention still drops sharply as you move down.
- Chartbeat data discussed in 2014 suggested that on typical media pages, about two-thirds of engaged time happened below the fold, with engagement peaking just below the first screen. This figure comes from secondary coverage of that report and describes news and media pages, not every kind of site.
Taken together, the message is balanced: the first screen gets the most attention per pixel, but valuable content below it still gets read when visitors have a reason to continue. Always check the definition of a statistic before you quote it, and verify results on your own pages.
How Can Below the Fold Help You Increase Revenue?
Many conversions depend on content that does not fit above the fold:
- Proof and trust: reviews, case studies, guarantees and security badges. A Spiegel Research Center study found that products with five reviews were about 270% more likely to be purchased than those with none.
- Details and comparisons: specifications, pricing tiers and feature lists that help people decide.
- Objection handling: frequently asked questions about shipping, returns and setup.
- Next steps: related products, a second call to action and a short form for visitors who are ready after reading.
The key is to use the space for content that moves visitors toward the goal, instead of filler. See our landing page checklist for the elements to include.
Do Calls to Action Belong Below the Fold?
Yes, but usually in addition to, not instead of, an above-the-fold option. How you handle this depends on your offer:
- Simple, low-commitment offers, such as a newsletter or a free trial, often work well with a call to action at the top, because visitors already know what they want.
- Complex or high-priced offers usually need more explanation first, so the strongest call to action may come after the benefits and proof. Still, keep a visible button at the top for the visitors who are ready.
- Long pages benefit from repeating the call to action after each major section, or from a sticky button that follows the visitor.
Test placements, rather than assuming. See our guide to landing page testing.
Design Tips for a Better Below the Fold
1. Don’t Overload the First Scroll
Whatever appears just below the fold should be easy to scan: a clear heading, a short line of text and one visual. A wall of text right after a strong hero section discourages scrolling.
2. Avoid the “False Bottom”
A false bottom happens when the layout looks like the page ends, for example with a full-width banner or a large block of white space, so visitors stop scrolling even though more content follows. Break up sections with partial overlaps, visible edges of the next section or elements that clearly continue.
3. Give Visitors a Hint
Show part of the next section at the bottom of the first screen, use a small arrow or a “scroll” cue, or use a layout where cards are cut off at the edge. These small signals invite people to keep going.
4. Be Minimalist and Consistent
Use clear section breaks, generous spacing and a consistent structure for every block. Our guide to CRAP design principles (contrast, repetition, alignment and proximity) is a helpful reference.
5. Make Each Section Do One Job
Each block should answer one question, such as “What do I get?”, “Can I trust this?” or “What does it cost?”, and end with a clear next step.
6. Design for Mobile First
On phones, the first screen is tiny, so a single column, short sections, large tap targets and a sticky call to action matter even more. See mobile CRO.
Patterns That Work Below the Fold
Instead of copying a specific website, which may change its design at any time, use proven patterns:
- Progressive storytelling. Move from the problem to the solution, then to proof and the offer, so each scroll answers the next question.
- Feature blocks with visuals. Pair a short headline and a few lines of text with a screenshot or icon for each benefit.
- Social proof bands. Place logos, ratings or short testimonials between sections to rebuild trust.
- Comparison tables and FAQs. Use tables to help decision-making and accordions to answer common doubts without clutter.
- Repeated or sticky calls to action. Give visitors a chance to act whenever they are ready.
For more layout ideas, read our article on website layouts that are UX friendly.
How to Measure Below the Fold Performance
- Scroll maps show how far visitors go, and where interest drops.
- Session recordings let you watch how people scroll, pause and click, and spot confusing sections.
- Click maps reveal whether below-the-fold buttons and links are used.
- Analytics track scroll depth events, time on page and conversions by section. See website user engagement.
- A/B tests compare layouts, call-to-action positions and section order.
Study where visitors leave using funnel analysis, and connect layout work to results with our guide to CRO and UX.
Common Below the Fold Mistakes
- Hiding the main message below a large image or slider.
- Filler content that adds length but no value.
- Slow loading. Lazy-load images below the fold, but do not lazy-load the main image visible at the top, because that can slow the page’s loading metrics.
- Layout shifts caused by late-loading images or ads that push content around.
- No call to action after the page’s key sections.
- Ignoring mobile, where visitors scroll the most.
Frequently Asked Questions About Below the Fold
What does below the fold mean?
It means the part of a web page that is not visible without scrolling. The term comes from folded newspapers, where the lower half was hidden.
Where is the fold on a website?
It varies by device, window size and zoom. Use analytics for common screen sizes and a scroll map for your own pages to see where visitors actually stop.
Do people scroll below the fold?
Yes. NN/g’s 2018 eyetracking research found that about 43% of viewing time still happened below the fold, even though the top got the most attention per pixel.
Should I put my call to action above or below the fold?
Often both. Keep a visible button near the top for visitors who are ready, and repeat it after the benefits and proof for those who need more information.
How do I get visitors to scroll?
Give a reason with a strong first screen, show part of the next section, avoid false bottoms and make every section useful and easy to scan.
Conclusion
The fold is not a wall. Visitors scroll when the page promises value, so design the first screen to earn attention and the rest to keep it. Use scroll maps and recordings to learn where your visitors stop, give each section a clear job, repeat calls to action and test your changes. Done well, below the fold becomes the place where interest turns into action.
