Landing-page anatomy: nine sections, one job
We've published the conversion-first view of this topic before — the anatomy of a landing page that converts covers the principles. This is the working sequel: the physical dissection. What follows is the nine-section skeleton we use as a starting point, in the order we build it, then the same skeleton applied to three fictional Brassfern pages so you can see where the anatomy bends and where it never does.
One thing before the bones: the anatomy serves a single job. Every landing page has exactly one conversion, and every section either advances it or answers the objection standing in front of it. The sections below are ordered by objection sequence, not by visual variety. That's the whole trick, and it's the thing template marketplaces get wrong — they order sections by how pretty they are.
The skeleton
1. The promise (above the fold). One sentence that tells a qualified stranger what they get and why it's different, plus the primary CTA and one honest visual of the thing itself. Not your mission — their outcome. We test above-the-fold ruthlessly because it's the only section 100% of visitors see; the discipline behind the promise line gets its own essay in hero sections beyond the gradient blob. The rules that hold: name the category in the first five words if you're not famous; the CTA button states the next step, not the aspiration ("See pricing" beats "Unlock growth"); the visual shows the product, never a metaphor for the product.
2. The friction kill. Directly under the promise, answer the objection that arises the instant the promise is believed. "Sounds great — but won't it take six weeks to migrate?" Three to five compact answers: setup time, integrations, price floor, cancellation terms. This section is nearly always missing in the wild, and in our testing it's the highest-leverage addition to an existing page.
3. The mechanism. How it works, in three steps, maximum. Not a feature tour — a mental model. Visitors who can't visualise the mechanism don't believe the outcome; visitors who can, forgive missing features. Keep each step under twelve words and let the visuals carry detail.
4. Proof stack one: the numbers. Metrics with sources and timeframes. "38% faster month-end close across 140 finance teams, measured Q1 2026" carries weight; "loved by thousands" carries none. Three numbers, not nine — a stack becomes noise quickly. Numbers from fictional products illustrate the shape; on real pages these must be auditable or omitted.
5. The demo moment. The section where the page stops telling and starts showing: a live interactive slice, a 20-second looping screen capture, an annotated before/after. This is the section that separates high-converting pages from well-written ones. This is why Brassfern case studies ship with touchable work — the live demos in our Lab exist because "show, don't tell" is a conversion strategy, not a slogan.
6. Proof stack two: people. Testimonials, and the rule is specificity over celebrity. A named person (roles fine, fictional here), a company in the visitor's industry, and a quote containing a number or a concrete before/after. "It's really intuitive!" is decoration. One deep quote beats five shallow ones — we typically run one feature quote and two one-liners.
7. The objection FAQ. Not the SEO FAQ — the sales FAQ, written from real sales calls. "What happens to my data if we leave?" "Who owns the design files?" Each answer ends with forward motion, not a shrug. If you don't have sales-call recordings yet, use search-console queries and support tickets; the objections are in your inbox already.
8. The alternatives table. "Us vs the old way" — the spreadsheet, the agency retainer, the incumbent. Buyers are going to make this comparison in a doc you can't see; making it for them, honestly (including where the alternative genuinely wins), converts better than pretending the comparison doesn't exist. This section is uncomfortable for proud teams and consistently one of the highest-scroll-depth, highest-correlation-with-conversion sections we ship.
9. The CTA ladder. The page ends with three rungs, not one: the primary action, the low-commitment version ("see a 3-minute tour"), and the capture ("get the pricing breakdown"). Different visitors are at different temperatures; a single CTA only serves the hottest. And the footer of a landing page is a compressed sitemap, not the full site nav — this page has one job, remember.
Applied: three fictional pages, three different bends
Hearthbrew Coffee — subscription clubs landing page. Consumer product, low price point, warm impulse purchase. The skeleton compresses: sections 2 and 9 merge (the friction kill is the CTA ladder: "pause or cancel any month, first box half price"), proof is almost entirely people over numbers, and the demo moment is a box-building interaction rather than a screen capture. The alternatives table becomes "why not just buy bags" — honest answer included: "if you already know your favourite roaster, keep them." Full story in the Hearthbrew subscription case study. Conversion anatomy here is 60% warmth and specificity, 40% structure.
Northwind Ledger — "close the books faster" campaign page. B2B, high consideration, skeptical buyer who has been burned by software promises. The skeleton expands: proof stack one doubles (numbers from two segments), the FAQ grows to eight entries written directly from sales-call transcripts, and the demo moment moves up the page — position 3 rather than 5 — because for this audience, seeing the reconciliation interface is the promise. Notice what didn't change: single-column narrative order, one primary CTA, objections answered in the sequence they're felt. The Northwind Ledger dashboard rebuild shows the product this page sold.
GLADE — ingredient-transparency skincare launch. Category-creation problem: visitors don't know the thing exists, so the promise section can't assume desire. Section 1 becomes a reveal ("every ingredient, its source, and why it's there — on the label and the page"), the mechanism section teaches the category before selling the product, and the demo moment is the ingredient-explorer interaction itself. The GLADE case study has the full breakdown. Number-led proof barely appears — the audience distrusts beauty marketing numbers — and the alternatives table compares against "the usual label, magnifying glass not included."
Same skeleton, three different emphases. What never bends: one conversion per page, objections in felt order, proof that's specific, and a page that ends with a ladder instead of a cliff.
Measuring the anatomy
You can instrument habit. Our starter measurement set for any landing page:
- Scroll-depth distribution by section — which section loses the crowd. A cliff after section 1 means your promise is weak or your friction kill is answering the wrong question.
- CTA click-through by rung — if 80% of conversions come from rung two, your page is over-asking; shorten the commitment of the primary.
- Time-to-first-scroll — under two seconds on average and the hero isn't landing; visitors bounce from indifference, not disagreement.
- FAQ engagement mapped to source objections — unanswered-objection rates predict churn better than click-through does.
One warning from the growth side of the house: don't A/B test your way to local maxima on a broken skeleton. Tests optimise the order of sections on a page whose strategy is wrong with remarkable efficiency. Get the anatomy right in research, then test within it.
The checklist we ship
- One conversion. Named, in a doc, before design starts.
- The promise names the category and the outcome in one sentence.
- The friction kill answers the first objection below the fold, not in the hero.
- The mechanism is three steps and a mental model, not a feature list.
- Every number has a source and a timeframe.
- There is a demo moment — the page shows the thing at least once.
- The FAQ is written from sales calls and support tickets, not marketing imagination.
- The alternatives table exists and concedes something real.
- The page ends with a three-rung CTA ladder.
Drop any one of these and the page still ships — landing pages are forgiving like that. Drop three and you're buying traffic to warm up somebody else's customer.
Key takeaways
- Landing-page anatomy is objection sequence: sections are ordered by what the visitor doubts next, not by variety.
- The friction kill — setup cost, cancellation, price floor — sits directly under the promise and is the most commonly missing section.
- Proof comes in two stacks, numbers before people, and specificity beats celebrity in both.
- Every page needs a demo moment where it stops telling and starts showing.
- End with a three-rung CTA ladder, never one cliff-edge button.
- The skeleton bends by audience (impulse vs skeptical vs category-creation) but never on its four non-negotiables: one conversion, felt-order objections, specific proof, shown-not-told.
Frequently asked questions
How long should a landing page be?
As long as the objection list. A $19 coffee subscription needs four sections; a $40k agency engagement needs all nine plus a contact route. Length is an outcome of research, not a target.
Should the main nav stay on landing pages?
For paid-traffic pages, collapse it to a logo and one escape hatch — every exit that isn't the CTA is a conversion leak. For organic pages the full nav can stay, but the above-the-fold CTA hierarchy still applies.
Video or interactive for the demo moment?
Interactive wins when the product is genuinely interactive and can be sliced small without FakeDoor dishonesty. Short muted looping video wins for everything else. Autoplay audio loses always.
How many CTAs is too many?
Any number of instances is fine — repeating the primary after major sections is correct. What must stay at one is the number of distinct primary actions. Three rungs, one top rung.
Do we really need the alternatives table?
If buyers can name the alternative, yes — you're in the comparison whether you show up or not, and honest concessions are the most persuasive copy on the page. Skip it only when the category is genuinely new, as with GLADE at launch.
Bento grids: when the box layout earns its keep
A fair assessment of bento layouts: what they do well, where they collapse, span systems that survive real CMS data, and typography rules for mixed-size tiles.
About pages that actually convince
Your About page is where buyers go to decide if they trust you. The story structure, proof layers and honesty rules that turn biography wallpaper into conviction.
The highest-traffic UI nobody designs: forms
Forms are the most-used, least-designed UI on the web. A practitioner's guide to labels, validation timing, error copy, autofill and mobile keyboards.