Cta placement guide skill
The figures below are vendor-reported directional benchmarks.
by AgriciDaniel·MIT license·★ 2,219 Stars on the repo·GitHub ↗
Use now
Files of Cta placement guide
AgriciDaniel/
cta-placement.md
Show the full text53 lines
CTA Placement Guide
Core Testing Hypotheses
The figures below are vendor-reported directional benchmarks. Use them as A/B test hypotheses, not universal rules, unless the source URL, date, methodology, and audience fit are loaded for the project.
- Personalized/contextual CTAs often outperform generic CTAs
- A focused primary CTA often outperforms competing conversion goals
- Inline CTAs often outperform disconnected sidebar CTAs
- CTA alignment and first-person copy should be tested against the page design
Placement Rules by Content Type
| Content Type | CTA Position | Rationale |
|---|---|---|
| How-to guide | After first completed step sequence | Value already demonstrated |
| Listicle | After item #3-4 (mid-list) | Reader engaged but not finished |
| Comparison | After recommendation section | Decision point reached |
| Case study | After results section | Proof delivered |
| Pillar page | 2-3 natural section breaks | Avoid CTA fatigue on long pages |
| Tutorial | After first working example | Success moment |
| Product review | After verdict/rating | Purchase intent peaks |
| Thought leadership | At natural conclusion | Reflection complete |
| Data research | After key finding visualization | Impact moment |
| FAQ | After the 3rd answer | Pattern established |
CTA Design Principles
- Place CTAs AFTER value delivery, not at arbitrary positions
- Above-fold CTAs only work when preceding content conveys value proposition
- Moving CTA below long-form value content can increase conversions 304%
- Maximum 2-3 CTAs per long-form post (intro contextual, mid-content, end summary)
Accessible HTML
- Use
<a>for navigation CTAs,<button>for action CTAs - Never use
<div>as a clickable CTA - Minimum 44x44px touch targets
- CTA text: 4.5:1 contrast ratio minimum
- Focus indicators, borders, and icons: 3:1 contrast ratio minimum
- Visible focus indicators
- Descriptive link text (not "click here")
aria-labelledbypointing to CTA heading when context is needed
CTA Copy Formula
- Lead with first-person: "Start My..." not "Start Your..."
- Include benefit: "Get My Free Guide" not just "Download"
- Create urgency without being pushy: "Join 10,000+ readers" not "Act now!!!"
- Match surrounding content topic (contextual, not generic)
| 1 | # CTA Placement Guide |
| 2 | |
| 3 | ## Core Testing Hypotheses |
| 4 | |
| 5 | The figures below are vendor-reported directional benchmarks. Use them as A/B |
| 6 | test hypotheses, not universal rules, unless the source URL, date, methodology, |
| 7 | and audience fit are loaded for the project. |
| 8 | |
| 9 | Personalized/contextual CTAs often outperform generic CTAs |
| 10 | A focused primary CTA often outperforms competing conversion goals |
| 11 | Inline CTAs often outperform disconnected sidebar CTAs |
| 12 | CTA alignment and first-person copy should be tested against the page design |
| 13 | |
| 14 | ## Placement Rules by Content Type |
| 15 | |
| 16 | | Content Type | CTA Position | Rationale | |
| 17 | |-------------|-------------|-----------| |
| 18 | | How-to guide | After first completed step sequence | Value already demonstrated | |
| 19 | | Listicle | After item #3-4 (mid-list) | Reader engaged but not finished | |
| 20 | | Comparison | After recommendation section | Decision point reached | |
| 21 | | Case study | After results section | Proof delivered | |
| 22 | | Pillar page | 2-3 natural section breaks | Avoid CTA fatigue on long pages | |
| 23 | | Tutorial | After first working example | Success moment | |
| 24 | | Product review | After verdict/rating | Purchase intent peaks | |
| 25 | | Thought leadership | At natural conclusion | Reflection complete | |
| 26 | | Data research | After key finding visualization | Impact moment | |
| 27 | | FAQ | After the 3rd answer | Pattern established | |
| 28 | |
| 29 | ## CTA Design Principles |
| 30 | |
| 31 | Place CTAs AFTER value delivery, not at arbitrary positions |
| 32 | Above-fold CTAs only work when preceding content conveys value proposition |
| 33 | Moving CTA below long-form value content can increase conversions 304% |
| 34 | Maximum 2-3 CTAs per long-form post (intro contextual, mid-content, end summary) |
| 35 | |
| 36 | ## Accessible HTML |
| 37 | |
| 38 | Use `<a>` for navigation CTAs, `<button>` for action CTAs |
| 39 | Never use `<div>` as a clickable CTA |
| 40 | Minimum 44x44px touch targets |
| 41 | CTA text: 4.5:1 contrast ratio minimum |
| 42 | Focus indicators, borders, and icons: 3:1 contrast ratio minimum |
| 43 | Visible focus indicators |
| 44 | Descriptive link text (not "click here") |
| 45 | `aria-labelledby` pointing to CTA heading when context is needed |
| 46 | |
| 47 | ## CTA Copy Formula |
| 48 | |
| 49 | Lead with first-person: "Start My..." not "Start Your..." |
| 50 | Include benefit: "Get My Free Guide" not just "Download" |
| 51 | Create urgency without being pushy: "Join 10,000+ readers" not "Act now!!!" |
| 52 | Match surrounding content topic (contextual, not generic) |
| 53 |
Discussion
Browse more free Claude skills.