Add sections
What a section is, and how to add, hide, duplicate, delete, reorder, and restyle the building blocks of your page.
Do this
- Open the page in the editor.
- Press Add section where you want the new block, or Add section above / Add section below on a section you already have.
- Search for what you want ("reviews", "prices") or browse the full list. Searching costs nothing. If nothing fits, press Find it with AI and we suggest a block from your description.
- Pick a block. It lands on the page with your own colours and fonts already applied, ready for your words.
What happens next: the section is on your draft only. Visitors see nothing until you publish, so you can add, try and delete freely.
What a section is
Your website is built from sections - ready-made building blocks stacked on top of each other. "Services", "Reviews", and "Contact" are each a section. You arrange these blocks to build a page; you never start from nothing.
What you can do with a section
For any section, you can:
- Add a new one from the complete block catalogue. Search by what you want, or open the full list. Blocks that need the Advanced editor or website import stay visible and explain what is required.
- Hide it - keep it but take it off the live page - or show it again.
- Duplicate it to reuse the same layout.
- Delete it when you don't need it.
- Reorder it - move it up or down the page.
- Change its layout - pick a different arrangement of the same content. The thumbnails show your own text, photos, fonts, and colours so you can see the real result before you save. Your text comes along: changing layout never deletes anything, so if you switch back it is all still there. If the new layout has a field your old one did not, we fill it in and mark it, so you can read it through and make it yours.
- More layouts - we show the six that suit your style best. If there are more, the button under the tiles says how many, such as Show 4 more. Press Show fewer to fold them away again.
- Try another - press Try another to get a layout that already fits the text you have. Press it again for the next one, and use undo to step back.
- Adjust the look - some layouts offer a small set of choices, such as whether the block sits on a card. Choose the photo side together with the layout.
- Save this block - hover the layout tile that is selected and press the bookmark in its name row. The block is kept in your account and use it again on any of your websites. It is a frozen copy of the content, images and appearance, including Advanced editor layout and part styles, so later edits here do not change what you saved.
- Change its colour tone - make a section lighter or darker.
- Hide or remove parts - click the part you want to change. Optional text and buttons get Hide. Images get both Hide and Remove directly on the image.
To move a section, use the up and down arrows on it. Dragging blocks around the page is switched off on purpose, so nothing moves by accident.
Advanced editor: style a part
After you turn on Advanced editor under Account settings → Experimental features, the left column gains three tabs: Pages, Layers and Assets. Pages holds only your pages, folders and collections. Layers is where the current page's sections and their parts live. Pick a section, then a part such as its heading, body, card or button. Layers shows the selected section on its own so the row you are working on is never buried in a long list; Show all brings the rest back. Assets gathers everything you reuse: named styles, the website's colours and typography, your images and your saved sections. On desktop the full Style inspector stays on the right; on tablet and phone it opens as a full-height panel. It leads with whatever you selected, showing that part's properties first, and every row says where its value comes from: a blue dot means you set it here, a link glyph means it comes from a named style. Every section lists the parts it really has: a heading, a lede, a small label, the title and text of a repeated card, an FAQ answer, a photo, and on the sections built from repeated items the grid (the space between them and how they line up) and the card (the air inside one). It lists nothing it does not have: a gallery has no lede to style, and an imported block has no parts at all and says so. You only see controls the layout you picked can actually use. A picture band that is sized by height rather than by a shape offers no aspect-ratio control, instead of offering one that does nothing. There you can set bounded typography, spacing, responsive and hover styles, motion, named styles, layout, reuse and validated JSON without adding unsafe CSS or code. Use its Site tab for shared colours, typography, buttons and design tokens. Press Cmd/Ctrl+K and type a section name to open the add picker on that exact section, or choose Saved sections to insert an independent copy. Desktop Preview also has Compare for inert desktop, tablet and phone views side by side. Turning Advanced editor off restores the ordinary Pages, Appearance and Images view.
Common sections, and when to use each
- Introduction - Top of the page, the first thing visitors see. Use once per page to say who you are and what to do next.
- Services - List what you offer as a few cards, so visitors instantly see what you do.
- Reviews - Show what customers say, to build trust before you ask people to get in touch.
- About - Tell your story and build trust in who's behind the business.
- Opening hours - Show your weekly hours, for places people visit.
- Contact - A contact form plus your details, so visitors can reach you. If the same page already has a quote guide, Contact keeps the useful details but does not show a second competing form.
- FAQ - Answer common questions, to cut down on repeated calls and emails.
- Gallery - Show photos of your work or your space.
- Image - One photo on its own. Pick Full width if you want it edge to edge with no margins, filling the whole view.
Change a card's icon
Service cards, steps, price packages and a few other cards carry a small icon. If it is wrong, say a clock on "Houseplants", change it yourself:
- Click the card in the editor. The panel opens with that card's content.
- Under Icon you get the six icons that fit this card, picked from what the card says and what your business does. Press one to swap it.
- If none of the six is right, press Show all icons and search. Type "tooth", "tyre" or "flower".
- Prefer the card with no picture at all? Press No icon. The card closes up neatly; there is no empty hole left behind.
The icon you have now always stays visible at the top, even when it is not one of the six, so you can see what the card shows today.
The phone, email and map pin on the contact section cannot be changed. There the picture is part of what the row does: a handset means "call us". The website looks after it for you.
Change opening hours
- Open the page in the editor and go to the Opening hours section.
- Toggle open/closed and choose the times directly on the page. Add the section first if it is missing.
- Check the mobile preview and press Publish when the new hours should be visible to visitors.
Next steps
- Edit text - change the words in any section.
- Replace images - swap the pictures.
- Appearance & brand - colours, fonts, and logo.
Didn't find the answer, or is something wrong here? Tell us.
Last updated on