The Editor
The editor at a glance
Tour the main regions of the Webpress editor — the top bar, the left panel, the canvas, and the customizer — so you know where everything lives.
Last updated 2026-06-29
The Webpress editor is where you design your site. It's built around four regions: a top bar for actions, a left panel for content and structure, a canvas in the middle where you build, and a right panel for styling.
The top bar
Across the top you'll find your project name plus quick actions:
- Site Map — switch the canvas to a diagram of your pages and the links between them. See Managing pages.
- Outlines — toggle thin outlines around every element so you can see the structure while you work.
- Preview — see your page the way visitors will, with all the panels hidden.
- Fullscreen — expand the canvas to fill your screen.
- a quality score badge — a number from 0–100 from the built-in Auditor that checks your page for accessibility and SEO issues. Click it to see the details.
- Publish (or Update if you've published before) — opens the publishing settings. See Publishing your site.
The left panel
A row of icons runs down the left edge; clicking one opens its panel. The tabs are:
| Tab | What it holds |
|---|---|
| Blocks | The building blocks you drag onto the canvas — buttons, sections, cards, galleries, forms, and more. See The blocks library. |
| Layers | A tree of every element on the page. Click to select, drag to reorder, and toggle visibility or lock. See Layers & structure. |
| Pages | Add, duplicate, and manage your pages. See Managing pages. |
| Components | Your reusable symbols — design one element, reuse it everywhere. See Symbols. |
| Plugins | Browse and install plugins that add new blocks and features. See The plugin marketplace. |
| Quality Auditor | A live report of accessibility, SEO, and link issues on the page. See The auditor. |
| Images | Your image library — search and insert pictures you've uploaded. |
| Code | View the HTML and CSS of the selected element. |
| File Uploads | Upload images, fonts, and other files. See Images & media. |
| Brand Kit | Set your colors, fonts, and corner roundness once and every page follows. See Brand kit & design tokens. |
There's also a ✨ AI toggle that opens the AI assistant dock (see Building with the AI assistant), and at the bottom a ⚙ Settings (gear) icon that opens Project Settings for your domain, SEO, and advanced options (see Project settings).
The canvas
The canvas in the center is where your page lives. A few controls sit at its edges:
- the device selector (top-right) switches between Desktop, Tablet, and Mobile so you can check every screen size. See Responsive design.
- the zoom controls let you zoom in and out (roughly 25%–200%).
Click any element to select it, then drag blocks from the Blocks panel to drop them in place. Snap guides help you line things up.
The right panel (the customizer)
When you select an element, the right panel shows how to change it. It has two tabs:
- Customize — the styling controls. These come in a Simple mode (friendly, context-aware controls) and a Pro mode (full control over every CSS property). See Styling overview.
- Properties — settings specific to the element, like a link's destination or an image's alt text. See Component properties & traits.
Where to go next
Now that you know the layout, learn the core building loop in Adding and editing content.