A landing page has one job: turn visitors from one campaign into one action. Good landing page structure does that by answering each question a visitor has, in the order they have it, until the only thing left to do is act.
The order barely changes between a free guide and a quote for a factory fit-out; what changes is how much each section says. Use this blueprint, wireframe and checklist to brief a designer or build the page yourself.
The short answer
A high-converting landing page usually has these sections, top to bottom:
- Hero: headline, supporting line and primary call to action, all visible on a phone without scrolling, plus a supporting visual.
- Problem and outcome: why the visitor is here, and what changes for them.
- How it works: the steps between saying yes and getting the result.
- Proof: evidence that your claims are true.
- Offer details: what they get, what it costs and what it involves.
- Objections and FAQ: the reasons people hesitate, answered.
- Final call to action and form: the ask repeated, with what happens next.
Keep one goal, remove the site navigation, and let the page grow as the price and commitment of the ask grow.
Before the sections: one audience, one action, one promise
Before you pick a landing page template, write three sentences:
- The audience: who arrives, and from where. “Facilities managers clicking a search ad for commercial solar” is useful; “businesses” is not.
- The action: the one thing you want them to do. If you can’t name one, you need two pages.
- The promise: what the ad, email or post said that made them click. The page has to keep it.
That last point is message match. It decides whether visitors stay long enough to read on, and on search campaigns it feeds landing page experience, one of the three components of Google Ads’ Quality Score. Not sure a campaign needs its own page? See landing page vs homepage vs service page.
Landing page structure, section by section
Each of the seven landing page sections has a question to answer. If a section doesn’t answer one your visitors actually ask, cut it.
1. Hero: “Am I in the right place, and what do I get?”
The hero is the only section every visitor sees. It needs:
- A headline that keeps the promise, naming the outcome in the visitor’s words.
- A supporting line with the specifics: what, how, how fast or at what price.
- One primary call to action, a verb plus an outcome (“Book a site survey”), never “Submit”.
- A supporting visual of the real thing: the product, the finished work, the guide’s cover.
A short line under the button, such as “Free, no obligation”, answers the last hesitation. Here is message match in practice:
| Where the click came from | Mismatched headline | Matched headline |
|---|---|---|
| Search ad for a fixed-price solar survey | Powering a brighter tomorrow | Commercial solar installation, starting with a fixed-price site survey |
| Email to existing customers | Exciting news from our team | Maintenance contracts for the equipment you already own |
Visible without scrolling on a phone. At 360 to 390 pixels wide, the headline, supporting line and button should fit on the first screen; the visual can go below. Watch for a tall image above the headline, a 15-word headline and cookie banners.
Form in the hero, or at the end? For small asks, like a download or webinar seat, put a short form in the hero. For bigger asks, have the hero button jump to a form at the end: most visitors need the sections in between first.
For the words, see how to write landing page copy; for making the headline and button what the eye lands on first, see visual hierarchy in web design.
2. Problem and outcome: “Do you understand my situation?”
Name the problem in customers’ words, then show what changes: for the solar page, unpredictable bills become a system sized to real consumption, with a payback estimate the board can approve. Leave out anything this audience doesn’t need; your website can hold it.
3. How it works: “What happens if I say yes?”
Unknowns stop people committing. Three to five numbered steps remove them: what the visitor does, what you do, what they get.
- Send your address and a recent electricity bill.
- We survey the site and model your consumption.
- You receive a fixed-price proposal with a payback estimate.
Add timings only if you can keep them.
4. Proof: “Why should I believe you?”
Place proof right after the claims it supports, and match it to the audience: a customer like the visitor beats a bigger name from another sector. Make it specific and checkable: a named testimonial about this offer, a result with a number and timeframe linked to the full story, logos and certifications you’re allowed to show, photos of real work.
A line of proof near the hero helps, but the main block belongs here. One claim that looks made up puts the rest in doubt; website credibility explains how people decide whom to trust.
5. Offer details: “What exactly do I get, and what will it cost me?”
Many landing pages skip this and leave visitors guessing. Spell out:
- What’s included, and what isn’t.
- The price, a starting price, or how the price is worked out.
- The practicalities: format, dates and time zone, turnaround, eligibility.
- The terms: cancellation, guarantees and what the form commits them to.
Deadlines and limited places are fine when they’re real. Invented ones add doubt just when you need trust.
6. Objections and FAQ: “What’s the catch?”
The usual suspects are price, risk, time, the effort of switching and “is this right for a business like mine?” Find the real ones in sales calls, chat logs and ad comments, and answer four to six briefly. If you use an accordion, keep the answers in the page’s HTML rather than loading them when opened.
7. Final call to action and form: “How do I go ahead?”
Restate the offer in one line, then add:
- The form, asking only what your first reply needs (web form design has the detail).
- What happens next: who replies, how and by when.
- Another route to the same action, such as a phone or messaging link: the same goal, not a second one.
- A link to your privacy notice beside the form.
The success message should confirm what happens next, and the GA4 key event should fire on a successful submission, not a button click (tracking enquiries in GA4). For button wording and placement, see call to action best practices.
An annotated landing page wireframe for phones
Plan the landing page layout on a phone first, where it’s hardest to get right:
| Zone | What it contains | Annotation |
|---|---|---|
| Top bar | Logo, plus a phone or messaging link if those count as conversions | No menu; slim, so the hero keeps its space |
| First screen | Headline, supporting line, primary button, trust line | Fits at 360 pixels wide; visual below the button |
| Sticky bar | The primary button, pinned to the bottom edge | Appears once the hero button scrolls away |
| Middle sections | Sections 2 to 6, in order | Headings that make sense on their own |
| Final call to action | One-line offer, form, what happens next | Where the hero button jumps to |
| Footer | Company details, privacy policy, legal information | No sitemap-style link lists |
On a desktop the order holds; the hero simply splits into text and visual side by side.
How long should a landing page be?
As long as it takes to answer the questions visitors have before they’ll say yes, and no longer. That depends on how big the ask is and how well they already know you.
| The ask | Examples | Length | Where the weight goes |
|---|---|---|---|
| Small | Free guide, webinar seat | Two or three phone screens | Hero with form, what’s inside, a line of proof |
| Medium | Consultation, demo | All seven sections, each brief | How it works, and the objections |
| Large | Quote for a major project | All seven sections, in full | Offer details, several kinds of proof, a thorough FAQ |
Short isn’t automatically better: a quote request on a three-screen page leaves questions unanswered, and those become lost enquiries.
Landing page UX essentials
One goal, no competing exits
Remove the main menu, footer link lists, social icons and blog links: every link that doesn’t lead to the goal is an exit. Repeating the same call to action is fine.
A layout people can scan
Write headings that make sense on their own, keep paragraphs short, give each section one idea, and separate sections with space rather than decoration. Body text needs a contrast ratio of at least 4.5:1, the WCAG 2.2 minimum for normal text.
Check it yourself. Read only the headings and buttons aloud. If the story doesn’t hold together, neither will the scan.
A sticky call to action on mobile
On a long page, a slim bar pinned to the bottom of the screen keeps the next step within thumb’s reach:
- Show it once the hero button scrolls away; hide it when the form is on screen.
- Never let it hide a link or field that has keyboard focus, the problem WCAG 2.2’s Focus Not Obscured (Minimum) criterion addresses.
- Make the button bigger than WCAG 2.2’s 24 by 24 CSS pixel minimum; Apple’s and Google’s design guidelines recommend larger targets.
A fast load on mobile data
Paid clicks that leave before the page appears are wasted spend. Google rates a Largest Contentful Paint of 2.5 seconds or less, Interaction to Next Paint of 200 milliseconds or less and Cumulative Layout Shift of 0.1 or less as good, at the 75th percentile of real visits.
The usual culprits are an oversized hero image (often the Largest Contentful Paint element, so never lazy-load it), background video and scripts added one campaign at a time. A new page rarely has enough visits for PageSpeed Insights to show real-user data for that URL (at best it shows your whole site’s), so rely on its lab test and a real phone on mobile data. See how page speed affects conversions.
Pre-launch checklist
After launch: let the data edit the page
A launch is the first draft. Check that key events match the enquiries your team receives, then look at where people stop scrolling. If the page underperforms, work through why your landing page isn’t converting and fold what you learn into the wider conversion rate optimisation cycle. With enough traffic, A/B testing landing pages can settle bigger questions, such as which offer wins.
What to do next
Structure is the skeleton. A page converts when the offer, the copy, a design that puts one action first, a fast build and reliable tracking work together, and when someone keeps improving it after launch.
If you have a campaign coming up, our landing page design service handles the design and build: one focused page in your brand, fast on phones, with the form working before the first click. See what’s included on our pricing page, or tell us about your campaign: who it’s for, what you’re offering and where the traffic will come from. We reply within one business day.