Page editor sidebar and toolbar
The right sidebar (Edit, Layers, Blocks, then Style, Attr, Events), top toolbar, and how the canvas stays wide for layout work on ArtInStack.
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.
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.
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
- Open any page in the editor.
- Select a block → confirm Style, Attr, and Events tabs update under Edit.
- Click the Layers icon → select a row → change max width under Attr.
- Click the Blocks icon → drag one block onto the canvas.
- Open Events on a section → add one Enter viewport interaction → Save Page → preview the public page.