Editing elements & the inspector

The inspector is the panel on the right of the editor. It shows the settings of the element you select. Every change shows on the canvas at once and becomes part of your page when you save.

The inspector for a Button with the Content tab open, showing the button text, link and style settings — The inspector with a Button selected.

Select an element

Click it on the canvas. A click selects the innermost element under the pointer; press Esc to select its parent.
Click its row in Layers.
Click a step in the path bar at the bottom of the canvas, for example Page / Hero / Heading. Click Page to clear the selection.
Use the keyboard: Enter selects the first child, Tab the next element at the same level. See Keyboard shortcuts.

The selected element gets a toolbar with its name, Parent (select the parent), Move (drag to move), Duplicate, Delete and … (more actions).

With nothing selected, the inspector shows the page name, the number of elements, and buttons for Insert elements and Page settings.

The three tabs

Tab	What you find there
Content	What the element shows: text, images, links, items, and options such as the HTML tag. For a container: its layout.
Design	How it looks: typography, colors, backgrounds, borders, then Spacing & position, Background & border and Mask for every element. At the top you can apply classes.
Behaviour	How it acts: Anchor & classes, Animations, Motion & effects, Scroll & mouse effects, Visibility, Conditions, Interactions and Attributes.

The Design tab of a Button with the Editing row, the Classes bar and the Button style sections — The Design tab.

Settings are grouped in sections that open and close. A closed section shows a short summary of what is set in it, or Default. The Content tab ends with a sentence that explains what the widget is for.

If your role can edit content only, you see just the Content tab. See Roles & access.

Edit for a device or a state

At the top of the Design and Behaviour tabs, the Editing row shows what you are changing:

Device: Desktop, Tablet or Mobile. It is the same as the device buttons in the top bar. A hint explains the reach of your change: applies to all widths on Desktop, Tablet and smaller on Tablet. See Responsive editing.
State: Normal, Hover, Focus, Pressed, ::before, ::after or Custom selector…. In a state, only the settings that can change in that state are shown. See Hover & other states.

Read the dots next to a setting

Next to a setting's label, a small dot tells you where its value comes from:

Filled dot: set here, on this device. Click the dot to reset the setting.
Hollow dot: inherited from a larger device, for example the Desktop value while you edit Tablet.
No dot: the default.

A legend at the bottom of the Design and Behaviour tabs repeats this: Set here and Inherited.

Useful buttons in a setting row

{ } (Use a design variable) on size and spacing fields: pick a value from your Design System sizes. The field then follows the variable.
The database icon (Dynamic data) on fields that can show live content, such as the post title or a custom field. See Dynamic tags.
The sparkles icon (AI writing) on text fields, when AI writing is set up. See AI in the editor.
Color fields open a color picker with your Site colors, recent colors, an opacity slider and a text field for any color value.

Find a setting

Click the magnifier (Search settings) in the inspector header and type, for example radius. The search looks through all three tabs at once. Turn on Changed only to list only the settings that have a value on this element, which is a quick way to see what makes it look the way it does.

The inspector search with the word radius typed, showing the matching Border radius settings from the Design tab — Search finds a setting in any tab.

Edit several elements at once

Hold Shift or Ctrl and click elements on the canvas or in Layers to select more than one. The inspector then edits them together:

Elements of the same type show all their settings, with the title 2 × Button.
Mixed types show only the settings they share, with the title 3 elements.
A field that differs between them shows Mixed. Changing it sets the same value on all of them.

The inspector editing two buttons at once, with the title 2 × Button and a note explaining Mixed values — Two buttons selected: one change updates both.

Element actions

Click … (Element actions) in the inspector header, or right-click the element, for actions such as Copy, Paste style, Duplicate, Wrap in container, Add note…, Save as template, Lock and Delete. See Copy, paste & duplicate.

A locked element shows Locked: it cannot be moved, deleted or edited. with an Unlock button.

LayersThe structure of the page. Responsive editingDifferent values for tablets and phones. Hover & other statesStyle hover, focus and more. ClassesReuse a style on many elements.