Landing Page Sections: 12 Sections and the Order That Works

A landing page works when each section does one job and the sections arrive in the order a visitor's questions do: what is this, can I trust it, how does it work, what does it cost, and what do I do next. The twelve sections below cover nearly every landing page you will build, from the nav and hero to pricing, FAQ, the closing call to action and the footer. Pick the ones your visitors need, put them in a sensible order, and cut the rest.

Key takeaways

• Every section should answer one question a visitor has. If it answers none, cut it.
• The hero promises, the middle of the page proves and explains, and the end answers doubts and asks again.
• Put proof early: a logo bar right after the hero is one of the cheapest trust signals there is.
• A SaaS page and a portfolio page use many of the same sections in a different order, because their visitors arrive with different questions.
• Name sections precisely. A hero, a statement and a CTA look similar but do different jobs.

The section names below follow the vocabulary MUUDS uses to sort real website sections, so you can open any of them in the section library and see how other sites handle it.

1. The nav

Its job: get people somewhere else, fast. The nav is the strip at the very top with your logo and a handful of links.

What to put in it: the logo (linking home), three to six links to the pages people actually look for (product, pricing, customers, docs), a sign-in link if you have accounts, and one primary button that matches the hero's main action.

Common mistakes: too many links, which turns the nav into a sitemap; two competing buttons of equal weight; and putting a headline in the nav. If the top strip carries a headline, it is really part of the hero, and should be designed as one.

2. The hero

Its job: tell visitors what this is and give them the first thing to do. The hero is the page's opening band: one dominant headline and an ask.

What to put in it: a headline that says what you do or what changes for the visitor, a supporting line of one or two sentences, a primary call to action, optionally a secondary one, and a visual that shows the product or the feeling.

Common mistakes: a clever headline that says nothing concrete, three buttons, and a visual that is pure decoration. Test it by covering everything but the headline: could a stranger guess what you sell? For layouts that work, see hero section layouts or browse real hero sections.

3. The logo bar

Its job: borrow credibility. A row of small company marks, usually monochrome, says "people like you already use this" at a glance.

What to put in it: five to eight logos of customers, partners or press, set in one colour at a consistent visual size, with an optional short line like "Trusted by teams at".

Common mistakes: full-colour logos that fight the page, marks of wildly different visual weight, and logos you do not have permission to use. If you show pictures instead of marks, you have built a gallery, not a logo bar.

4. The statement

Its job: declare something, and ask nothing. A statement is a band with a big sentence and no button or field.

What to put in it: one strong sentence about your point of view, the problem you exist to solve, or what you believe. Large type, lots of space.

Common mistakes: filler slogans ("We help businesses grow") and sneaking a button in. Once a band asks for a click, it is a hero if it opens the page or a CTA if it comes later. Statements earn their place on brand pages and as a pause between dense sections; on a short SaaS page they are often the first thing to cut.

5. Features: one at a time, or as a grid

Its job: explain what the product does and why it matters. There are two shapes:

• A feature section explains one capability: a heading, an explanation, one supporting image. Several of these alternating left and right is a classic layout.
• A feature grid shows three or more repeating, text-led cards, each with its own small heading.

What to put in it: benefits first, mechanics second. "Find any file in a second" beats "Full-text indexing". Use real product screenshots for single features and small icons or illustrations for grid cards.

Common mistakes: a grid of twelve vague features, feature names nobody outside your team understands, and screenshots too small to read. Use single feature sections for the three things that sell the product and a feature grid for the long tail.

6. Showcase and gallery

Its job: show the work. These are the visual heart of portfolios, agencies, templates and marketplaces.

• A showcase presents named pieces of work, each identified and usually clickable: case studies, projects, templates.
• A gallery shows images as images, with no per-image name or link: product photography, moments, atmosphere.

What to put in it: for a showcase, your strongest four to eight pieces, each with a name and a one-line description. For a gallery, a tight edit of images that share a treatment.

Common mistakes: showing everything instead of the best, mixing image styles so the grid looks accidental, and a showcase whose items cannot be opened. If visitors want to know more about a piece and cannot, the section is frustrating rather than persuasive.

7. Stats

Its job: let the numbers speak. A stats section shows large figures with short labels, where the numbers themselves are the content.

What to put in it: three or four figures that are true, specific and meaningful to the visitor: customers served, uptime, time saved, countries. Each with a short label.

Common mistakes: vanity numbers nobody cares about, rounded figures so vague they feel made up, and more than four stats in a row. If a number needs a paragraph of explanation, it belongs in a feature section instead.

8. Testimonials

Its job: let somebody else vouch for you, in quoted words with a name attached.

What to put in it: short, specific quotes from real customers, each with a name, role, company and ideally a photo. One great quote with a face often beats a carousel of twelve.

Common mistakes: generic praise ("Great product!"), anonymous quotes, and carousels that hide the best ones. Praise written in your own voice is not a testimonial; it is a statement, and visitors can tell the difference.

9. Comparison

Its job: help people choose. A comparison sets two or more named things side by side against the same criteria: your product against the old way, against a competitor category, or two of your own products.

What to put in it: a short list of criteria the visitor actually cares about, clear yes, no or values in each cell, and honest framing.

Common mistakes: criteria chosen only because you win them, which savvy visitors spot instantly, and tables too wide for a phone. If what you are comparing is tiers of one product with prices, that is a pricing section.

10. Pricing

Its job: answer "what will this cost me?" with plans that each have a number and a button.

What to put in it: two to four plans, a clear price for each, who each plan is for, the key differences, and one highlighted recommended plan. A monthly or yearly toggle if you offer both.

Common mistakes: hiding the price behind "Contact us" on every tier, listing forty features per plan so the differences vanish, and plans with names that mean nothing. Feature lists with no prices are a feature grid, not pricing. Browse pricing sections to see how clearer sites handle tiers.

11. FAQ

Its job: answer the doubts that stop people acting. Questions with answers, usually collapsible.

What to put in it: five to ten questions people really ask: about price, cancellation, security, setup time, integrations, refunds. Short, direct answers.

Common mistakes: questions nobody asks, written as disguised marketing ("Why is our product the best?"), and answers that link away instead of answering. A good FAQ also helps search: well written questions match what people type into search engines.

12. The CTA and the footer

The CTA's job: ask again, once the visitor has seen enough. A CTA is a later band that exists only to ask.

What to put in it: a short headline that restates the outcome, the same primary action as the hero, and optionally a reassurance line (free trial length, no card required, cancel any time, whatever is true for you).

The footer's job: catch everyone who scrolled to the end. The last band: columns of links, legal text and marks.

What to put in it: links grouped by topic, contact details, social links, legal pages, and optionally a newsletter field.

Common mistakes: a CTA with a different action from the hero, which splits attention, and a footer so cluttered nobody can find the privacy policy. The footer is the nav's longer twin; it should feel like the same site.

The order that works for a SaaS page

A SaaS visitor arrives asking "what is it?", then "does it work for people like me?", then "how?", then "how much?", then "what's the catch?". The order follows those questions:

1. Nav
2. Hero
3. Logo bar
4. Feature (two or three, one capability each)
5. Feature grid
6. Testimonials
7. Stats
8. Comparison (if buyers weigh alternatives)
9. Pricing
10. FAQ
11. CTA
12. Footer

Proof is spread out on purpose. The logo bar comes right after the hero for instant trust, and testimonials come after the features, when the visitor has a sense of what people are praising.

The order that works for a portfolio or brand page

A portfolio or brand visitor arrives asking "who are you?" and "is your work any good?". The work itself is the argument, so it moves up and the selling sections shrink:

1. Nav
2. Hero
3. Showcase
4. Statement
5. Gallery
6. Testimonials
7. Logo bar (clients)
8. CTA
9. Footer

Pricing and FAQ are often absent here, or moved to their own pages. The statement does more work on a brand page because point of view is part of what is being chosen.

In short

Treat each section as an answer to one question, keep the ones your visitors actually ask, and order them from promise to proof to explanation to reassurance to the final ask. If you want a head start on the build, blocks gives you ready-made sections with phone layouts that you can copy as code and adapt to your own content.