Browse the docs

Build your own section

Build a section from headings, text, photos, buttons and layouts, arranged any way you like. It can sit above your header or stay on screen.

A section you build holds its own parts: headings, text, photos, videos, buttons, icons, quotes and lists, laid out in stacks, columns, grids, cards, words over a photo, a carousel, tabs or an accordion. It can also show live parts, like a price, your links, a map, your hours, a form or your next open times.

Tap or click any part to select it, then use its menu: Edit text, Add inside, Add below, Move up or down, Put inside (to group parts in a card or columns), Duplicate, Remove, and its colors and sizes. Text takes bold, italic, links and lists. The section’s panel lists every part in order: tap one to select it, or drag it to a new place on a computer. On a phone, use Move up and Move down.

Columns sit side by side on a computer and stack on a phone by themselves, so you don’t need a phone version. Your name, phone, address, hours and booking link can show live, so a change in your business details shows everywhere. Parts like these say “Shown in N places”.

Under Layout & visibility, choose where the section goes: in the page, or above your header for an announcement. Stays on screen keeps it at the top or bottom as visitors scroll, with a close button. Once a visitor closes it, it stays closed until you change its words. One section can stay at the top and one at the bottom.

You can also ask the assistant to build one: “add a three-step how it works section” or “put a closable bar at the bottom with our holiday hours”. It looks at your page on a phone and a computer before it suggests it.

For agents

A section you build is type "custom" with an element tree. Read element types, settings (JSON Schema), style keys and tree rules with website_catalog {kinds: ["elements"]}. Build with website_change page ops: insertSection {type: "custom", id} (starts as one stack, id "root"), then insertElement {section, parent, type, id, settings, style}, parents first; change with updateElement, setElementStyle, moveElement, duplicateElement, removeElement, wrapElements and unwrapElement. At most 4 levels and 200 elements a section. Show details live with settings.bind: {detail: name|phone|email|address|hours|bookingLink}, {field: headline|introduction|aboutTitle|about|serviceHeading|serviceIntro|contactTitle|bookingLabel}, {photo: n}, or {item: field} inside a list. Section settings: placement "flow" or "top", sticky "none", "top" or "bottom" (one per edge). Check with website_check and look with website_snapshot at 390 and 1280 before proposing.