Which of the two panels to reach for, every block in the builder, what it does, and the mistake people most often make with it. If you are staring at an empty page, skip to how to put a page together and come back here for the parts.
Two tabs at the top of the panel on the left. Start on Sections.
Sections are ready made. Each one is a finished piece of a page: designed, spaced, and already carrying your site's colours and type. Drop the ones your page needs in the order you want them, change the words and the pictures, and that page is done. Set and forget. They are Banner, What you offer, Numbers, The people, What people say, Photo gallery, Questions, Pricing table, Get in touch, Where to find us, Call to action, One piece of work, Text block and Latest posts, plus the Header, Menu and Footer that every page carries.
Blocks are for the detail work. They are the parts a section is built from, and you reach for them when a section is close but not quite right, or when a page needs something no ready-made piece covers. Five of them cover most of what people build: Card, Columns, Heading, Text, and then an Image or a Video. The rest of the list below is there for when you need it.
When one is exactly right, copy it. Every block has a copy button in the bar beside it. Styling one card and copying it three times is quicker than styling three cards, and they stay identical, which is the part that is hard to do by hand. The keyboard shortcuts page has the same thing without the mouse.
A band of colour running the full width of the page, holding blocks inside it.
Reach for it when. This is your main structural tool. A band says one idea has ended and another has started, without needing a heading to announce it.
Watch out for. More than about four on a page. When everything is banded, nothing is separated.
A framed box that holds other blocks.
Reach for it when. Setting one thing apart from the page around it: an offer, a quote, a person, a price.
Watch out for. Putting everything in cards. When every block has a frame, nothing is set apart.
Two or three things side by side.
Reach for it when. Comparing options, or setting a paragraph next to a photograph.
Watch out for. Putting long paragraphs in narrow columns. On a phone they stack into one column anyway, so check it there before you keep it.
The bar across the top with your name and the links to the rest of the site.
Reach for it when. Once, at the very top. It is the first thing a visitor reads and the thing they come back to when they are lost.
Watch out for. More than about five links. Past five, people stop reading the list and start guessing.
Your name or your mark on its own, without any navigation attached.
Reach for it when. When you want the name large somewhere in the middle of the page, or sitting quietly above the footer.
Watch out for. Using it instead of a Header. It looks similar and carries no navigation, so visitors have no way out of the page.
A section title. The everyday one, and most pages have five or six.
Reach for it when. To break the page into parts a visitor can scan. Somebody skimming reads only your headings, so each one should say what is underneath it.
Watch out for. Writing headings that sound clever instead of saying what follows. "What it costs" beats "Investment" every time.
The one big line at the top, with its words and letters arriving one at a time.
Reach for it when. Once, near the top, for the sentence you most want remembered. Pick the effect under Effect, and preview it before you keep it.
Watch out for. More than one on a page, and never for a paragraph. A whole paragraph animating letter by letter cannot be read, which is why the Text and Heading blocks do not offer it.
It plays when a visitor scrolls it into view, and it stands still for anyone whose device asks for reduced motion.
A paragraph.
Reach for it when. Three or four sentences at a time. Say what you do and who it is for, in the words a customer would use.
Watch out for. Long unbroken blocks. On a phone a six sentence paragraph is a wall, and walls get scrolled past.
One photograph, on its own.
Reach for it when. For the picture that carries a point. A real photograph of your real work beats a stock image of somebody else's every time.
Watch out for. Decorating with a photo that says nothing. If you cannot say what an image is doing there, the page is better without it.
A video clip.
Reach for it when. Short, muted, looping, as something to look at. That is what people actually watch on a page they have just landed on.
Watch out for. A long video near the top. Almost nobody presses play before they know what you do.
Vertical space.
Reach for it when. To give something room. Air around a line is what makes it read as important.
Watch out for. Using several in a row to push things around. If a gap needs three spacers, the block above it probably wants a Section band instead.
A line across the page.
Reach for it when. A quiet break between two ideas that belong to the same part of the page.
Watch out for. Using one where a Section band belongs. A line separates paragraphs; a band separates subjects.
The thing you want them to click, styled to look clickable.
Reach for it when. One main action per screenful. Write what happens next: "Book a first session" rather than "Submit".
Watch out for. Leaving the destination empty. A button with nowhere to go looks finished and does nothing, and the only symptom is a visitor who never gets in touch.
A button that sends someone to your payment link.
Reach for it when. When there is one clear thing to buy and you already have a payment page for it.
Watch out for. Using it as a general link. Visitors read it as a commitment to pay, so it should only ever lead to paying.
A grid of products with names and prices.
Reach for it when. A handful of items you want seen side by side.
Watch out for. Treating it as a shop. It shows products, it does not run a basket or take an order.
A grid of photographs.
Reach for it when. When the work is the argument. A photographer, a baker, a landscaper and a tattoo studio all sell from this block before they sell from any paragraph.
Watch out for. Filling empty slots with stock photos to make it look full. Six real photographs beat twelve borrowed ones.
Several groups of blocks, one shown at a time, with a tab for each.
Reach for it when. A menu with sections, a service with tiers, or a photo set split by year, where showing it all at once would be a wall.
Watch out for. Hiding the one thing they came for behind a tab. If everyone wants the prices, the prices are not a tab.
A row of icons that link to your accounts.
Reach for it when. When you post somewhere and want visitors to follow. Instagram for a studio, YouTube for a teacher.
Watch out for. Listing an account you have not touched in a year. An empty feed says more than a missing icon.
A search box for your own site.
Reach for it when. When the site has enough pages that a visitor might not find the right one from the menu.
Watch out for. A five-page site. A search box on a small site promises a depth that is not there.
Somebody else's page shown inside yours.
Reach for it when. A booking calendar, a form, a map from another service, a video host. Anything that already works somewhere else.
Watch out for. Embedding something slow above the fold. Your page waits for theirs, and the visitor blames you.
Your address, pinned on a map.
Reach for it when. If people physically come to you. Put it near your opening hours, because the two questions arrive together.
Watch out for. Adding it when you travel to customers instead. It quietly tells them to visit an address that is probably your house.
Your own markup, pasted in and shown in a sealed frame.
Reach for it when. For something we do not have a block for yet. Anything you paste runs in its own sandbox and cannot reach the rest of your page.
Watch out for. Pasting code you do not understand from a site you do not know. The sandbox protects your page; it cannot protect your visitors from what you chose to show them.
One product, with its picture, name and price.
Reach for it when. When a single item is the reason the page exists.
Watch out for. Repeating it five times. Five products want the Product catalog block.
Your plans or packages, side by side.
Reach for it when. When people choose between two or three options. Put the one most people should pick in the middle.
Watch out for. More than four columns. Past four, choosing gets harder rather than easier, and people leave instead of picking.
Almost every small business page wants these parts, roughly in this order. You do not need all of them, and a short honest page beats a long padded one. But if a page feels wrong and you cannot say why, it is usually because one of these is missing rather than because something needs restyling.
Say who you are and give them a way around. Your name, and three to five links. The Menu tile on the Sections tab shows the kinds of menu: one line, a dropdown, stacked, columns, a side drawer that slides in from the left or the right, or a full-screen menu.
Built from: Header, Menu
Is yours doing its job. A stranger should know what kind of business this is from the name and the links alone.
Say what you do, for whom, in one sentence. Then one line underneath with the detail, then the one thing you want them to do.
Built from: Title, Text, Button
Is yours doing its job. Cover everything below this and ask somebody what the business does. If they cannot answer, this part has not done its job yet, and nothing further down will rescue it.
Show the work before you explain it. Photographs of real jobs, real rooms, real food.
Built from: Gallery, Image, Columns
Is yours doing its job. Would this convince somebody who read none of the words.
The single most read part of any small business site. Say what you actually do and what it actually costs.
Built from: Heading, Text, Columns, Pricing
Is yours doing its job. Can somebody work out roughly what they will pay without emailing you. If not, most of them will not email you.
What happens after they get in touch. First a call, then a visit, then a quote. People hesitate because they do not know what they are agreeing to.
Built from: Heading, Columns, Section band
Is yours doing its job. Does it remove a reason to hesitate, or just describe your process to you.
Four or five real questions with straight answers. Parking, cancellation, how far you travel, how long it takes.
Built from: Heading, Text, Section band
Is yours doing its job. Are these the questions customers actually ask, or the ones that were easy to answer.
Hours and address if people come to you. The area you cover if you go to them. One or the other, not both.
Built from: Map, Text, Columns
Is yours doing its job. Somebody standing outside with a phone should be able to tell whether you are open.
A short, specific quote from a real person. Specific beats glowing: "came out on a Sunday" does more than "excellent service".
Built from: Text, Columns
Is yours doing its job. Is it real. If it is not, leave this out. An invented testimonial is the one mistake on this page with a real cost attached.
How to reach you, repeated at the end because this is where people are when they have decided.
Built from: Heading, Button, Text
Is yours doing its job. Is the method the one you actually answer. A form nobody checks is worse than a phone number.
Contact details, the smaller links, anything legal.
Built from: Footer
Is yours doing its job. Does it look like somebody is home.
The Custom HTML block takes your own markup for anything we do not cover yet. If you find yourself reaching for it often for the same thing, write to our contact form and say what it is. That is how the block list grows, and the ones people ask for get built first.