Page editor sidebar and toolbar

The page editor keeps the canvas in the center and puts all builder controls in one right sidebar, stacked top to bottom. A top toolbar handles save, publish, and device preview. You can collapse the sidebar to give the canvas more width.

There is no separate left sidebar for blocks or settings—everything lives on the right.

Capability overview

Area	Purpose
Top toolbar	Save, publish, undo/redo, device preview, show/hide sidebar
Right sidebar — top row (icons)	Switch panel: Edit, Layers, or Blocks
Right sidebar — below (when Edit)	Style, Attr, Events tabs for the selected item
Canvas	Live page composition

Right sidebar — panel switcher (top)

Three icon buttons in a row at the top of the sidebar:

Edit (pencil icon)

Default mode. Select something on the canvas, then use the tabs underneath (Style, Attr, Events).

Layers

A structured list of sections → rows → columns → blocks. Use it when:

• You cannot click the row you need because blocks overlap.
• You want to reorder nested elements without dragging on the canvas.
• You need to select the section wrapper to change section spacing.

Blocks (plus icon)

The block library grouped by category (Basic, Layout, Portfolio, Hero, Advanced, etc.). Drag a block onto the canvas; drop it into a column when prompted. After you drop a block, the sidebar usually returns to Edit so you can configure it.

Media-heavy blocks are documented in Supported media presentation blocks. Layout and text blocks are in Editor blocks and layout reference.

Right sidebar — Edit mode tabs (below the icons)

Shown when Edit is active and you have a component selected on the canvas (block, row, column, or section).

Style

Visual appearance—spacing, typography, colors, backgrounds where the platform exposes them for that component type.

Padding and margin: Under Spacing, use the link icon to toggle linked mode (one value applies to all four sides) or unlinked mode (set top, right, bottom, and left independently). Sliders cap at 160px; type larger values in the number fields when needed.

Width: A fixed Width (for example 800px) on a standalone block centers automatically on the page. For normal page content inside a Section → Row, prefer Row → Max width under Attr instead—see Page layout and content.

Attr

Attributes for that component—image picks, portfolio source, column count, hero layout mode, CTA label, form recipient, and similar. This is the main place you wire Media, Portfolio, or commerce settings. (Some guides call these “traits”; in the editor the tab label is Attr.)

Events

Element interactivity for the published site—add triggers (click, scroll reveal, hover, on load) and actions (toggle a class, show/hide, dim gallery neighbors, smooth scroll, parallax) without writing JavaScript. The tab is labeled Events in the sidebar; the panel heading is Element Interactivity.

Full guide with recipes, limits, and troubleshooting: Page editor events and interactions.

Quick example	What you configure in Events
Section fades in on scroll	Enter viewport → Add class + CSS transition on that class
Mobile menu open/close	Click → Toggle class on a menu panel (#menu selector)
Portfolio tile grid	Hover enter → Dim siblings; Hover leave → Undo dim on the tile wrapper
In-page anchor jump	Click → Scroll to with #section-id

Interactions run on live and preview pages after Save Page—not necessarily while you are only dragging on the canvas. Prefer attaching interactions to the block root you selected (section, card wrapper, button), not deep inner nodes.

For rows, padding and max-width are usually controlled from Attr (row layout fields). If both Attr and Style show padding, prefer the row controls under Attr to avoid conflicting values.

Layout spacing (sections, rows, columns)

Spacing is split across three layers. Mixing them up is the most common reason a band looks too tall, too short, or off-center after publish.

Layer	What it controls	Where to edit
Section	Outer vertical space above and below the row (the “band” breathing room)	Select the section → Attr (section spacing) or Style
Row	Max width, gap between columns, row padding	Select the row → Attr (row layout) — prefer this over Style padding on rows
Column	Inner cell padding, min height, vertical alignment	Select the column → Attr

Section padding does not resize children. Increasing section padding adds white space around the row; it does not stretch rows or columns to fill the viewport. To make a band taller, raise column min-height or column padding, or add a Spacer block.

Hard to click the row? Use Layers → expand Section → select Row, then change max width or gap under Attr.

Row looks off-center or too narrow on the live site? Set Max width on the row under Attr (not only in Style). If both Attr and Style expose padding on the same row, use Attr only.

Full guide to content width, section vs row, and when to use each control: Page layout and content.

Deeper block list: Editor blocks and layout reference.

Top toolbar

Control	What it does
Draft / Publish	Whether the page is public (with Save Page)
Save Page	Persists canvas changes without necessarily going live
Desktop / Tablet / Mobile	Canvas width preview
Undo / Redo	Recent editor actions

Full publish workflow: Preview and publish.

Page Editor vs Page Settings tab

Above the canvas, two tabs split concerns:

• Page Editor — Everything in this article (canvas + right sidebar + toolbar).
• Page Settings — Slug, SEO fields, template overrides: Page settings and overrides.

Next steps & validation

1. Open any page in the editor.
2. Select a block → confirm Style, Attr, and Events tabs update under Edit.
3. Click the Layers icon → select a row → change max width under Attr.
4. Click the Blocks icon → drag one block onto the canvas.
5. Open Events on a section → add one Enter viewport interaction → Save Page → preview the public page.