Layers and canvas

The editor has three columns: Layers on the left lists every part of the page as a tree, the preview in the middle is the page itself, and the inspector on the right edits whatever is selected. This page shows how to find and select a part, move it, hide it at one screen size, style it, and place elements freely on a canvas.

Before you start #

• You need the Content editor role or higher. A Content author sees the same panels but can only change content; the Styles and Motion tabs explain that they are not theirs to change.
• Press ? anywhere in the editor (outside a text field) for the Keyboard shortcuts list. ⌘ means Ctrl on Windows and Linux throughout this page.

Read the Layers panel #

Each row is one element. From left to right a row shows the fold arrow (when it holds other elements), an icon, the name, and up to two chips: the HTML tag (H2, SECTION) and the key layout (grid 3, flex column).

• The name is the one you gave the layer, or else the first words of its text, an image's file name, or its type ("Box").
• A Detached chip means This layer's own styles override its linked style: it no longer matches its design-system variant. See Components and variants to promote or re-link it.
• Filter layers (Filter by name, text, tag or layout) keeps matching rows and their parents. grid finds every grid; a word finds the text that holds it.
• Collapse all and Expand all fold the whole tree.

Above the tree, three buttons switch which tree Layers shows: Header, Page and Footer. The header and footer are shared by every page, so an edit there changes the whole site. Clicking a header element in the preview opens the header tree for you.

Select #

In the preview:

In Layers, click a row; Shift or ⌘ + click adds rows. The primary selection has a solid blue outline, the others a dashed one. Under the preview, the breadcrumb (Where the selection sits) lists the parents of the selection; click one to select it.

With an element selected, the keys work in the preview and in the editor:

Move, copy, wrap, delete #

1. Drag a row in Layers. The top quarter of a row drops before it, the bottom quarter after it, the middle inside it. The target says Drop here or why it refuses, for example Image can't hold other layers. Drop it above or below.
2. Or use the keys on the selection:

The row's … menu (also Shift F10 on a focused row, or a right-click) holds Copy, Paste after, Duplicate, Delete, Rename and Create component…. To rename, double-click the row or press F2; Enter saves, Esc cancels.

Lock and hide #

• Lock on a row's tools keeps the element from being edited in the preview. Unlock to change it again.
• The row's breakpoint eyes, one per site breakpoint (labelled by initial: B, S, M, L, X), hide the element from that width up: Hide at Tablet, Show at Tablet. A hidden row is dimmed while the preview sits at a width where it is hidden.

Style the selection #

Open the inspector's Styles tab.

1. Section theme (on top) picks the site theme the element and everything inside it draw in, such as Light or Dark.
2. The scope bar decides where a change applies:
   • Screen size: Applies from Every width, or From Tablet · 768 px and the other breakpoints. Styles apply from that width upward.
   • State: Hover, Keyboard focus, Pressed and the element's own states; under Other, Reduced motion and No hover.
   • Theme: Every theme or one site theme.
   • Part: The whole element or one named part of a component, such as its title. The line under the pickers reads the scope in words, for example Tablet: 768 px and wider · Hover.
3. Edit the sections below: Layout, Position, Size, Spacing, Typography, Backgrounds, Borders, Effects and the rest. Fields offer the design-system tokens that fit them; a field writes when you leave it or press Enter, never while you type.
4. On a section, Width switches between Container and Full bleed.
5. Hidden in this scope hides the element in the scope you picked. Reset scope clears every value set in it.

Each field says where its value comes from: set here, from a wider scope, a mixin, a component cell, or default. A wider scope overrides this from 1440 px means a breakpoint above yours sets the same property; its name is a button that switches to it.

To keep a styled element for reuse, choose Save as preset… on its Settings tab. It appears in the Add panel under Site presets.

Place elements freely on a canvas #

A canvas is a box whose children are placed by position, not by flow: they can overlap, rotate and sit anywhere. Insert one from the Add panel with Free collage or Scattered collage (Layout presets). Then, in the preview:

1. Drag a child to move it; drag its handles to resize; use the rotate handle to turn it.
2. Moves and resizes snap to steps of 2.5 % of the canvas. Hold ⌥ (Alt) while dragging to turn snapping off. Rotation does not snap.
3. Click a child in the preview to select it and give the canvas the keyboard. The arrow keys nudge it by 2.5 %, Shift + arrow by 10 %, [ and ] shrink or grow it, and R rotates it by 1° (Shift R by 15°). ↑ and ↓ also move the selection to the previous or next element, as they do elsewhere in the editor, so the next press moves that element: click the child again before each vertical nudge, or drag it.

Positions are stored in percentages at the breakpoint the preview shows, so you can lay the canvas out differently on a phone.

What you see #

• The selection outlined in the preview and highlighted in Layers, with its name in the inspector's title.
• The inspector's tabs Settings, Styles, Motion, and for a multilingual site a Translate tab in the left sidebar.
• A refused drop or paste explained under its row with a Dismiss button; nothing changes.

Pitfalls #

• Two selected elements will not move together. Only elements side by side in the same container move as one: Select elements that sit side by side in the same container, then move them.
• A paste lands somewhere unexpected. Paste goes after the selection when that place accepts the element, else at the nearest place that does. A paste from another site is refused, since its images and components are not here.
• A style does nothing. Check the scope line: you may be editing a state, a theme or a part. Check A wider scope overrides this too.
• Hidden is not deleted. An element hidden at every width still exists and still counts in the page; delete it if you do not need it.
• Header edits are site-wide. Make sure Layers shows Page before you restyle what you think is only this page.

Related #

• Build a page
• Site components
• Components and variants
• Scenes and recipes