Landing Page Design That Converts: 10 Elements + Real Examples

Why most landing pages stall

Landing page design is one of the few places where small changes still move the needle measurably. The math is simple: paid traffic is expensive, organic traffic is slow, and a page sitting at 1–2% conversion wastes most of both. Industry benchmarks from WordStream's 2024 conversion data put the median landing page around 2–3%, with the top 10% above 11%. The gap is rarely about a single hero image — it is about whether the page contains the elements buyers actually need to commit.

What follows is the structure I keep using on real client work. Built from 17 years and 250+ projects shipped, including the LAK Embalagens corporate website (45% bounce rate reduction, 3x Search Console impressions, Top 3 Google rankings) and the Imohub real estate portal (120k+ properties, sub-0.5s query response).

---

---

Table of contents

1. Element 1: Hero headline
2. Element 2: Subheadline
3. Element 3: Hero image or video
4. Element 4: Value proposition
5. Element 5: Social proof
6. Element 6: Problem statement
7. Element 7: Solution and benefits
8. Element 8: Call-to-action
9. Element 9: Form design
10. Element 10: Trust signals
11. Full page structure
12. Reflecting on what actually moves conversion
13. FAQ

---

Element 1: Hero headline

A hero headline gets about three seconds. It has one job: tell the visitor whether they're in the right place.

The formula

[Benefit / outcome] for [target audience]

or

[Specific result] + [time or cost]

Good examples

• "Land your dream job in 90 days — without applying to 100+ positions"
• "Cut your AWS costs by 40% in 30 minutes — no code required"
• "Grow your email list 10x with the simple 5-step framework"
• "Quit your day job: the complete freelance playbook"

Each one names a specific outcome and a specific audience.

Weak examples

• "Welcome to our platform". Generic, could be anyone.
• "Software solutions for enterprise". Vague, who is this for?
• "The best marketing tool". Empty claim.
• "Introducing XYZ Product". About the product, not the buyer.

What makes a hero headline work

• Use real numbers. "10x", "40%", "90 days" land harder than "more", "better", "faster".
• Be specific about the audience. "Get more leads" loses to "Generate 20 qualified B2B leads a month".
• Lead with outcome, not feature. "Send emails" is a feature. "Close deals faster" is what they want.
• Keep it under ten words when you can. Long headlines work in B2B occasionally, but rarely.

---

Element 2: Subheadline

The subheadline expands the headline. It either narrows the audience, removes a friction, or proves the claim.

The formula

Pick one:

• Who it's for: "Built for coaches, consultants, and small agency owners".
• How it works: "An AI that reviews your codebase and ships fixes overnight".
• The objection answered: "No credit card required. Cancel anytime".
• The mechanism: "Using the same 5-step framework trusted by 5,000+ marketers".

Good examples

• Headline: "Land your dream job in 90 days" Subheadline: "For professionals with 2–5 years of experience stuck in the application loop." → Narrows the audience.
• Headline: "Cut your AWS costs by 40%" Subheadline: "A 30-minute audit reveals hidden charges. No code, no downtime, no risk." → Removes objections.
• Headline: "Grow your email list 10x" Subheadline: "Without writing more content or paying for ads. Five steps, in order." → Proves feasibility.

Weak examples

• "We're the industry leader in cloud solutions." Says nothing.
• "Trusted by companies worldwide." Proof claim with no proof.

Quick rules

• One or two sentences, never more.
• Reinforce the headline. Do not introduce a new benefit.
• Address the first objection a sceptical reader would raise.

---

Element 3: Hero image or video

The hero visual is the second credibility check. It either supports the claim or quietly undermines it.

Criteria for good hero visuals

• On-brand. The colours feel intentional.
• Specific. Shows the product, the result, or a real customer using it.
• Authentic. Real screenshots, real people, real numbers — not a stock smile at a laptop.
• Relevant. The visual reinforces the headline.

Good options

• Product screenshot. Shows exactly what they're buying.
• Before / after. Visual proof of change.
• A real customer using the product.
• A dashboard with real metrics.
• A 30–60 second video demo.

Weak options

• Stock photo of a smiling person at a desk. Generic.
• Logo on white. No context.
• Vague illustration that could be on any SaaS site.

Video versus image

Criteria	Image	Video
Conversion lift	Baseline	+10–30% (when the video is good)
Load time impact	Minimal	Real (must be optimized)
Engagement	Solid	Better
Production complexity	Low	Medium
Best for	Fast pages, mobile	Desktop-heavy traffic, product demos

A slow page hurts conversion more than a video helps. If you cannot serve a video at decent Core Web Vitals — see Google's Web Vitals docs — keep the image.

---

Element 4: Value proposition

Your value proposition answers, in two or three sentences: why you, why now, why this offer.

The formula

[Specific outcome] + [proof] + [what makes it yours]

Good examples

• "My framework has helped 3,000+ coaches charge 3x their rates without losing clients. Most coaches use generic pricing. I teach the positioning that makes higher rates feel obvious to the buyer."
• "Close 50% more deals using a script library tuned to your industry. Unlike generic templates, every line has been tested across 200+ live sales calls."

Weak examples

• "We offer the best solutions for your business." Generic, no proof.
• "Our product is innovative and modern." Empty adjectives.

Quick rules

• Lead with specifics. "3x", "50%", "3,000+ coaches", "200+ calls".
• Prove it. Facts beat adjectives.
• Acknowledge the alternative. Show you know what they're doing today, then show why this is different.

---

Element 5: Social proof

Social proof removes risk. It tells the visitor: people like me have done this and survived.

Types of social proof, strongest first

Type	Example	Strength
Testimonial with a metric	"Increased revenue by 40% in 3 months"	High
Full case study	Story + numbers + before/after	High
Customer count	"5,000+ businesses use this"	Medium-high
Recognizable client logos	Names buyers know	Medium-high
Named testimonial with photo	"Jane Smith, CEO of Acme: …"	Medium
Review site rating	"4.9/5 on G2"	Medium
Generic quote	"Great product!" (Anonymous)	Low
"Trusted by" with no names	No specifics	Very low

Where to place social proof

• Below the headline for early credibility.
• Between problem and solution to reinforce the claim.
• Right above the form for a final reassurance.

Good examples

• Testimonial with a metric:

  "I went from 2 leads a month to 15. I implemented the system in week one. Best $500 I've spent on the business." — Sarah Chen, real estate agent, Boston.

• Logo grid plus number: "Trusted by 2,500+ agencies and freelancers" with 10–15 recognisable logos.
• Case study snippet: "Acme Corp increased deal velocity by 35% in 90 days." → links to the full study.

Weak examples

• "5 stars!" Said by whom?
• "Customers love us." Proof without proof.

A note on authenticity

Real testimonials beat polished ones. The on-site reviews on adriano-junior.com are from named engineers at named companies for a reason — Samantha Niessing at GigEasy, Gabriel Edlin (ex-Lyft), Gregori Maus and Rafael Camillo at Cuez, Jhonatan Amorim at bolttech. Anyone who clicks LinkedIn can verify them. That verifiability is the point.

---

Element 6: Problem statement

Before pitching the solution, prove you understand the problem. This is where the visitor decides whether you actually get them.

The formula

[Specific pain] affecting [specific audience]

Optionally: [Cost of the problem].

Good examples

• "Most coaches undercharge. They take on 20–30 clients at $30–50K/year when they could serve 5 at $150K+. The fix isn't more clients. It's better positioning."
• "AWS bills surprise everyone. Teams spin up resources, forget them, and end the month at $15K instead of $3K. By then, the money is gone."

Weak examples

• "The industry is changing." Means nothing.
• "Businesses need better solutions." Says you don't actually know the problem.

Rules of thumb

• Be specific about the pain. Not "businesses struggle" but "CFOs can't forecast AWS costs".
• Use numbers when you can. Cost is the most credible kind of detail.
• Show empathy only if it's real. Forced empathy reads worse than no empathy at all.

---

Element 7: Solution and benefits

Now pivot from problem to outcome. Show benefits, not features.

Feature versus benefit

Feature	Benefit
"Analyzes your code"	"Finds and fixes bugs 10x faster than your team"
"30+ templates"	"Launch a campaign in 5 minutes instead of 2 days"
"AI-powered insights"	"See exactly which customers are about to churn"

The formula

3–5 benefits, each with a one-line proof or mechanism.

A clean example

Here's what you get:

1. The 5-step framework. Works for consultants, coaches, agencies.
2. Done-for-you scripts. Proven language, drop into your own calls.
3. Customer success help. Onboarding by a person, not a chatbot.
4. Results or money back. Close 3 deals in 60 days or full refund.

A weak example

Features:

• Advanced analytics
• Real-time dashboards
• API integrations
• 24/7 support

So what?

Visual format options

• Numbered list. Most common, easy to scan.
• Icon plus description. Works well above the fold.
• Card layout. Good when there are five or more.

---

Element 8: Call-to-action

The CTA is the hinge. Every other element can be perfect — if the button is weak, the page underperforms.

CTA text matters

Text	Strength
"Sign up now"	Standard, fine
"Get started"	Standard, fine
"Claim your free [offer]"	Better. Names the value
"Download the framework"	Specific, concrete
"Start your free 14-day trial"	Specific + risk-free
"Join 5,000+ marketers"	Social proof + action
"Yes, I want more leads"	Benefit, in their voice
"Learn more"	Vague. Buyers do not click vague
"Submit"	Boring. Never use it

CTA design

Good:

• Contrasting colour against the background.
• 18–24px font, generous padding for thumbs.
• Action verb up front (Sign up, Download, Start, Claim).
• Repeated above the fold and at the end of the page.

Weak:

• Same colour as the background.
• Tight padding and small text.
• Passive verbs (Learn, Browse, View).
• One CTA hidden three scrolls down.

CTA positioning

Position	Conversion impact
Above the fold	Baseline
After benefits	+15–25%
Sticky on scroll	+10–20%
Multiple positions (top + middle + bottom)	+20–35%

Side note on CTA copy on this site

The primary CTA on adriano-junior.com is "Get a quote in 60s". The secondary is "Get a quote in 60s". The nav says "Let's talk". I do not use "Get started", "Learn more", or "Book a discovery call" on the site for a simple reason — they hide the actual decision.

---

Element 9: Form design

The form is the actual transaction point. Make it easy to complete.

Form field rules

Field count drives conversion harder than almost anything else:

• 3 fields (name, email, phone): typically 12–18% conversion on warm traffic.
• 5 fields (name, email, phone, company, role): drops to 7–10%.
• Each extra field beyond five tends to subtract another 3–5%.

Order fields by friction:

1. Name (easy).
2. Email (most important).
3. Phone (mild commitment).
4. Company (optional, push to later if possible).

Use placeholders or floating labels to save vertical space on mobile. A separate label above every field doubles the form length.

Multi-step forms

If the form has more than 4 fields, split it:

• "Step 1 of 3" tells the user how long this takes.
• Each step asks for one chunk of information.
• Multi-step often outperforms single-page on B2B leads — the buyer commits step by step.

Reassurance copy

A short line under the form. Examples:

• "I respect your privacy. No spam, no list resale."
• "Unsubscribe anytime."
• "Your info is encrypted." (with a small lock icon).

A clean form

[ Your name ]
[ Your email ]
[ Phone (optional) ]
[ ✓ Send me the weekly tips ]
   "I respect your privacy. Unsubscribe anytime."

[ Start my free trial ]

A bad form

First name: [ ]
Last name: [ ]
Email: [ ]
Phone: [ ]
Company: [ ]
Industry: [ ]
Budget: [ ]
Timeline: [ ]
How did you hear about us? [Dropdown]
Hear about future products? [Yes/No]

[ Submit ]

That form drops conversion by half before the user reads a word.

---

Element 10: Trust signals

Before they convert, every visitor asks the same silent question: can I trust these people?

Types of trust signals

Signal	What it does
Money-back guarantee	Removes the worst-case risk
Privacy badge	Tells them their data is safe
Real company info	Says you are a real business
Founder bio with photo	Puts a human behind the offer
Credentials, certifications	Establishes competence
Free trial, no credit card	Lowers commitment
Industry partnerships (Google Partner, etc.)	Borrows trust

Where to place them

• Right above the form, before they enter data.
• Next to the CTA button.
• In the footer alongside company info, privacy and terms.

A grounded example

The websites I sell come with a 14-day money-back guarantee and a 1-year bug warranty on every tier. That is the actual offer on services/websites, and it is the kind of guarantee a buyer can verify in 30 seconds. Specific guarantees beat generic ones every time.

Weak example

A page with no money-back, no company info, no privacy link, and a credit card form on the first scroll. That page reads as risky no matter how good the headline is.

---

Full page structure

Here is how the ten elements compose into a single page.

1. HERO
   - Headline
   - Subheadline
   - Hero image or video
   - Primary CTA (above the fold)

2. SOCIAL PROOF
   - 3–5 testimonials with metrics or recognisable logos
   - Customer count or case study snippet

3. PROBLEM
   - Show you understand the pain in the buyer's words

4. SOLUTION
   - 3–5 benefits, each with proof
   - Icons or cards

5. FORM
   - Headline ("Get started")
   - Form (3–5 fields)
   - CTA button
   - Trust signals + reassurance

6. FOOTER
   - Real company info, privacy, contact

Total length sweet spot: 600–1,000 words for cold traffic, 1,200–1,800 for high-consideration B2B. Anything longer hurts more than it helps.

---

Reflecting on what actually moves conversion

After 17 years of building these pages, the boring truth is: most underperforming landing pages have the same five problems in some order. The headline is generic. The hero image is stock. The social proof is unverifiable. The CTA says "Submit". And the form asks for a phone number, a job title, a company size, a budget, and a timeline before the buyer has any idea who they're talking to.

Fix any one of those and the page improves. Fix three and the math finally starts working.

The other thing I see often: people obsess over fonts and gradients while leaving "Submit" on the button. The aesthetic layer matters far less than the structure. A plain page with a sharp headline, named social proof, and a real guarantee will outperform a beautiful page with vague claims almost every time.

Worth saying out loud: a landing page is the cheapest experiment you can run. If yours has been at 1–2% for a quarter, change the headline this week. Watch what happens.

---

FAQ

How many CTAs should I have?

Two or three: above the fold, mid-page, and right before the form. More than that starts to feel pushy. Keep them visually consistent so the page reads as one decision, not five.

Should I include a phone number?

Only if you actually answer it. Calls usually convert better than forms. An unanswered phone number quietly destroys trust.

Do videos help?

Yes, when they are short and tight. Expect a 10–30% lift on a page where the video shows the product or a real customer testimonial. But only if the page still passes Core Web Vitals on mobile.

How long should a landing page be?

For cold paid traffic, 600–1,000 words. For high-consideration B2B, 1,200–1,800. Going past 2,000 mostly hurts because the buyer scrolls past the form.

What conversion rate should I expect?

Median is 2–3%. Tuned pages live in the 5–9% band. Pages above 10% are usually selling something with a strong existing audience or a tight retargeting funnel.

Should I A/B test everything?

No. Test one element at a time, with at least 100 conversions per variant before reading. Most tests come back inconclusive. The wins come from changing big things — number of form fields, CTA copy, social proof placement — not button shades.

---

Build a page that pays for itself

Key takeaways:

• The headline must pass the "is this for me" test in three seconds.
• Social proof goes high on the page, not buried at the bottom.
• Problem statement first, solution second.
• Benefits, not features.
• Fewer form fields, every time.
• Trust signals next to the form, not in the footer.

If you want a sharp pair of eyes on your offer, your headline, and your form, get a quote in 60s and I'll send back specific changes. Or get a quote in 60s and I'll review the page with you.

For scoped builds, see my fixed-price Websites (from $2,000, 14-day money-back, 1-year bug warranty) or Custom web applications at $3,499/mo. Real conversion work documented in case studies: LAK Embalagens (45% bounce reduction, Top 3 rankings) and Imohub (120k+ properties, sub-0.5s queries). Related reading: how to plan a new website and website maintenance: what it costs.