The anatomy, top to bottom
Here is the full set of components in their conventional order. The order is canonical but flexible: the hero comes first and the closing call to action comes last, while proof and risk reducers are best placed wherever the visitor's doubt arises. The shaded rows are the hero, the top zone covered in detail below.
Not every page uses all twelve. A clickthrough page drops the form; a simple opt-in might fold benefits and proof into a couple of tight blocks. The principle holds regardless: each component does one job toward the single goal, and anything that does not is clutter.
Why the order works
The sequence is not arbitrary. It mirrors the questions running through a visitor's head, answered in the order they ask them. The hero answers "what is this, and is it for me?" The benefits answer "what will I actually get?" The how-it-works block answers "how does the result happen?" Social proof answers "does this work for people like me?" The trust signals answer "what if it goes wrong?" And the closing call to action answers the last one, "fine, where do I click?" When you remove a component or scramble the order, you leave one of those questions hanging at the moment the visitor needs it answered, and an unanswered question at the decision point is a visitor who leaves. Read top to bottom, a good landing page is a conversation that stays one step ahead of the reader.
The hero section, up close
The hero is the top zone of the page, and it is the single most important part of the anatomy. For many visitors it is the only part they fully process before deciding whether to stay or leave, so it has to carry the whole promise on its own. Here is what it contains, in order.
The headline carries one extra burden worth calling out: message match. When a visitor arrives from an ad or email, the hero should echo the exact promise that brought them, ideally in the same words. Break that thread and the visitor feels they have landed in the wrong place and leaves. It is a measurable effect, not just a nicety: in one CXL case study, rewriting a landing page so its message matched the source produced about 21.7% more opt-ins. The headline is where that match is won or lost.
The quickest way to judge a hero is the five-second test, a simplification of usability testing: show someone the hero for five seconds, then ask "what is this, and what would you do next?" If they cannot answer both, the hero has failed, because that is roughly how people actually behave. They do not study a page, they glance and judge. If the value proposition and the action are not obvious at a glance, the rest of the anatomy never gets read.
Above the fold vs below the fold
Where each element sits matters as much as whether it is there. The fold, the line where the screen cuts off before scrolling, is not a hard rule, but attention is heavily weighted toward the top.
Nielsen Norman Group's eyetracking research found that users spend about 57% of their viewing time above the fold and roughly 74% within the first two screenfuls, with attention dropping off sharply below that. So the elements that have to be seen, the headline or value proposition, the hero visual, the primary call to action, and ideally one trust cue, belong above the fold, where they get the most attention. The supporting persuasion, the benefits, how-it-works, social proof, FAQ, and the closing call to action, goes below, where it serves a visitor who is already leaning in. People do scroll more than they once did, so the fold is not a wall to cram everything above. It is the zone the page uses to earn the scroll.
One practical wrinkle: there is no single fold. A phone screen shows far less than a desktop monitor, and since most landing page traffic is now mobile, the fold you should design for is the short one. That usually means a tighter hero on small screens, with the headline, a compact visual, and the call to action stacked so all three are visible before the visitor's thumb ever moves. If your hero only works on a wide desktop, most of your audience never sees it whole.
A related note on the hero visual: a relevant image that shows the offer almost always helps, but video is contested. A short, well-placed video can make the offer clearer, yet it can also lower conversion if it delays the message or pulls attention from the call to action. Use it when it genuinely explains the offer, and test it rather than assuming it lifts results.
A landing page, top to bottom
Here is the anatomy on the simplest possible page, a fitness coach's free-guide opt-in, so you can see every element earn its place even when the offer is just an email.
Hero. The headline states the value proposition: "Get lean in 20 minutes a day, no gym required." The subheadline qualifies it: "A free 7-day home-workout plan for busy parents who hate long sessions." The hero visual is a real photo of someone doing a short living-room workout, the after-state, rather than stock dumbbells. Beside it sits a one-field form, just an email, with a button reading "Send me the free plan," and under the button a trust cue: "Join [VERIFY: subscriber count] readers, and unsubscribe anytime."
Below the fold. A benefits block gives three outcome-led lines: train in 20 minutes, no equipment to buy, follow-along videos so you never wonder if you are doing it right. A how-it-works block lays out three steps: enter your email, get the plan and the day-one video, train tomorrow morning. Then social proof, two short testimonials with a name, a photo, and a concrete result (marked [REAL TESTIMONIAL NEEDED] until real ones are sourced), plus a small ratings strip. An FAQ answers the real hesitations: do I need equipment, how long are the workouts, what if I am a total beginner, is it really free. A one-line risk reducer follows: "It is free, and your email stays private." Finally a closing call to action restates the offer in its own band, with the same email field and button. A minimal footer carries only privacy, terms, and contact.
Every element on that page does one job, and the page asks for exactly one thing. That is the whole point of the anatomy: not to fill a template, but to give each visitor what they need, in the order they need it, to say yes.
Common mistakes to avoid
Most weak landing pages get the anatomy wrong in one of these ways. Check yours against the list.
No clear value proposition in the hero. The visitor cannot answer "what is this?" in five seconds because the hero leads with a clever line instead of the promise.
The primary CTA below the fold. The main action is buried in the zone that gets a fraction of the attention. The primary button belongs up top.
A decorative hero visual. Generic stock that adds no information, instead of a shot that shows the product or the outcome. The hero image should say something.
Missing or weak social proof. No testimonials, logos, or numbers, so the visitor has no reason to believe the claims on the page.
Clutter and too many elements. Competing messages, multiple offers, or wall-of-text sections dilute the single goal. Each block should do one job.
A dead end at the bottom. No closing call to action for the convinced scroller, or worse, a full navigation menu that hands them an exit. End the page in the action.
Build it in systeme.io
Every element, in a drag-and-drop builder
You do not have to assemble this anatomy from scratch. systeme.io's page builder gives you each block, hero, benefits, testimonials, FAQ, call to action, as a section you drag into place, with the form and checkout built in, on the free plan.
Next, the practices that make each element convert: landing page best practices, and the copy that fills them, how to write a sales page.
Frequently asked questions
The core anatomy, top to bottom, is the headline or unique value proposition, a subheadline, a hero visual, the primary call to action, a lead-capture form on lead-gen pages, a benefits section, a how-it-works block, social proof, an FAQ that handles objections, trust signals like a guarantee, a closing call to action, and a minimal footer. Fuller lists run to roughly 8 to 12 components, but every one of them exists to move the visitor toward the single goal.
Unbounce frames the minimum as five: a unique selling proposition (your one distinct promise), a hero shot (the visual of the offer), clear benefits (features reframed as outcomes), social proof (evidence others bought and were glad), and a single call to action. Strip a landing page to its bones and these five remain. Everything else in the anatomy strengthens that core.
The headline or value proposition, the hero visual, and the primary call to action, ideally with one trust cue such as a rating or a logo strip. Nielsen Norman Group's eyetracking found that users spend about 57% of their viewing time above the fold, so the most important elements have to live there. The detail, benefits, proof, and FAQ can sit below, where they support a decision the visitor is already leaning toward.
The hero is the top zone of the page, holding the headline or value proposition, a subheadline, the hero visual, and the primary call to action, and often the form on a lead-gen page. It is the single most important part of the anatomy, because for many visitors it is the only part they fully process before deciding whether to stay or leave. It should pass the five-second test: a visitor should grasp what this is and what to do next within five seconds.
It needs a relevant visual, image or video, that shows the offer or the outcome, not decorative filler. A good hero shot helps a visitor grasp the offer faster than text can and picture themselves using it. Video can help too, but it can also hurt conversion if it delays the message or pulls attention away from the call to action, so treat video as something to test rather than a guaranteed win.
As few as the offer requires. The minimum is the five essential elements; a typical page has 8 to 12 components. More sections are not better, because each one competes for attention with the single goal. The test for any section is simple: does it do a clear job in moving the visitor toward the one action? If not, cut it.
The unique selling proposition is your one distinct promise: a statement of what the offer is and why someone should choose it over the alternatives. It anchors the headline and sets the expectation for the whole page. A classic example is Domino's old promise of fresh, hot pizza delivered in 30 minutes or less, or it is free, which states the offer and the reason to choose it in a single line.
Only if the goal is to capture a lead. Clickthrough landing pages use a button to send visitors onward, for example to a checkout, while lead-gen pages use a form to collect contact details. When you do use a form, keep the fields to the minimum the offer requires. HubSpot's analysis of more than 40,000 landing pages found that conversion declines as fields rise, and that fields like extra dropdowns, age, phone number, and street-level location drag it down the most.