Section types for marketing sites and how to approach each. These are starting points, not templates — the layout is always informed by the copy and the feeling you're after. Give each section's carrier element its own lane and scale it to its rank (see design-principles → designed vs. assembled).
The first thing anyone sees. Job: communicate the core value and earn the scroll.
- Headline is the star — room and emphasis.
- Subheadline expands, doesn't repeat.
- One primary CTA, optionally one secondary (distinct treatment).
- The headline may be completed by a typed/animated second line — plan the copy for it, and size the headline down to make room.
- Prefer a hero visual that shows real work (a cycling stack of shipped items) over a static, decorative image.
- Hero motion runs once, then rests and pushes forward — catch, deliver, release, then let the CTA take over. Don't loop the hero forever; a perpetual loop competes with the action you want.
- Background treatment (gradient, texture, the motif) sets the mood for the whole page.
Builds credibility early. Logos, stats, or a quote.
- Logo marquees: decide whether they need to keep scrolling or can be static.
- Tight — it earns trust, it isn't a destination.
- Can bridge hero and first content section.
- One normalized trust lane: optical (not pixel) sizing, one color story, shared baseline, even gaps. Clients / investors / press are distinct beats — don't blend them.
Shows you understand the visitor before you pitch.
- The customer's language, not the company's.
- Questions, scenarios, or narrative.
- Acknowledge and move — don't linger.
Connects features to outcomes — "what that means for you," not "what it does."
- 3–5 benefits is the sweet spot.
- Each: one clear statement + supporting detail.
- Alternate layout (left-right-left) for rhythm.
- Icons/illustration support, never decorate.
Reduces perceived complexity.
- 3–4 steps max; each is a short title + one sentence.
- Sequential/numbered layout implies simplicity.
- A visual of the product in action can replace or supplement steps.
Capability showcase — one section or many.
- Individual features: alternate image/text for rhythm.
- Grids for many small features — but don't let them all look identical.
- Each feature connects to a benefit: "what" + "so what."
- Don't reuse the same icon for different concepts.
Social proof through customer voices — and breathing room in the pitch.
- Named, specific quotes beat anonymous praise; photo + name + title + company.
- One featured testimonial (large) vs. a grid of shorter ones.
Helps visitors choose.
- Make the recommended plan visually obvious.
- Address "which is right for me?" anxiety.
- Comparison table for 3+ plans.
- A CTA on every plan, not just the featured one.
The closing argument, near the bottom (sometimes mid-page too).
- Recap the core value.
- Risk reversal (free trial, guarantee, no card).
- High contrast with neighbors — this earns a dark/light flip.
- Single, clear action.
Handles the objections the page didn't.
- Real questions, not fluff disguised as questions.
- Concise answers; link out for depth.
- Accordion or open, by volume.
Navigation utility, not a showcase.
- Links secondary by default, primary on hover — hierarchy matters here too.
- Legal, social, newsletter if applicable.
- Clean and scannable.
Rhythm is what makes a page read as designed rather than assembled — and it's more than "don't repeat a layout."
- The column trio is the floor, not the range. 2-col / 3-col / left-right-left keeps a page from being monotonous, but it's still safe. When a stretch goes flat, reach for something unexpected: an offset overlap, a full-bleed visual, a broken or diagonal grid, an oversized number, a device shot bleeding off the edge, a section that inverts its own hierarchy.
- Vary the media, not just the columns. Alternate vector graphics, photography, icons, and illustration so no two sections feel built from the same kit. A page that's all icon-grids reads flat no matter how the columns change.
- Balance text with a visual. A text-only section that should carry an image reads as unfinished. Show the product in layered, overlapping mockups (device + card + a slightly rotated sticker, real depth) — not a flat screenshot.
- Demarcate sections so they don't blur. A run of alternating left-right-left-right feature rows reads as one section unless you separate them — give a group its own header, more vertical spacing between rows, and a reveal-on-scroll cue so the reader knows they've entered something new. Distinct features that sit too close read as a single tied-together block.
- Never the same layout for consecutive sections, and evaluate every section against what's above and below it.
- Give the page a pace: dense then spacious, detailed then simple. Dark/light transitions mark narrative shifts — not variety for its own sake.
- Consolidate: five thin sections are worse than three substantial ones.
- Study a page that builds pace well (e.g. conversionfactory.co) — watch how each section changes shape, media, and density from the one before.
The deepest source of rhythm isn't varying column counts; it's rotating through genuinely different section types, each a different medium, and never playing the same one twice in a row. A strong marketing page draws from a vocabulary like:
- Asymmetric hero — text to one side, a layered product mockup + a stat sticker to the other, over live motion (particles, gradient).
- Full-bleed human moment — a testimonial video or portrait, edge-to-edge, with a quote card overlaid. A face and motion, right after a UI-heavy beat, is a huge tonal shift.
- Illustration / contrast beat — a dark, neutral section carrying a brand illustration or a before/after.
- Aphorism — one idea, oversized, acres of air, on a textured ground.
- Pinned scroll-telling — a heading pins (
position: sticky) while statements cycle beneath it, each with an enormous ghost numeral behind and supporting copy swapping in. One signature device that earns several screen-heights and reads as craft. - Colored cards — product/ecosystem or case-study cards, each with its own accent and real imagery.
- Dramatic object reveal — a device or product rising out of darkness, spotlit.
- Carousel — testimonials or logos with real controls.
Rules that make the vocabulary cohere:
- Alternate the medium, not just the layout: UI mockup → human video → illustration → textured type → device photo → cards. Every few screens, the kind of thing on screen should change.
- Unify the variety with one through-line — a single background texture/motif and a strict color discipline — so wild section-to-section change still reads as one site.
- Scale contrast — giant ghost numerals or headings against small supporting copy; full-bleed faces against tight cards.
- Quiet between the loud — generous, textured space between the hits, so nothing feels crammed and each big moment lands.
- Motion is structural — reveals, pinning, particles, carousels are part of the rhythm, not decoration on top of it.
The failure mode to avoid: one instrument played the whole song — the same card/panel idiom repeated down the page with only the column count changing. That's tidy, but it's assembled, not designed.