Editor Overview
Understand the visual editor layout, toolbars, panels, and how to navigate between pages.
The Visual Editor is the design workspace where you build and edit your website. It combines a live preview canvas with side control panels, enabling you to inspect the page hierarchy, apply themes, and configure settings.
Open the editor by clicking Edit site on a site card to open the Site Details page, then click the Open Editor button in the top-right corner. From there, click a page's name in the page list to open it in the editor.
The Edit option in a page's three-dot menu opens that page's Settings dialog (name, slug, background, layout) — it doesn't open the visual editor. Click the page name itself to start editing its content.
Editor Layout
The editor interface is divided into five functional areas:
┌──────────────────────────────────────────────────────┐
│ Top Toolbar │
├────────────┬─────────────────────────┬───────────────┤
│ │ │ │
│ Left │ Canvas │ Right │
│ Sidebar │ (live preview) │ Sidebar │
│ │ │ │
│ (Layers, │ │ (Properties, │
│ Library) │ │ Styles) │
└────────────┴─────────────────────────┴───────────────┘
│ Bottom Toolbar │
└──────────────────────────────────────────────────────┘The Bottom Toolbar floats over the canvas rather than docking full-width, and it's hidden entirely while you're in Preview Mode.
Top Toolbar
The Top Toolbar houses global site controls, view toggles, collaboration tools, and publication settings.
| Control | Description |
|---|---|
| Page Switcher | A dropdown to search your pages, switch between them, or create a new page with an auto-generated slug. |
| Device Switcher | Toggles the active canvas viewport between Desktop, Tablet, and Mobile sizes. |
| Undo / Redo | Reverts or re-applies canvas changes. Keyboard shortcuts Ctrl+Z / Ctrl+Shift+Z (Cmd on Mac). |
| Auto-Save Status | Shows Saved (green checkmark) or Saving... (loader) as changes sync. If a save fails, a toast asks you to check your connection. |
| CMS | Opens the CMS data panel — three tabs for Collections, Variables, and APIs — where you manage collection data, site-wide global variables, and the API definitions used by Dynamic API blocks. |
| Collaborators | Shows up to five avatars of teammates currently editing this site, plus a +N overflow badge. |
| Share | An unlabeled + button that opens an invite dialog to add collaborators by email. |
| Preview | Opens a read-only preview of the page. Buttons, hover states, and scroll/entrance animations behave as they will live — but clicking a link is intentionally disabled so you don't navigate away while testing. |
| Publish | Opens the Publish dialog, where you choose what to deploy — the current Page, the shared Layout (header/footer), or the whole Site — before going live. See Saving & Publishing. |
| Sidebar Toggles | Collapses or expands the Left and Right sidebars to maximize your workspace. |
If AI features are enabled for your site, a Copilot chat bubble also floats over the canvas for AI-assisted edits.
Left Sidebar
The Left Sidebar is your resource panel. It is divided into four tabs:
1. Layers
A hierarchical tree representing all sections and blocks on the current page.
- Select: Click any layer to highlight it on the canvas and open its settings.
- Reorder: Drag elements up or down in the tree to move them on the page.
- Delete: Click the trash icon next to a block or section layer.
- Quick-Add: An empty section or column shows a + icon — click it to open a search menu and drop the first block directly inside it.
2. Sections
A library of prebuilt section templates across more than 20 categories — Hero, Feature, Pricing, Case Studies, and more. See Sections for the full list. Marketplace templates are tagged Free or Premium — see Templates for how those items work. Click a template to append it to the page.
3. Blocks
A collection of individual elements you can insert into the active section or column — see Blocks for the full catalog.
4. Assets
Your media library, split into Image, Video, and Document sub-tabs, with a source toggle to search Unsplash stock photos alongside your own uploads. Upload files here to add them to your library.
This panel manages your library — it doesn't swap images on the canvas directly. To replace an image, click the image itself on the canvas; that opens a picker where you can choose a library asset, search Unsplash, or upload something new.
Right Sidebar (Properties Panel)
The Right Sidebar adjusts dynamically depending on your active selection.
- When a Block is selected: it renders three tabs:
- Content: General settings (text copy, button link destinations, or image sources). Next to bindable fields, click the database icon to bind a global variable or a CMS collection field.
- Styles: Typography, colors, spacing (margins and paddings), border rounding, and box shadows.
- Motion: Entrance animations (Fade In/Up/Down/Left/Right, Zoom In/Out, Slide Up/Down, Bounce, Pulse — Text blocks add Typing, Shimmer, Word Fade, Char Fade, and Char Wave), duration and delay in milliseconds, an easing curve, a trigger (On Load, On Scroll, On Hover), and a repeat toggle.
- When a Section or Column is selected: a plain section or column shows a single settings panel with no tabs, grouped under a Section or Column heading. A preset (template) section instead shows two tabs — Section (layout, alignment, spacing) and Content (theme, background, dynamic list bindings). See Sections for the full field reference.
- When nothing is selected: The sidebar shows an empty state prompting you to select a block or section on the canvas.
Bottom Toolbar
The Bottom Toolbar contains canvas navigation tools, UI toggles, and page diagnostics.
| Control | Description |
|---|---|
| Select Tool (V) | The default tool for selecting, moving, and double-clicking elements. |
| Pan Tool (H) | Allows dragging and scrolling the canvas area freely without selecting elements. |
| Theme Toggle | Switches the editor interface between Light and Dark modes. |
| Zoom Controls | Scale the canvas from 10% to 300% using the +/- buttons or Ctrl/Cmd +/-. The dropdown offers quick presets from 25% to 200%. Click Reset (or Ctrl/Cmd 0) to snap back to 75%. |
| Diagnostics | Displays the current canvas width in pixels (e.g., 1440px, 768px, or 390px) and a running count of blocks on the page. |
With a block selected, Delete or Backspace removes it from the canvas.
Related
- Sections — Every section category, how to add one, and the full settings reference.
- Blocks — Every block type available in the editor and how to configure it.
- Saving & Publishing — Drafts vs. published versions, publish scopes, and version history.
- Templates — Where the Free/Premium marketplace templates in the Sections tab come from.