Docs User Guide Editor Basics

Editor Basics

The Site Builder editor is your creative workspace. Learn how to navigate the interface, add blocks with a single click, and build beautiful pages effortlessly.

Editor Interface

When you open a project in the editor, you'll see three main areas:

Left Panel

Block library, page navigator, and settings. Add new blocks from here.

Canvas

Your page preview. Click to select blocks, drag to reorder, edit text inline.

Right Panel

Block settings and styling options. Customize the selected block here.

Adding Blocks

Blocks are the building elements of your page. Each block type serves a specific purpose:

1

Open the Block Library

Click the + Add Block button in the left panel, or click the plus icon between existing blocks on the canvas.

2

Browse or Search

Scroll through categories or use the search bar to find specific blocks. Categories include Headers, Content, Media, Forms, and more.

3

Add to Page

Click a block to add it to your page, or drag it to a specific position on the canvas.

Smart Content Blocks automatically populate with your business profile information (company name, tagline, industry) when added. Image blocks fetch relevant stock photos based on your industry.

Selecting and Moving Blocks

  • Click to Select - Click any block on the canvas to select it. A blue border indicates selection.
  • Drag to Reorder - Click and hold a block, then drag it to a new position. Drop zones appear as you drag.
  • Keyboard Navigation - Use arrow keys to move between blocks after selecting one.

Block Actions

When a block is selected, a toolbar appears with quick actions:

Action Description
Move Up/Down Reposition the block in the page order
Duplicate Create a copy of the block with all its settings
Delete Remove the block from the page
Settings Open the block's configuration panel

Undo and Redo

Made a mistake? No problem:

  • Undo - Press Ctrl+Z (Windows) or Cmd+Z (Mac)
  • Redo - Press Ctrl+Shift+Z or Cmd+Shift+Z

Preview Mode

See how your page looks to visitors:

  • Click the Preview button in the top toolbar
  • Toggle between desktop, tablet, and mobile views
  • Exit preview to return to editing

Saving Your Work

Auto-Save Your work is automatically saved as you edit. Look for the "Saved" indicator in the toolbar.

You can also manually save by clicking the Save button or pressing Ctrl+S / Cmd+S.

Keyboard Shortcuts

Shortcut Action
Ctrl/Cmd + S Save
Ctrl/Cmd + Z Undo
Ctrl/Cmd + Shift + Z Redo
Delete / Backspace Delete selected block
Ctrl/Cmd + D Duplicate selected block
Escape Deselect / Close panel
Previous Landing Pages
Next Block Reference
ESC