Landing Page Skill

Instructions

When creating landing pages:

1. Page Structure

┌─────────────────────────────────────┐ │ HERO SECTION │ │ Headline + Subheadline + CTA │ │ + Hero Image │ ├─────────────────────────────────────┤ │ SOCIAL PROOF BAR │ │ Logos / "As seen in" / Stats │ ├─────────────────────────────────────┤ │ PROBLEM SECTION │ │ Pain points your audience has │ ├─────────────────────────────────────┤ │ SOLUTION SECTION │ │ How your product solves it │ ├─────────────────────────────────────┤ │ FEATURES/BENEFITS │ │ 3-6 key features with benefits │ ├─────────────────────────────────────┤ │ HOW IT WORKS │ │ 3-step process │ ├─────────────────────────────────────┤ │ TESTIMONIALS │ │ Customer quotes + photos │ ├─────────────────────────────────────┤ │ PRICING │ │ Clear pricing options │ ├─────────────────────────────────────┤ │ FAQ │ │ Objection handling │ ├─────────────────────────────────────┤ │ FINAL CTA │ │ Last push with urgency │ ├─────────────────────────────────────┤ │ FOOTER │ │ Trust badges, links, legal │ └─────────────────────────────────────┘

2. Hero Section

Headline Formulas:

• [Achieve outcome] without [pain point]

• The [adjective] way to [desired result]

• [Product] that [key benefit]

• Stop [bad thing]. Start [good thing].

• [Number] [people] use [Product] to [outcome]

Subheadline:

• Expand on the headline

• Add specificity

• Include secondary benefit

Example:

<section class="hero"> <h1>Build WordPress Themes 10x Faster</h1> <p class="subheadline"> The developer toolkit that eliminates repetitive coding so you can focus on what matters — shipping great themes. </p> <a href="#" class="cta-button">Start Free Trial</a> <p class="microcopy">No credit card required • 14-day trial</p> </section>

3. Social Proof Types

Logo Bar:

<section class="social-proof"> <p>Trusted by 10,000+ developers at</p> <div class="logos"> <img src="logo1.svg" alt="Company 1"> <img src="logo2.svg" alt="Company 2"> ... </div> </section>

Stats Bar:

<div class="stats"> <div class="stat"> <span class="number">50,000+</span> <span class="label">Active Users</span> </div> <div class="stat"> <span class="number">4.9/5</span> <span class="label">Average Rating</span> </div> <div class="stat"> <span class="number">99.9%</span> <span class="label">Uptime</span> </div> </div>

Testimonials:

<blockquote class="testimonial"> <p>"Quote that highlights specific results..."</p> <footer> <img src="avatar.jpg" alt="Name"> <cite> <strong>Name</strong> <span>Title, Company</span> </cite> </footer> </blockquote>

4. Features Section

Format: Feature → Benefit

<div class="feature"> <div class="feature-icon">🚀</div> <h3>One-Click Deployment</h3> <p>Deploy to production in seconds, not hours. Spend more time building, less time configuring.</p> </div>

5. Pricing Section

<div class="pricing-card popular"> <span class="badge">Most Popular</span> <h3>Pro Plan</h3> <div class="price"> <span class="currency">$</span> <span class="amount">49</span> <span class="period">/month</span> </div> <ul class="features"> <li>✓ Feature 1</li> <li>✓ Feature 2</li> <li>✓ Feature 3</li> </ul> <a href="#" class="cta-button">Get Started</a> <p class="guarantee">30-day money-back guarantee</p> </div>

6. CTA Best Practices

Button Copy:

• Start Free Trial

• Get Started Now

• Download Free Guide

• Join 10,000+ Users

• Claim Your Discount

Supporting Elements:

• Risk reducers (money-back guarantee)

• Urgency (limited time)

• Scarcity (only X left)

• Social proof (join X others)

7. FAQ Section

<details class="faq-item"> <summary>Common objection as a question?</summary> <p>Answer that overcomes the objection with specifics and reassurance.</p> </details>

Common FAQ Topics:

• Pricing/refunds

• Technical requirements

• Support availability

• Comparison to alternatives

• Getting started process

8. Conversion Optimization

Above the Fold:

• Clear value proposition

• Primary CTA visible

• Trust indicator

Throughout Page:

• Multiple CTAs (same action)

• Progressive disclosure

• Visual hierarchy

• Mobile optimization

Reduce Friction:

• Minimal form fields

• Clear next steps

• Fast page load

• No distractions

9. Copywriting Tips

Power Words:

• Free, New, Proven, Easy

• Instant, Guaranteed, Limited

• Exclusive, Premium, Ultimate

Avoid:

• Jargon and buzzwords

• Vague claims

• Walls of text

• Multiple CTAs

10. Landing Page Checklist

• Clear, benefit-focused headline

• Single, focused CTA

• Social proof present

• Mobile responsive

• Fast loading (<3s)

• Trust signals visible

• FAQ addresses objections

• Analytics tracking set up