Landing Page Builder
Overview
Design high-converting landing pages: goal definition, section structure, copywriting per section, layout recommendations, trust signal placement, form optimization, mobile responsiveness, and page speed optimization. Outputs complete HTML/CSS or detailed spec.
When to Use
- "Create a high-converting landing page for [offer]"
- "Design a landing page for my product launch"
- "Optimize my current landing page"
Landing Page Structure
The Proven Formula (top to bottom)
- Hero: Headline (main promise) + Subheadline (supporting benefit) + Primary CTA + Supporting image/video
- Social Proof: Logo bar of recognizable brands, testimonial, or impressive stat
- Problem/Agitation: 1-2 paragraphs naming the pain your audience feels
- Solution: How your offer solves it (features as benefits)
- How It Works: 3-step visual explainer (icon + short text per step)
- Benefits/Features: 3-column grid or list with dual columns (feature → benefit)
- Testimonials: 2-3 real quotes with photos, names, and results
- Guarantee/Risk Reversal: "100% money-back" / "Free trial, no credit card"
- FAQ: 5-7 common objections answered before they're asked
- Final CTA: Same promise + CTA as hero, often with urgency/scarcity
Copy by Section
Hero Headline Formulas
- Outcome-focused: "Get [result] in [timeframe] without [pain point]"
- Audience-specific: "The [product] for [specific audience] who [desire]"
- Big promise: "[Number] [people/businesses] [achieved result] using [product]"
- Question: "Struggling with [pain]? [Solution] is here."
- Command: "Stop [pain]. Start [gain]."
CTA Button Copy
| Weak |
Strong |
| Submit |
Get My Free Guide |
| Click Here |
Start My 14-Day Trial |
| Learn More |
See How It Works |
| Sign Up |
Create My Account → |
Trust Signals
| Signal |
Placement |
Why It Works |
| Logo bar (as seen in...) |
Below hero |
Familiarity transfer |
| Testimonial with photo |
Mid-page |
Social proof with face |
| Rating/Review count |
Near CTA |
Social validation |
| Money-back guarantee |
Above final CTA |
Risk reversal |
| Security badges |
Near form/purchase button |
Safety reassurance |
| Press mentions |
Sidebar or footer |
Third-party authority |
Form Optimization
- Fields: Name + Email minimum. Each extra field drops conversion 10-15%
- Button: Action-oriented, first-person ("Send me the guide" not "Submit")
- Privacy reassurance: "We'll never share your email. Unsubscribe anytime."
- Placement: Above the fold + inline (not popup) for highest conversion
- Multi-step: Only for high-commitment offers (webinars, demos, purchases)
Mobile Responsiveness
- Headlines: ≤30 chars on mobile (shorter line breaks kill readability)
- CTAs: Full-width, min 48px tall (thumb targets)
- Images: Stack vertically, no horizontal scroll
- Form: Single column, large input fields
Common Pitfalls
- Too many CTAs — one primary CTA per page; secondary links kill focus
- No social proof — a page without testimonials or logos looks untrustworthy
- Burying the lead — the hero must clearly state what you're offering
- Design over copy — a functional ugly page converts better than a beautiful confusing one
- No mobile test — 60%+ of traffic is mobile; test on an actual phone
Verification Checklist
1---2name: landing-page-builder3description: Use when building landing pages. Structure, copy, CRO.4license: MIT5---67# Landing Page Builder89## Overview10Design high-converting landing pages: goal definition, section structure, copywriting per section, layout recommendations, trust signal placement, form optimization, mobile responsiveness, and page speed optimization. Outputs complete HTML/CSS or detailed spec.1112## When to Use13- "Create a high-converting landing page for [offer]"14- "Design a landing page for my product launch"15- "Optimize my current landing page"1617## Landing Page Structure18### The Proven Formula (top to bottom)191. **Hero**: Headline (main promise) + Subheadline (supporting benefit) + Primary CTA + Supporting image/video202. **Social Proof**: Logo bar of recognizable brands, testimonial, or impressive stat213. **Problem/Agitation**: 1-2 paragraphs naming the pain your audience feels224. **Solution**: How your offer solves it (features as benefits)235. **How It Works**: 3-step visual explainer (icon + short text per step)246. **Benefits/Features**: 3-column grid or list with dual columns (feature → benefit)257. **Testimonials**: 2-3 real quotes with photos, names, and results268. **Guarantee/Risk Reversal**: "100% money-back" / "Free trial, no credit card"279. **FAQ**: 5-7 common objections answered before they're asked2810. **Final CTA**: Same promise + CTA as hero, often with urgency/scarcity2930## Copy by Section3132### Hero Headline Formulas33- **Outcome-focused**: "Get [result] in [timeframe] without [pain point]"34- **Audience-specific**: "The [product] for [specific audience] who [desire]"35- **Big promise**: "[Number] [people/businesses] [achieved result] using [product]"36- **Question**: "Struggling with [pain]? [Solution] is here."37- **Command**: "Stop [pain]. Start [gain]."3839### CTA Button Copy40| Weak | Strong |41|------|--------|42| Submit | Get My Free Guide |43| Click Here | Start My 14-Day Trial |44| Learn More | See How It Works |45| Sign Up | Create My Account → |4647## Trust Signals48| Signal | Placement | Why It Works |49|--------|-----------|-------------|50| Logo bar (as seen in...) | Below hero | Familiarity transfer |51| Testimonial with photo | Mid-page | Social proof with face |52| Rating/Review count | Near CTA | Social validation |53| Money-back guarantee | Above final CTA | Risk reversal |54| Security badges | Near form/purchase button | Safety reassurance |55| Press mentions | Sidebar or footer | Third-party authority |5657## Form Optimization58- **Fields**: Name + Email minimum. Each extra field drops conversion 10-15%59- **Button**: Action-oriented, first-person ("Send me the guide" not "Submit")60- **Privacy reassurance**: "We'll never share your email. Unsubscribe anytime."61- **Placement**: Above the fold + inline (not popup) for highest conversion62- **Multi-step**: Only for high-commitment offers (webinars, demos, purchases)6364## Mobile Responsiveness65- Headlines: ≤30 chars on mobile (shorter line breaks kill readability)66- CTAs: Full-width, min 48px tall (thumb targets)67- Images: Stack vertically, no horizontal scroll68- Form: Single column, large input fields6970## Common Pitfalls711. **Too many CTAs** — one primary CTA per page; secondary links kill focus722. **No social proof** — a page without testimonials or logos looks untrustworthy733. **Burying the lead** — the hero must clearly state what you're offering744. **Design over copy** — a functional ugly page converts better than a beautiful confusing one755. **No mobile test** — 60%+ of traffic is mobile; test on an actual phone7677## Verification Checklist78- [ ] Hero has: headline, subheadline, CTA, supporting visual79- [ ] Social proof placed near top (logos/testimonials/stats)80- [ ] Copy follows proven structure (problem→solution→benefits→FAQ→CTA)81- [ ] CTA button uses action-oriented, first-person copy82- [ ] Form has minimum required fields (name + email) + privacy line83- [ ] Mobile responsive (stack layout, thumb-friendly buttons)84- [ ] Trust signals placed: logo bar, testimonials, guarantee, security badges85- [ ] Page speed checked (image optimization, minimal scripts)
LoopyLuci