Page builder basics
The parts of the page builder, the controls in each part, the keyboard shortcuts, and how saving works.
On this page
The page builder opens when you create or edit a page. This page lists its parts and controls.
Parts of the screen
| Part | Where | What it holds |
|---|---|---|
| Header bar | Top | Back, the page title field, Site settings, Preview, Save, Publish |
| Top bar | Above the canvas | Screen size buttons, Blocks on this page, live preview, block count, Blog, Design, Undo, Redo, Page |
| Library panel | Left | The Blocks tab, and the Assistant tab when the page assistant is set up |
| Canvas | Middle | The page itself |
| Settings panel | Right | The settings of the selected block, in three tabs |
Top bar controls
- Desktop, Tablet, Mobile preview. Switch the canvas width. A tooltip says where your edits apply: "Edits apply on every screen size", "Edits apply on tablets only" or "Edits apply on phones only".
- Blocks on this page. A list of the top-level blocks. Pick one to select it and scroll to it.
- Live preview. Shows the canvas as the live site renders it. Press it again to leave.
- Design. Copy a pre-designed block over the page, or switch the site's theme. See Templates and themes.
- Page. The page menu: Browse Pages, Create New Page, Apply mobile-friendly defaults, Copy all blocks, Paste blocks, Export page… and Page settings….
The library panel
The Blocks tab lists blocks in six groups: Basic, Form fields, Media, Layout, Advanced and Post. Drag a block onto the canvas to add it. A search box filters the list.
Below the groups:
- Templates lists this site's templates. Click one to add it to the page, linked.
- Pre-designed blocks lists ready-made block sets. Click one to copy its blocks to the end of the page.
Block toolbar
A selected block shows a toolbar on the canvas:
- Edit block: type straight on the canvas.
- Drag to reorder block: move it.
- Duplicate block and Delete block.
- AI: ask the page assistant about this block. Shown when the assistant is set up.
Block settings
The settings panel has three tabs:
- Content: what the block shows, such as text, pictures and links.
- Style: how it looks, such as spacing, colors, size and hover states.
- Advanced: less common options.
Keyboard shortcuts
| Keys | Action |
|---|---|
| Ctrl+Z | Undo |
| Ctrl+Shift+Z or Ctrl+Y | Redo |
| Ctrl+S | Save |
| Enter | Edit the selected block on the canvas |
| Esc | Stop editing, or clear the selection |
| Delete or Backspace | Delete the selected block |
| Ctrl+D | Duplicate the selected block |
| Ctrl+C | Copy the selected block |
| Ctrl+V | Paste copied blocks |
| Ctrl+J | Ask AI about the selected block |
On a Mac, use Command in place of Ctrl.
Page settings
Open Page, then Page settings…. The General tab has Title, Slug, Status, Homepage, Featured image, Allow Comments, Password Protection, Parent Page, Menu Order and the default icon set and size. The SEO tab has Meta Title, Meta Description, Description uses, Canonical URL, Hide from Search Engines and Custom Meta Tags. Press Save Settings.
How saving works
- Save writes your changes to the page. On a published page, visitors see the saved change on their next visit.
- Preview saves first, then opens the page in a new tab.
- Until you save, your edits are kept in this browser only. The browser warns you if you leave with unsaved changes.
- If someone else saved the page while you worked, your save is refused and the latest copy loads, with the message "Page changed elsewhere".