Building sites
The page builder
The builder edits the real page. The canvas in the middle is the page as the core renders it, with your theme, in an iframe; when you change something the core renders it again, so what you see is what the site will serve. Open it from Content, or from the quick actions on the live site.
The workbench
- Outline (left) shows the page as a tree of sections, columns and widgets. Click a row to select it and scroll to it, hover to outline it on the canvas, or delete it from the tree.
- Add (left, or press
/) lists section layouts (Section, 2 columns, 3 columns, Sidebar, Sidebar left, 4 columns) and widgets grouped as Basics, Site, Content and Modules, with a search box. Click a row to add it where the panel says, or drag it onto the canvas. - The canvas selects whatever you click. Hover between things for a
+that adds in place; shift-click to select several widgets. The tag above the selection moves it up or down, duplicates it, deletes it, or selects its column or section. - The inspector (right) edits the selection. A breadcrumb at the top climbs from a widget to its column, section and the page.
The header switches the canvas between Edit, Preview (the draft as a visitor sees it, with links and animations live) and Published (what the site serves now), between Desktop, Tablet and Phone widths, and between Light and Dark. Undo and redo keep the last 60 steps; quick edits to the same field collapse into one step.
Preview and Published show the page whole: inside the site's header and footer (the ones this page would get), with whatever modules and extensions add to <head>, in a window the height of the screen, with the page address and an "Open in a new tab" link above it. Tablet and Phone draw the page in a device frame at that width. A page or part is shown at the width you picked whichever mode you are in.
Light and Dark pin the canvas to one colour scheme, whatever the editor's own setting. The preview gets data-theme="light" or data-theme="dark" on <html>, and every @media (prefers-color-scheme: …) rule in the page's stylesheets is switched to match, so a theme's dark styles written either way show. A theme with no dark styles looks the same in both.
Tablet and Phone are layouts of their own. With the canvas on Tablet or Phone, the inspector's spacing and alignment controls (a section's padding, minimum height, column gap and where its columns line up; a column's width, alignment and padding; a widget's space above and below, alignment and whether it sits beside the next) change that screen size only, and the inspector says so. A control carrying a value of its own for the current size shows a dot beside it, with a reset that goes back to the desktop value. Content, colours and everything else change the page everywhere. In the document these live as tablet and mobile objects on a section's settings, a column's settings and a widget's layout, holding only the keys that differ (see the tables below).
| Keys | Does |
|---|---|
⌘Z, ⇧⌘Z | undo, redo |
⌘S | save |
⌘D | duplicate the selection |
⌫ or Delete | delete the selection |
/ | open Add |
| Esc | close Add or History, then clear the selection |
Sections
A section is a full-width band holding up to six columns. Its Layout, Columns, Background, Motion and "Anchor and code" groups edit these settings (the names are the keys in the document):
| Setting | Values |
|---|---|
padding | none, small, medium (default), large; the sizes are theme tokens |
contained | true (default) keeps the columns to the theme's content width; false runs them edge to edge |
min_height | a CSS length (50vh, 80vh, 100vh, 114px); content centres vertically in a tall section |
align_y | start, center, end, stretch (default): where columns line up, and where content sits in a tall section |
gap | a CSS length between columns, in place of the theme gutter |
max_width | a narrower content width for this section |
background, text_color | a theme colour name or any CSS colour |
background_image | a media library id (or a URL); covers the section, using the item's hero or large size |
background_position | center (default), top, bottom, or any CSS background position |
overlay | a colour laid over the background image, usually translucent (rgba(0,0,0,0.4)) |
split_color, split_at | a second background colour from the left edge of column split_at (1 to 11) to the right of the screen, on tablets and wider |
tablet, mobile | { padding, min_height, align_y, gap } that replace the values above on tablets (768 to 1023px) or phones (below 768px); min_height may be auto to drop the desktop minimum |
anchor | an HTML id, so #about links to the section |
classes | extra CSS classes |
animation | an entrance animation for the whole section (see Animations) |
custom | custom code (below) |
Theme colour names are primary, secondary, accent, background, surface, text and muted; the builder's colour lists offer these, and a document may hold any CSS colour instead.
Saved blocks
Any section can be kept as a block and placed on other pages. Select it and choose Save as block, give it a name and, if you like, a category ("Heroes", "Calls to action") to find it by later, and pick how it is placed:
- Synced: one shared section. Every page that places it shows the block's published revision, so publishing a change to the block changes all of them at once. On a page a synced block is selected, moved, duplicated and removed as a whole; its content is edited on the block itself (Edit the block in the inspector). Detach turns it into the page's own copy, which stops following the block. Saving a synced block can swap the section you saved it from for the block, so that page stays in step too.
- Copy: a starting point. Placing it copies its section into the page, where it is the page's own to change; later edits to the block only affect new placements.
Place a block from the Add list: it shows the most recent few under "Recent blocks", searching matches names, categories, the block's text and the widgets it uses, and Browse opens every block with previews. A block can also be dragged from the list onto the page.
Blocks in the admin's navigation is the library: search, filter by category and kind, sort by recent change, name or use, and switch between thumbnails and a compact list. Opening a block shows where it is placed and lets you rename it, change its category, switch it between synced and copy, archive it or delete it. Only the first page of results is drawn, with more as you scroll, so a library of hundreds stays quick.
A block holds one section and can't hold another synced block. Saving and editing blocks needs edit_pages; publishing, archiving and deleting need publish_pages, since publishing a synced block changes live pages. A block placed anywhere can be archived but not deleted: it leaves the library and keeps showing where it is placed. Switching a synced block to copy leaves the pages that already place it in step; only new placements are copies.
Columns
Columns sit on a 12-unit grid: a width of 6 is half the row. Adding or duplicating a column shares the widths out evenly again; drag the Width slider to change one.
| Setting | Values |
|---|---|
width | 1 to 12, used from 768px up |
width_tablet | 1 to 12 on tablets (768 to 1023px); unset keeps the desktop width |
width_mobile | 1 to 12 on phones (below 768px); unset means full width |
hide | any of mobile, tablet, desktop |
align | left (default), center, right: aligns everything in the column |
align_y | start, center, end, stretch (default) within the row |
background, text_color | a theme colour name or CSS colour |
padding | none, small, medium, large inner padding |
rounded | true for rounded corners; with a background and padding this makes a card |
tablet, mobile | { align, align_y, padding } that replace the values above at that screen size |
#A section that places a synced block holds only a reference; its settings and columns are filled in from the block's published revision when the page is rendered:
{ "id": "cta", "block": { "id": "3a736469-7c4a-4583-970c-b685433f3ca9" }, "columns": [] }