Builder basics

Take a tour of the page builder

What every panel, button and tab in the builder actually does.

Step 1 of 6
The canvas is the page

The large area in the middle is your page. What you see there is what visitors get, minus the small editing affordances.
Step 2 of 6
Left panel: your toolbox

Elements (all available blocks), Sections (pre-built page segments), Layers & Files (the page tree), CSS Classes, Asset Manager, Templates, SEO & sharing, Site-wide settings, and Keyboard Shortcuts.
Step 3 of 6
Right panel: styling

Select a block and the right panel shows its style controls - typography, spacing, colours, borders, background, and animation.
Step 4 of 6
Top bar: view and history

Switch between Desktop, Tablet and Mobile previews, zoom in and out, toggle the alignment grid, and use Undo / Redo. Save and Publish live on the right.
Step 5 of 6
Selecting things

Click a block to select it. Ctrl+click (Cmd on Mac) selects several at once. Double-click text to start editing it in place.
Step 6 of 6
Nesting

Sections, containers, rows, columns and grids can hold other blocks. Drop a block onto one of those and it becomes a child instead of a new top-level block.

Press and hold Space, then drag to pan the canvas - useful when you are zoomed in.
The Layers tab is the fastest way to reach a deeply nested block.

Related guides

The core loop of building a page: add a block, place it, reorder it, remove it.

Change any wording or image on the page without leaving the canvas.

Check and fix the phone and tablet layouts before you publish.

Ctrl + S	Save the page
Ctrl + Z	Undo
Ctrl + Shift + Z	Redo
Ctrl + C / V	Copy / paste selected blocks
Ctrl + D	Duplicate the selected block
Ctrl + A	Select all blocks

If not, the community and our support team are one click away.

All guides Contact us