# Page builder basics

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](/docs/building-pages/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".

## Next steps

- [Blocks overview](/docs/building-pages/blocks-overview).
- [Publishing and previews](/docs/building-pages/publishing-and-previews).
- [Menus, headers and footers](/docs/building-pages/menus-header-footer).