99 lines
2.7 KiB
Markdown
99 lines
2.7 KiB
Markdown
# Landing Page Patterns
|
|
|
|
This reference captures high-converting page patterns and copy structures.
|
|
|
|
## Hero Section Patterns
|
|
|
|
### Pattern 1: Problem-Solution Hero
|
|
- Headline names the painful problem.
|
|
- Subheadline states the clear outcome.
|
|
- Primary CTA starts immediately.
|
|
- Optional supporting visual demonstrates product in context.
|
|
|
|
### Pattern 2: Outcome-First Hero
|
|
- Headline leads with measurable value.
|
|
- Subheadline clarifies who the page is for.
|
|
- CTA is action-oriented and specific.
|
|
|
|
### Pattern 3: Authority Hero
|
|
- Headline + trust indicator (logos, testimonial snippet, proof metric).
|
|
- Useful when category skepticism is high.
|
|
|
|
## Social Proof Layouts
|
|
|
|
### Logo Strip + Proof Metric
|
|
- Keep to recognizable logos.
|
|
- Add one proof metric (e.g., active users, revenue saved, hours reduced).
|
|
|
|
### Testimonial Grid
|
|
- 3-6 testimonials across segments.
|
|
- Include role/company where possible.
|
|
- Prefer concrete outcomes over generic praise.
|
|
|
|
### Case Study Snapshot
|
|
- Mini blocks: challenge -> approach -> measurable result.
|
|
|
|
## CTA Best Practices
|
|
|
|
- Use one dominant CTA per section.
|
|
- Match CTA verb to user intent ("Start trial", "Get demo", "Run audit").
|
|
- Keep CTA copy specific; avoid vague labels like "Submit".
|
|
- Reduce friction near CTA (short form, trust indicators, no surprise commitments).
|
|
|
|
## Above-the-Fold Checklist
|
|
|
|
- [ ] Clear value proposition in first viewport
|
|
- [ ] Audience clarity (who this is for)
|
|
- [ ] One primary CTA visible without scrolling
|
|
- [ ] Proof element (logos, stat, quote)
|
|
- [ ] Visual hierarchy emphasizes headline + CTA
|
|
- [ ] Mobile layout keeps CTA accessible
|
|
|
|
## Conversion-Optimized Templates
|
|
|
|
### SaaS Demo Page
|
|
1. Hero with problem-solution framing
|
|
2. Product walkthrough section
|
|
3. Social proof strip
|
|
4. Benefits by persona
|
|
5. Objection handling FAQ
|
|
6. Final CTA
|
|
|
|
### Lead Magnet Page
|
|
1. Promise + asset preview
|
|
2. Bullet outcomes
|
|
3. Short form
|
|
4. Trust/privacy note
|
|
|
|
### Product Launch Page
|
|
1. Outcome-first hero
|
|
2. Why now / differentiation
|
|
3. Feature blocks
|
|
4. Testimonials / beta feedback
|
|
5. Pricing or waitlist CTA
|
|
|
|
## Headline Formulas
|
|
|
|
### PAS (Problem-Agitate-Solution)
|
|
- Problem: identify the pain
|
|
- Agitate: show consequences of inaction
|
|
- Solution: position the offer as relief
|
|
|
|
Example structure:
|
|
"Still [problem]? Stop [negative consequence] and start [desired outcome]."
|
|
|
|
### AIDA (Attention-Interest-Desire-Action)
|
|
- Attention: pattern interrupt headline
|
|
- Interest: relevant context and stakes
|
|
- Desire: proof and benefits
|
|
- Action: concrete next step
|
|
|
|
### 4U Formula
|
|
- Useful: clear practical value
|
|
- Urgent: reason to act now
|
|
- Unique: differentiated promise
|
|
- Ultra-specific: concrete outcome and scope
|
|
|
|
Example structure:
|
|
"Get [specific result] in [timeframe] without [common pain]."
|