The Page Builder
Create pages, drag and arrange blocks, preview each screen size, and save and publish with the visual page builder.
The page builder is where you put pages together: drag blocks onto a canvas, edit them with live preview, and save.
Create a page
- Go to Admin → Pages and click New Page.
- Choose a page type:
- CMS Page — the visual block builder. This is what most pages use.
- HTML Page — paste or import raw HTML.
- TypeScript Page — hand-write a React
page.tsx(for developers).
- Enter a Title and Slug, then Create page. The builder opens.
To come back later, click Open builder on the page's row in the Pages list.
The builder at a glance
- Left — Add / Library. Add lists every block type; use Search blocks… or filter by category (Layout, Text, Media, Interactive, …). Library holds your saved reusable blocks. The Layers panel below shows the page's block tree.
- Middle — the canvas. Your page, as visitors will see it.
- Right — properties. Settings for the selected block.
- Top toolbar. Undo and redo, the Desktop / Tablet / Mobile views, Preview, Revision history, Translations, Save as Template and Use AI.
Add and arrange blocks
- Drag a block from Add onto the canvas, or into a container or column block to nest it. Nesting can go as deep as you like.
- Click a block to select it and edit its text, colors and spacing on the right. Changes preview instantly.
- Use Layers to select blocks that are hard to click, and to see how the page is nested.
- Container blocks offer Select All Children, handy for copying or deleting a whole group.
Different screen sizes
Switch between Desktop, Tablet (768px) and Mobile (390px) in the toolbar. Style changes made in the tablet or mobile view apply to that screen size only, so you can, for example, stack columns on phones without touching the desktop layout.
Canvas mode
The Canvas mode switch changes how blocks are positioned. Off (the default), blocks stack in normal page flow. On, you place blocks freely on a canvas. Both modes share the same blocks, palette and Layers panel.
Keyboard shortcuts
| Keys | Action |
|---|---|
| ⌘/Ctrl + S | Save |
| ⌘/Ctrl + Z | Undo |
| ⌘/Ctrl + Y, or ⇧⌘Z | Redo |
| ⌘/Ctrl + C / V | Copy / paste selected blocks |
| Delete or Backspace | Delete selected blocks |
| Esc | Clear the selection |
Save and publish
Save (or ⌘/Ctrl + S) stores your work and updates the live page. Each save is also kept in Revision history, so you can go back.
Whether visitors can see the page depends on its Status, set in Edit settings on the Pages list:
- Draft — only logged-in admins can see it.
- Completed — the page is published at its URL.
Tips
- Lock a block with the lock button in its properties to protect it from accidental edits.
- Use Preview to check the page without selection outlines.
- Build a section once, then save it to the Library to reuse it everywhere — see Reusable Blocks & Templates.