Skip to main content
Each block below is self-contained. Copy the ones you want into your page in whatever order fits, skip the ones you don’t, and duplicate any block you need more than once. Replace every greyed E.g. line with your own copy. The tables are a rough wireframe, so [ IMG ] and [ BUTTON ] mark where visual elements sit and the text cells are where your copy goes. Each block has a concept review dropdown that explains what the block is for so you can decide whether you need it.
Only the hero and one call to action are load-bearing on almost every page. Everything else is a block you add when it earns its place. Build your page by picking blocks from the library, arranging them, and filling in the copy. A suggested default order is at the bottom if you want a starting point.
Examples throughout use Doughnut Labs, a company that sells Doughnut Technology, so you can see one filled-in version of each block.
1

Pick your blocks

Skim the library and choose the blocks this page needs. Most pages use six to nine.
2

Arrange them

Put the blocks in the order a visitor should read them. Use the default order at the bottom as a starting point, then move blocks around.
3

Fill in the copy

Replace the greyed examples in each block you kept. Duplicate any block you need more than once, and use the blank block template to add anything the library doesn’t cover.

​
The blocks

Each block lists its layout so you can picture where it sits on the page. Full-width blocks span the page; split blocks put an image on one side and copy on the other, and you flip the side to alternate down the page.

​
Hero

Layout: full width, first screen. One headline, one subhead, one button, one big image.
The hero is the first screen a visitor sees, and most people decide within a few seconds whether the page is for them. It carries the headline, a supporting subhead, one call to action, and usually one large image. The job is to answer “is this for me, and what do I get” before anyone scrolls.This is the one block nearly every page keeps. Teams handle the image differently: some use a product screenshot so the visitor sees the real thing, others use a person or a scene to set a mood. The headline does the heaviest lifting, since a visitor who does not connect with it rarely reads the rest.

​
Social proof bar

Layout: full width, thin strip. Logos, a rating, or a customer count.
This strip gives a visitor a reason to trust the page before they have read much. Logos, a star rating, a customer count, or a certification all work by showing that other people already rely on the product.It tends to help most placed high, close to the hero, where it reduces the sense of risk while the visitor is still deciding whether to read on. What goes here depends on what you have and what your audience finds credible: recognizable logos carry weight with some buyers, a hard number or a security badge with others.

​
Brands that use us

Layout: full width. A dedicated logo wall, larger than the proof bar.
A logo wall makes one point: companies a visitor recognizes already trust this product. It is the proof bar’s bigger sibling, given its own block so the logos have room to land.This block does the most work when the names carry weight with the specific audience. A logo the visitor recognizes as a peer, a competitor, or an aspirational brand reassures them more than a longer list of names they have never heard of. It rests entirely on having permission to show each brand.

​
Benefit (split: image one side, text the other)

Layout: split. Image on one side, heading and body on the other. Flip the side each time you use this block so the layout alternates. Image left, text right: Image right, text left (the flip):
A benefit block pairs one image with one short piece of copy to make a single point about what the product does for the visitor. Most pages use two or three, each making a different point, with the strongest one first.Flipping the image and text sides between blocks breaks the monotony of stacked identical rows and keeps the eye moving. One thing to know: the two sides stack into a single column on a phone, so whichever element you put first still has to make sense read top to bottom. A benefit block sells what the visitor gets out of the product. That usually traces back to a feature, but the copy leads with the payoff to the reader.

​
How it works

Layout: full width. A few short steps showing how simple it is to start.
This block breaks the product into a few plain steps so a visitor can picture using it. Three steps is common because it feels achievable; a longer list can make the product look like more work than it is.The value is in reducing the sense of effort. A visitor who can see the whole path from start to result is closer to believing they could do it themselves. Steps that name the action a person takes, in plain terms, tend to read as simpler than ones that describe the mechanics underneath.

​
Reviews and testimonials

Layout: full width. One to three quotes from named customers, ideally with a face.
A testimonial block puts the claim in a customer’s own words, which reads as more credible than the same point made by the company. A quote, a name, a title, and a photo together make the endorsement feel like it came from a real person.A specific quote about a specific result tends to persuade more than general praise, since a visitor can picture the same outcome for themselves. The photo matters more than it seems: a human face raises trust in the words next to it. Every quote needs the customer’s permission to use.

​
Objections and FAQ

Layout: full width. The handful of doubts that stop people, each answered in a line.
This block collects the doubts most likely to stop a visitor and answers each one plainly. Placed lower on the page, it catches the hesitations that surface once someone is interested but not yet convinced.Which questions belong depends on the audience and where the traffic came from. A visitor who arrived ready to buy worries about different things than one still unsure they have the problem. The versions that work answer the real objection directly rather than dodging it, since a visitor who spots a dodge trusts the rest of the page less.

​
Comparison

Layout: full width. A table setting the product against alternatives, feature by feature.
A comparison block lays the product next to its alternatives so a visitor evaluating options can see the difference in one place. It works best for an audience already shopping around, who arrive with competitors in mind.The block is most persuasive when the rows are things the audience actually cares about, not a list picked to flatter the product. Naming competitors directly is a choice with tradeoffs: it can look confident and save the visitor research, or it can draw attention to rivals they had not considered. Where the product genuinely leads on the rows that matter, the comparison makes the case on its own.

​
Guarantee

Layout: full width, often right next to a button. The risk reversal. One line that removes the risk of trying: E.g. Try Doughnut Technology free for 30 days. If it does not ship your first batch faster, pay nothing.
A guarantee lowers the risk a visitor feels at the moment they are about to act. A free trial, a money-back window, or a no-card promise all shift some of the risk off the visitor and onto the company.It tends to land hardest right next to the call to action, where hesitation is strongest. How far it can go depends on the offer and what the business can stand behind. A guarantee only helps if it is real, since a promise the company will not honor does more damage than none at all.

​
Final call to action

Layout: full width, closing block. Restate the ask, one button, nothing else.
The final block gives the visitor who read the whole page a place to act without scrolling back up. It restates the main ask and repeats the same button from the hero, so the action is right there at the moment of decision.This block is deliberately bare. Every extra element is another way to leave the page, so the closing block keeps a single path forward. The headline usually returns to the core promise, so the last thing a visitor reads is the reason to click.

​
Blank block (add your own)

Layout: your choice. Use this template for anything the library doesn’t cover, like a pricing table, a video, or a feature grid.
No library covers every page. This template is here so a block you need but don’t see, a pricing table, an embedded video, a feature grid, an integrations list, still gets captured in the same shape as the rest: what it is, where it sits, and what copy it holds.Filling in the layout and elements gives design and dev the same information the built-in blocks carry, so a custom block is no harder to build than a standard one. If you find yourself adding the same custom block on every page, it is a sign the library is missing something worth adding permanently.

​
A suggested default order

If you want a starting arrangement, this order follows how a visitor typically reads a page. Treat it as a default to rearrange, not a rule.
1

Hero

The first screen, with the headline, offer, and main button.
2

Social proof bar or brands that use us

Early trust, right under the hero.
3

Benefit blocks

Two or three, alternating image sides, strongest benefit first.
4

How it works

The short path from start to result.
5

Reviews, comparison, or both

Deeper proof once the visitor is interested.
6

Objections and FAQ

The doubts that surface late.
7

Guarantee, then final call to action

Remove the risk, then repeat the ask.
Last modified on July 20, 2026