Where to Place Calls to Action on a Website: 9 High-Converting Positions

Most advice about calls to action obsesses over wording. Change “Submit” to “Get My Free Quote” and watch conversions climb. That helps, but it ignores a simpler problem: a well-written button nobody sees converts nothing. Call to action placement decides whether your offer appears at the exact moment a visitor is ready to act, or three screens after they lost interest.

This guide is deliberately placement-first. No redesign required. You can open your existing pages, compare them against the nine positions below, and move or duplicate buttons this afternoon.

Why Placement Beats Copywriting for Quick Wins

Visitors do not read pages. They scan them in a predictable path, then stop scrolling once they have either found what they wanted or decided they have not. Three behavioural realities drive every recommendation in this article:

  • Scroll depth drops off fast. A large share of visitors never reach the bottom of a long page. If your only CTA lives in the footer, you are asking the minority to carry your whole conversion rate.
  • Readiness is not linear. Some visitors are ready in four seconds because a colleague already recommended you. Others need pricing, proof and a FAQ first. A single CTA position can only serve one of those groups.
  • Attention follows visual flow. Eyes travel along an F or Z pattern on desktop and straight down a single column on mobile. CTAs placed off that path get ignored even when they are large and brightly coloured.

The practical conclusion: place CTAs at every natural decision point, not just at the start and the end.

call to action button website

The 9 Highest-Converting CTA Positions

1. The Hero Button, Above the Fold

The first screen is the only placement guaranteed to be seen by close to 100% of visitors. It should carry your single most important action, written as an outcome rather than a mechanic.

Placement rules that matter more than colour:

  • Position the button directly under the headline and subheadline, left-aligned on text-heavy layouts, centred on centred layouts. Keep it inside the same visual block so the eye never has to hunt.
  • Keep it fully visible at a 1366×768 laptop resolution, not just on your 27-inch monitor.
  • If you need two actions, make the secondary one a ghost button or text link placed to the right of the primary. Two equally weighted buttons split attention and reduce clicks on both.

Common mistake: pushing the hero CTA below the fold with an oversized announcement bar, cookie banner and 120px of padding stacked on top of each other. A similar approach shows up on dentalmarketingrecipes.com.

2. The Sticky Navigation Button

A persistent button in the top right of a sticky header is the cheapest conversion insurance you can install. It follows the visitor for the entire session and costs no vertical space.

  • Use it for the same primary action as the hero, so the message stays consistent.
  • Give it a solid fill so it reads as a button, not a menu item. A plain “Contact” text link in the nav is not a CTA.
  • On desktop, top right is the conventional position. Do not get creative here; convention is what makes it findable.

3. Right After the First Proof Block (roughly 20 to 30% scroll depth)

This is the most commonly missing CTA on business websites. A visitor reads your headline, scrolls past the “what we do” section, sees a client logo strip or a short benefits row, and is briefly convinced. Then they scroll into a wall of service descriptions and the moment passes.

Insert a CTA immediately after the first piece of evidence: logo bar, key statistic, short testimonial, or the three-column benefits row. It captures fast-moving visitors who are already sold.

4. Inline Contextual Links Inside Body Copy

Not every CTA needs to be a button. Inside long paragraphs, a bolded contextual text link converts remarkably well because it appears exactly where the relevant idea is explained.

  • Use them on blog posts, service pages and documentation, where readers are in reading mode rather than scanning mode.
  • Anchor the link to the specific promise in the sentence, for example a link on “book a 20-minute audit call” rather than on “click here”.
  • Limit yourself to two or three per 1,000 words so they still feel like recommendations rather than ads.

5. Mid-Page, After Social Proof or a Case Study

Trust peaks right after a visitor finishes a detailed testimonial, a before-and-after result or a case study summary. That emotional peak decays within a screen or two.

Place a full-width CTA band directly beneath the proof section. On longer landing pages, repeat the offer every three to four screens using varied formats (band, card, inline link) so it does not feel like the same banner copy-pasted five times.

6. The Sticky Mobile Bottom Bar

Since mobile traffic dominates most service and local business sites, this is often the single highest-value placement on the entire site. A fixed bar at the bottom of the mobile viewport sits inside the natural thumb zone and stays available at every scroll depth.

  • Keep it to one action, or two at most (for example “Call Now” and “Get a Quote”).
  • Height should stay around 56 to 64px so it does not eat the content area.
  • Make sure it never covers form fields, the last line of content or the footer. Add matching bottom padding to the page body.
  • Test it against iOS Safari’s own bottom UI bar, which is where most implementations break.

7. The Sticky Sidebar Card (Desktop, Long Content)

On blog articles, resource pages and documentation, a sidebar card that sticks as the reader scrolls keeps the offer permanently in peripheral vision without interrupting the text. See figma.com for their take.

  • Works best with a soft offer: checklist, template, newsletter, calculator.
  • Keep the card short, roughly a heading, one line and one button.
  • Remember it disappears entirely on mobile, so never make it your only CTA.

8. The End-of-Content CTA Block

Readers who reach the bottom of a page are your most qualified audience. They deserve the most explicit ask on the page.

  • Make it visually distinct: contrasting background band, larger button, more whitespace.
  • Restate the benefit in one sentence above the button. Do not simply drop a naked button at the end of a paragraph.
  • On blog posts, match the CTA to the article topic. A generic “Contact us” at the end of a specific how-to guide wastes the intent you just built.

9. The Footer as the Last-Chance CTA

The footer is not glamorous, but it is where a certain type of visitor deliberately goes looking for contact details. Give them a repeated primary button plus the practical alternatives: phone number, email, booking link, address.

Treat it as a safety net for the deliberate visitor, not as your main conversion mechanism.

Bonus Positions Worth Testing

  • Under the pricing table: one button per plan, plus a single “Not sure which plan?” link underneath.
  • After the FAQ section: objections have just been handled, which is a natural moment to ask again.
  • Scroll-triggered or exit-intent overlay: effective, but use once per session, desktop only, and never on top of a page the visitor just started reading.
call to action button website

Which Positions Matter Most by Page Type

Page type Must-have placements Optional Avoid
Homepage Hero, sticky nav, after proof block, footer Mobile sticky bar Multiple competing primary offers
Service or product page Hero, mid-page after proof, end of content, mobile sticky bar After FAQ, under pricing Sidebar cards that distract from the offer
Blog article Inline links, end of content Sticky sidebar, mid-article card Hero CTA above the article title
Dedicated landing page Hero, repeated every 3 to 4 screens, end of page Mobile sticky bar Navigation links that leak traffic away
Local business page Hero, mobile sticky call bar, footer with map and hours Sticky nav button Contact form buried below the fold only

How to Audit Your CTA Placement in 30 Minutes

  1. Load each key page on a phone first. Screenshot the first viewport. If no action is visible, that is your first fix.
  2. Scroll slowly and count the screens between CTAs. More than four screens without an ask on a sales page is a gap.
  3. Mark every decision point. End of the benefits section, end of testimonials, end of pricing, end of FAQ. Each one should be followed by an ask within a screen.
  4. Check for competing actions. If a single screen contains a newsletter box, a chat bubble, a download link and a booking button, choose one and demote the rest.
  5. Verify scroll depth in your analytics. Find the depth where 50% of visitors drop off, then make sure at least two CTAs appear before that point.
  6. Test tap targets. Minimum 44×44 pixels, with at least 8px of spacing from other clickable elements.
  7. Change one placement at a time. Moving three CTAs in the same week makes the results unreadable.
call to action button website

Placement Mistakes That Quietly Cost Conversions

  • Only one CTA on a 4,000 pixel page. You are relying on the visitor to scroll back up.
  • CTAs stacked back to back. Two buttons in consecutive sections read as noise. Space them with real content.
  • Different offers in every position. Book a call, download a guide, subscribe, request pricing. Pick one primary path per page and keep secondary offers visually smaller.
  • Buttons that look like decoration. Flat, borderless, low-contrast rectangles are frequently skipped entirely. Contrast is a placement issue too: an invisible button is effectively not on the page.
  • Sticky elements that cover content. A mobile bar over the last line of a form is worse than no bar at all.
  • Popups that fire immediately. Delay to at least 40% scroll depth or 25 seconds, and never on mobile entry.
call to action button website

A Simple Rule to Remember

Ask once where attention is highest (the hero), keep the ask permanently available (sticky nav and mobile bar), and repeat the ask after every moment of persuasion (proof, pricing, FAQ, end of content). That single pattern covers the fast decider, the researcher and the returning visitor without cluttering the page.

Frequently Asked Questions

Where should a CTA be placed on a website?

At minimum: above the fold in the hero, once mid-page after a proof element, and at the end of the content. On mobile, add a sticky bottom bar. Persistent placements such as a sticky header button cover the visitors who decide at unpredictable moments.

How many CTAs should one page have?

One primary action repeated in several positions. A short homepage might carry three or four instances; a long landing page can comfortably hold six to eight. The number matters less than the consistency: multiple placements, single offer.

Does above the fold still matter?

Yes, but not exclusively. The first viewport is the only one everyone sees, so it should always contain an action. However, visitors who need more information convert lower down the page, which is why below-the-fold placements often produce more total conversions on considered purchases.

What makes a good CTA button beyond position?

Strong contrast against the background, a button shape that is visibly clickable, adequate whitespace around it, first-person or outcome-based wording, and a supporting line of microcopy that removes risk (“Free”, “No card required”, “Reply within one business day”). More at https://manypixels.co.

What are examples of calls to action?

“Book a free 20-minute audit”, “Get my quote”, “Start my free trial”, “Download the checklist”, “See pricing”, “Call now”. Match the commitment level to the position: soft offers work well in sidebars and inline links, high-commitment offers belong in the hero and at the end of the page.

Are sticky CTAs bad for SEO or page experience?

Not if they are sized responsibly. Problems arise when sticky elements cover a large portion of the mobile viewport or behave like intrusive interstitials. A slim bottom bar that leaves the main content readable is fine. A fuller account is out there.

Next Step

Pick your highest-traffic page, run the 30-minute audit above, and fix the single biggest gap you find. In most cases that is either a missing mobile sticky bar or the absence of any ask between the hero and the footer. Both are afternoon-sized changes with measurable results within a few weeks.

Leave a Reply

Your email address will not be published. Required fields are marked *