How to Build a Landing Page That Actually Sells
A playbook for SaaS landing pages that convert. No fluff. Based on real patterns — what works, what fails, and why.
The One Rule
A landing page is a conversation, not a brochure.
You have one visitor, one scroll, one chance. Every section is a sentence in a pitch. If a section doesn't move them closer to clicking the CTA, kill it.
Page Structure: The Scroll as a Story
A landing page is a vertical story. The visitor scrolls down because each section answers the question the previous section raised.
Hero → "What is this?"
How → "How does it work?"
Proof → "Does it actually work?"
Features → "What can it do for ME?"
Pricing → "Can I afford it?"
Close → "OK, I'm in."
That's it. Six beats. Everything else is decoration or distraction.
The section budget
5-8 sections maximum. Not 16. Not 12. The moment your page feels like it needs a table of contents, you've lost.
If you have multiple product areas (inbox, marketing, loyalty, etc.), you do NOT give each one its own hero + feature section + giant title break. You pick the 2-3 most compelling capabilities and show them. Save the rest for the product itself.
Anti-pattern: Building a landing page that's actually a product documentation site disguised as a sales pitch. Feature dumps don't sell — stories do.
Section 1: Hero
The hero has one job: make the visitor stay for the next 5 seconds.
What goes in a hero
| Element | Purpose | Rule |
|---|---|---|
| Headline | Say what this is | Max 8-10 words. If you need a subtitle to explain the headline, the headline failed. |
| Accent / Punchline | Emotional hook | One fixed line that anchors the rotating/dynamic headline. The punchline is what they remember. |
| Sub-headline | Expand slightly | One sentence. Who it's for + what it does + why it matters. |
| Primary CTA | Convert | Verb + noun. "Start Free Trial", "Get Your Agent". Never "Submit" or "Learn More". |
| Secondary CTA | Lower commitment | Demo, video, or try-before-signup. Different visual weight than primary. |
| Trust nudge | Remove friction | "No credit card required" or "Free forever" — one line, small text. |
What does NOT go in a hero
- Product screenshots (too early — they don't know what they're looking at)
- Feature lists
- Pricing
- Multiple paragraphs of text
- Auto-playing videos
- Carousels or sliders
The typewriter pattern
Cycling through words (responds / sells / supports / learns) with a fixed punchline is effective because:
- It shows breadth without bullet points
- It creates rhythm and anticipation
- The fixed line becomes the anchor message
But: limit to 3-5 words max in the rotation. More than that and the visitor never sees most of them.
Hero sizing
Full viewport height. The hero IS the first impression. Don't cram it into 60vh to show a peek of the next section. Let it breathe. Use a scroll indicator (text + chevron) to hint there's more below.
Section 2: How It Works
Immediately after the hero. The visitor is interested but skeptical. Show them it's simple.
The magic number: 3
Three steps. Always three. Not four, not five. Three steps is the universal shorthand for "this is easy."
Connect → Teach → Launch
Sign Up → Configure → Go Live
Upload → Customize → Publish
Each step: icon + short title + one sentence. That's it.
Anti-patterns
- More than 3 steps — you're describing a process, not selling simplicity
- Steps that require explanation — if a step title needs a paragraph, it's not a step, it's a feature
- "Step 1: Sign Up" — don't waste a step on the obvious
Section 3-5: Features (The Proof)
This is where most landing pages go wrong. They dump every feature.
The 2-3 rule
Pick your 2-3 strongest features. The ones that make people say "oh, that's smart." Give each one a dedicated section. Everything else goes in a bullet list or a minor grid — or doesn't appear at all.
Show, don't list
Each feature section should have:
- A short headline (what it does, not what it's called)
- One sentence of context
- A visual — mockup, animation, screenshot, or interactive demo
Good: An animated phone showing a real conversation with the AI agent Bad: A bullet list of 11 features with checkmarks
Visual rhythm
Alternate the layout direction. If feature 1 has text-left / visual-right, feature 2 should flip. This creates visual momentum and prevents the "wall of sameness" effect.
But: don't use the same background color for consecutive sections. If two sections look identical in structure AND color, the visitor's brain merges them into one blob.
The mid-scroll CTA
Between feature sections 2 and 3, drop a lightweight CTA strip. Not a full section — just a colored band with one line of copy and one button. The visitor is warmed up, give them a chance to act before they hit scroll fatigue.
Section 6: Pricing
Tier count
3 tiers is the sweet spot. 2 feels limiting. 4 creates decision paralysis.
If you must have 4, make one of them visually de-emphasized (the enterprise/custom tier can be a simple "Contact Us" without a full feature column).
The popular plan
Always highlight one plan. Border it, badge it ("Most Popular"), give it a different background. This is the plan you want people to pick. It should be the middle tier — not the cheapest, not the most expensive.
Feature rows
Max 6-7 feature rows per plan. More than that and you're building a comparison spreadsheet, not a pricing section. Group features:
- What's included (checkmarks only — no explanation needed)
- Key limits (conversations, storage, seats)
- One differentiator per tier
The escape hatch
Below pricing, always have a low-pressure option: "Not sure? Talk to us" with a link to chat/WhatsApp/email. Some visitors need a human nudge, not a feature matrix.
Anti-patterns
- Per-feature tooltips — if a feature name needs explanation, rename it
- "Everything in [lower plan] plus..." for every tier — this forces the visitor to mentally assemble the plan from pieces
- Crossed-out features (x marks) on lower tiers — this makes cheap plans feel punishing instead of welcoming
- Too many tiers on mobile — stacked cards become an endless scroll. Consider a toggle or simplified mobile view
Section 7: Final CTA (The Close)
The visitor scrolled the entire page. They're either ready or they're leaving. This section exists only to catch the ready ones.
What goes here
- One headline: restate the value ("Start selling on autopilot")
- Primary CTA button (same as hero — consistency builds trust)
- Optional: secondary CTA (demo/trial)
- Trust nudge (same as hero)
What does NOT go here
- New information
- Testimonials (too late)
- Feature recaps
- Long paragraphs
Visual treatment
High contrast. If your page is light, make this section dark. If your page is dark, make this section a bold brand color. The visual shift signals "this is the end, act now."
Navigation
On a landing page, navigation is minimal
- Logo (links home)
- 1-2 anchor links (Pricing, Help — that's enough)
- CTA button (always visible, always in the nav)
Sticky nav behavior
- Transparent over the hero (don't compete with the headline)
- Becomes opaque/solid on scroll
- CTA button in the nav should be smaller/subtler than the hero CTA
Anti-patterns
- Hamburger menus on desktop — you have 2-3 links, just show them
- Dropdown menus — this is a landing page, not a product. No dropdowns.
- No anchor links on long pages — if your page is long (it shouldn't be, but if it is), at minimum link to Pricing from the nav
Footer
Keep it dead simple
- Logo + one-line tagline
- Essential links: Privacy, Terms, Contact
- Optional: social links, partner badges
- Copyright
Anti-patterns
- Sitemap-style footers with 4 columns of links — this is a landing page, not a portal
- Repeating CTAs in the footer — the Close section above handles this
- Stale copy — if your tagline says "team inbox" but you pivoted to "AI agent," fix it. Footer copy gets forgotten and it erodes trust.
Floating Elements & Widgets
One floating element. Maximum.
A WhatsApp FAB or chat widget or demo button — pick ONE. Two competing floating elements (e.g., a FAB bottom-left + a vote widget bottom-right) creates visual noise and splits attention from the actual CTAs.
Timing
Don't show floating elements immediately. Wait until the visitor scrolls past the hero. They need to understand what the product is before you offer a demo or chat.
Anti-patterns
- Auto-opening popups or cards — never interrupt the scroll with something the visitor didn't ask for
- Persistent side-tabs that pulse/animate — this is the digital equivalent of someone tugging your sleeve while you're reading
- Widgets unrelated to the core conversion (surveys, votes, feedback forms) — these compete with your CTAs. Save them for post-signup
CTA Copy Consistency
One action, one phrase
If your primary CTA is "Start Free Trial," use that EXACT phrase everywhere it appears:
- Hero
- Mid-scroll
- Pricing
- Close
- Nav
Don't vary it ("Get Started" / "Try Free" / "Sign Up Now" / "Activate"). Variation creates micro-confusion. The visitor should never wonder "is this the same button?"
Secondary CTA
Your secondary action (demo, trial, WhatsApp) can have slightly different phrasing per placement, but the VERB should stay the same. "Try the Agent" / "Try It Live" / "Try Before You Sign Up" — the word "try" anchors it.
Mobile Considerations
Everything above applies, plus:
- Hero text: use
clamp()for responsive font sizes. The massive desktop headline should still be large on mobile, just not broken across 4 lines. - Feature sections: stack to single column, visual above text. Never hide the visual on mobile — it's often more compelling than the copy.
- Pricing: don't show 3-4 full plan cards stacked. Use tabs, a toggle, or show only the recommended plan with a "Compare all plans" expand.
- CTAs: full-width buttons on mobile. Thumb-friendly. No side-by-side button pairs.
- Scroll depth: mobile visitors scroll MORE than desktop (thumb is easier than mousewheel). But they also ABANDON faster. Front-load your strongest content.
Performance Is UX
A landing page that takes 3 seconds to load has already lost.
- Lazy-load everything below the fold (
@deferorloading="lazy") - No heavy JS frameworks for a marketing page (if your product is Angular/React, consider a static landing page)
- Optimize images: WebP, proper sizing, no 4000px hero backgrounds
- First Contentful Paint under 1.5s. If your hero has a typewriter animation, the TEXT should be visible immediately — the animation is progressive enhancement.
SEO Baseline
Even if your traffic is paid, do the basics:
- Structured data (JSON-LD: Organization, WebSite, SoftwareApplication)
- Proper heading hierarchy (one H1 in hero, H2 for sections, H3 for features)
- Meta description that matches your hero copy
- Open Graph tags for social sharing
- Alt text on all images/mockups
Analytics: Measure What Matters
Track these
| Event | Why |
|---|---|
| Section visibility | Know where visitors drop off |
| Scroll depth milestones (25/50/75/100%) | Understand engagement depth |
| CTA clicks (with location) | Know which placement converts |
| Time on page milestones | Distinguish skimmers from readers |
Don't track these (on a landing page)
- Mouse movements or heatmaps (overkill for iteration speed)
- Individual feature interaction (save for product analytics)
- A/B test everything (pick your battles — hero and pricing first)
The Checklist
Before you ship a landing page, run through this:
- Can a visitor understand what the product does in 5 seconds? (Hero test)
- Is the page under 8 sections?
- Is there only ONE primary CTA phrase used consistently?
- Does the page tell a story (problem → solution → proof → price → action)?
- Are there no more than 3 feature sections?
- Is pricing 3 tiers with one highlighted?
- Is there only one floating element?
- Does the page load in under 2 seconds?
- Does the mobile version work without horizontal scrolling?
- Is the footer copy accurate to the current product positioning?
- Are structured data tags in place?
- Does every section earn its place? (If you removed it, would conversions drop?)
TL;DR
- 6-8 sections, not 16. Every section earns its spot or gets cut.
- Hero = headline + punchline + CTA. Nothing else.
- 3 steps. Always 3.
- 2-3 features, shown not listed. Pick your best, kill the rest.
- 3 pricing tiers, one highlighted. Max 7 feature rows.
- One CTA phrase everywhere. Verb + noun. Never varies.
- One floating element. Max. And not on page load.
- Mobile is not desktop-but-smaller. Rethink layout, not just width.
- Fast. Under 2 seconds or you've already lost.
- Consistent. Footer copy, nav copy, CTA copy — all match the current product.