The CTA is the most important pixel on your page. Yet most teams place it by convention — "put it above the fold" — without asking whether that's where attention actually goes.
The result is predictable: a beautifully designed button that nobody clicks. Not because the offer is wrong, but because the button is in the wrong place at the wrong time in the user's decision process.
The above-the-fold myth
Yes, above-fold content gets more views. But more views does not equal more clicks. A CTA shown before the user understands your value proposition gets ignored — not because they can't see it, but because they have no reason to act on it yet.
The data is clear: CTAs placed immediately after a clear value proposition convert 2–3x more than those placed cold at the top of a page. The user needs context before commitment. Showing a "Start free trial" button before explaining what the product does is like asking someone to marry you on the first date.
The right question isn't "where on the page?" — it's "where in the persuasion sequence?" A CTA belongs at the moment the user has enough information to say yes. That moment is different for every product, every audience, and every page type.
"A CTA that arrives before the user is ready doesn't get ignored — it gets actively filtered out. The brain classifies it as noise, and no amount of contrast or animation can undo that classification."
— Baymard Institute, Checkout UX Research
The four CTA positions that work
There is no single "best" position for a CTA. But there are four positions that consistently outperform random placement — each suited to a different product and audience type.
After the hook
Immediately following your headline and subheadline. Works for simple, well-known products where the user already knows what they want. If your value prop fits in one sentence, put the CTA right below it. Think Google's homepage: one search bar, zero scrolling required.
After proof
Below testimonials, case studies, or a live demo. Works for considered purchases where the user needs evidence before committing. B2B SaaS, consulting services, and premium products all benefit from letting social proof do the convincing before asking for action.
After comparison
Following a pricing table or feature comparison. Works for tools and SaaS products where the user is evaluating alternatives. At this point they're not asking 'should I?' — they're asking 'which plan?' Place the CTA where that question gets answered.
Sticky / floating
Always visible, reduces friction on long pages. Works for mobile-first designs and e-commerce. But use with caution — a persistent CTA can feel aggressive if overused. Reserve it for pages where the user might be ready to act at any point in the scroll.
What heatmaps reveal about CTA attention
When we run heatmaps on landing pages, a pattern appears immediately: the CTA is often the least noticed element on the page. Not because it's below the fold, but because surrounding elements are louder.
This is the "banner blindness" effect applied to CTAs. Users have learned to ignore anything that looks like an ad or a generic button. A rounded rectangle with "Get Started" in it triggers the same mental filter as a display ad. The brain skips it unconsciously.
Contrast is king. A CTA must be the highest-contrast element in its section — not just in color, but in visual weight. If a hero image, a testimonial photo, or a decorative animation is pulling more attention than your button, the button loses.
And here's the counterintuitive finding: size matters less than isolation. A small button surrounded by generous whitespace draws more attention than a large button crammed between other elements. Whitespace around a CTA increases fixation rates by roughly 2x.
2–3×
Conversion lift from proper CTA timing
47%
Of users never scroll past first CTA
2×
Attention increase from CTA isolation
The CTA checklist
Before you ship any page, run through these five checks. Each one addresses a different failure mode we see in heatmap data.
Contrast: Does it visually pop against its background? The CTA should be the single highest-contrast element in its viewport. If you squint at the page and the button disappears, it's not contrasty enough.
Isolation: Is there whitespace around it, or is it buried in content? A button sandwiched between a paragraph and an image gets lost. Give it room to breathe — at least 24px of clear space on every side.
Timing: Has the user received enough information to act? Map your page content to the buyer's journey. The CTA should appear at the moment the user's key question has been answered.
Clarity: Does the button text say what happens next? "Get started" beats "Submit." "See pricing" beats "Learn more." The user should know exactly what clicking will do before they click.
Repetition: On long pages, repeat the CTA. Users shouldn't have to scroll back up to convert. Place a CTA at each major decision point — after proof, after comparison, and at the close.
Test before you launch
The biggest mistake teams make is treating CTA placement as a design decision instead of a testable hypothesis. You don't need to wait for live traffic to validate your placement — run a heatmap on your design before it goes live.
If your CTA sits in a blue (low attention) zone, you have two options: move it to where attention already clusters, or increase its visual contrast until it dominates its section. Both work. Ignoring the data doesn't.
If attention clusters on an element that isn't your CTA, ask yourself: should the CTA be there instead? Sometimes the answer is to put the button directly below the element that's already winning attention — ride the momentum instead of fighting it.
This connects directly to the scroll journey. In that framework, the CTA belongs in "the close" — the final act where the user is ready to decide. But the close isn't always at the bottom of the page. It's wherever the persuasion sequence reaches its conclusion.
Placement is a hypothesis. Attention data is the test.
Stop guessing where your CTA should go. Convention says above the fold. Best practices say after social proof. Your designer says it looks better centered. None of them are looking at where eyes actually land on your specific page.
A heatmap takes the debate out of CTA placement. Upload your design, see where attention goes, and put your most important button exactly where it will be seen.
Test your CTA placement
Upload your design and see where attention goes. Free, no signup required.
Generate heatmap