Editor Overview

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. Alternatively, click the Edit button next to any page in the page list.

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                      │
└──────────────────────────────────────────────────────┘

Top Toolbar

The Top Toolbar houses global site controls, view toggles, collaboration tools, and publication settings.

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: Click the + (plus) icon next to a section layer to open a search menu and drop a block directly inside it.

2. Sections

A library of prebuilt section templates categorized by purpose (such as Heroes, Features, Pricing tables, CTAs, and Forms). Click a section template to append it to the page.

3. Blocks

A collection of individual elements (such as Headings, Images, Paragraphs, Buttons, Videos, and custom Form fields). Click any block to insert it into the active section or column.

4. Assets

Your media library. Upload images or documents here. Select images from this panel or click them to update selected image placeholders on the canvas.

Right Sidebar (Properties Panel)

The Right Sidebar adjusts dynamically depending on your active selection.

• When a Block is selected: It renders three customization tabs:
  1. Content: General settings (text copy, button link destinations, or image sources). Next to bindable content fields, click the database link icon to select global variables or CMS collection item fields.
  2. Styles: Typography, colors, spacing (margins and paddings), border rounding, and box shadows.
  3. Animations: Entrance transitions (e.g., Fade, Slide, Zoom, Bounce) along with duration, delay, easing, and trigger conditions (On Load, On Scroll, On Hover).
• When a Section or Column is selected: It renders two customization tabs:
  1. Section/Column: Layout alignment, labels, and column widths.
  2. Content/Theme: Theme presets, custom HSL palette overrides, background configurations (Solid colors, Gradients, or Image overlays), and dynamic list bindings.
• When nothing is selected: The sidebar displays a clean 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.