Design in the Visual Canvas Editor

Overview

The canvas editor is where you design a page. It's a live, drag-and-drop surface backed by the StretchPages rendering engine, so what you build is what your visitors get. This article covers the everyday editing moves and the panels you'll use most.

Open the editor

1. From the Pages library, click any page card, or create a new page.
2. The page opens full-screen in the canvas editor.
3. The top bar shows the page name, its status badge, and actions including Publish and Back to pages.

The editor layout

The editor has three main areas:

• The canvas in the center — your live page.
• The insert menu / widget panel — the elements you can add, grouped by type (Layout, Basic, Structured, Navigation, Marketing, Content, Media, Form).
• The inspector on the side — with panels for Inspect (style the selected element), Globals, Parts (site-parts), Popups, Settings, and Revisions.

Core editing moves

1. Select — click any element on the canvas to select it. The inspector updates to show its settings.
2. Edit text inline — double-click a heading or text block and type; changes apply live.
3. Move — drag an element to reposition it within its container.
4. Add elements — open the insert menu and click or drag a widget onto the canvas. You can also drop in column presets (2, 3, 4, or 6-column rows) to build layouts quickly.
5. Style in the inspector — with an element selected, adjust spacing, colors, typography, borders, background, and layout in the Inspect panel.
6. Right-click for the context menu — quick actions such as duplicate, delete, and reordering on the selected element.
7. Undo / redo — step backward and forward through your changes at any time.
8. Command palette — press Cmd/Ctrl+K to open the finder and jump to any command, insert any widget, add a saved block, or select any element by name.

Your edits autosave to the page as you work — the editor persists the page back to your workspace.

Build layout with containers

StretchPages uses real layout primitives so your design stays flexible:

1. Add a Container, Flex, or Grid from the Layout group.
2. Use flex to align items in a row or column with a gap; use grid for multi-column card layouts.
3. Drop a column preset (2/3/4/6-col) when you want an even row of columns instantly.
4. Nest containers to build sections, headers, and complex layouts.

Style the selected element

In the Inspect panel you can set:

• Spacing — padding and margins.
• Typography — font, size, weight, line height, alignment.
• Color and background — fill, text color, and backgrounds (including global colors).
• Borders and radius — outlines and rounded corners.
• Layout — display, direction, gap, and sizing for containers.

When a color field offers global colors, choose one so the element updates automatically if you change that brand color later.

Example

You add a Section, drop a 3-col row inside it, and place an icon, a heading, and a text block in each column to make a feature grid. You select the section and give it padding and a light background. You switch the heading color to your global brand color. You press Cmd/Ctrl+K, type "button," and insert a call-to-action below the grid. Everything autosaves as you go.

Tips

• Learn the command palette. Cmd/Ctrl+K is the fastest way to insert, jump, and run commands.
• Select the parent when spacing looks off — padding usually belongs on the container, not the text.
• Use column presets instead of hand-building rows; they're already responsive-friendly.
• Name matters less than structure — clean nesting (sections → containers → elements) makes responsive tuning and reuse much easier later.
• Undo is your friend — experiment freely; you can always step back.

Troubleshooting

My change didn't stick. Edits autosave, but if you navigated away instantly after a change, give it a moment and reopen the page. Check the Revisions panel to confirm the latest snapshot.

I can't move an element where I want. Elements live inside containers. Drop it into the target container, or adjust the container's layout (flex direction, gap) rather than dragging the child around.

The inspector looks empty. Nothing is selected — click an element on the canvas first.

Where to go next

• Widgets and elements reference — every element you can add.
• Responsive design and breakpoints — make it look right on every screen.
• Design globals and brand styles — keep everything on-brand automatically.