Site Designer Guide
overview interface tour

Your first 10 minutes — quick tour

This quick tour introduces the five key areas of the Site Designer interface. By the end, you’ll know where everything lives and how to start building.

The app layout

When you open a project in Site Designer, the screen is divided into four main zones:

┌────────────────────────────────────────────┐
│                  Toolbar                   │
├──────┬─────────────────────────┬───────────┤
│      │                         │  Control  │
│ (no  │       Canvas            │  Panes    │
│ left │                         │           │
│ pane)│                         │           │
└──────┴─────────────────────────┴───────────┘
  • Toolbar — top bar with the page manager, resources, components, preview controls, and settings.
  • Canvas — the live browser preview where you drag, drop, and design.
  • Control panes — the right-side panel with five tabs: Content, Design, Effects, Outline, and CSS.

1. The toolbar

The toolbar at the top gives you access to global project tools:

IconToolWhat it does
Pages iconPage ManagerAdd, rename, reorder, and delete pages
Image iconResourcesManage images, fonts, and files
Layout iconTemplatesBrowse and apply page templates
Component iconComponentsInsert pre-built component blocks
Eye iconLive PreviewOpen a live preview in your browser
Settings iconSettingsExport, publish, and project settings

2. The canvas

The canvas is a real browser engine — not a simulation. Click any element to select it. A blue highlight border appears around the selected element.

Basic canvas interactions:

  • Click — select an element
  • Double-click — enter inline text editing
  • Right-click — open the context menu (duplicate, delete, move)
  • Drag — move an element (hold and drag the selection handle)

3. The control panes

Click any element on the canvas and the right-side panes populate with its properties:

Content pane — Edit text, links, src attributes, and HTML attributes directly.

Design pane — Two sub-tabs:

  • Element — classes, IDs, and element-level overrides
  • Style — all CSS visual controls (typography, dimensions, colors, spacing, etc.)

Effects pane — Transitions, animations, hover states, and filters.

Outline pane — A tree view of your entire page DOM. Drag rows to restructure the page without touching the canvas.

CSS pane — A read-only panel showing the computed CSS for the selected element. Useful for debugging.

4. Adding your first element

Drag any element from the Components panel in the toolbar onto the canvas, or use right-click → Insert to add elements inline.

After dropping:

  1. The element is selected automatically.
  2. The Content pane shows its editable properties.
  3. The Design → Style pane shows all style controls.

5. The width slider (Responsifier)

At the bottom of the canvas, a width slider lets you preview your design at any viewport width. Drag it left to simulate narrow screens, right for wide displays.

What’s next

Now that you know the interface, pick a path: