This guide shows you how to select more than one block in the Experience designer, change their shared styles in one go, and wrap them in a new Box block.
A plain click goes back to selecting a single block. The most recently selected block is outlined with a solid border and the rest with a dashed border.
While several blocks are selected, the settings panel lists the selection and shows only the sections that every selected block supports:
Section | Block types |
|---|---|
Layout | |
Size | every type except Text |
Spacing | Box, Button, Link, Input, Text, Visualisation |
Typography | Box, Button, Link, Input, Text |
Border, Background, Visual Effects |
The editors show the values of the most recently selected block. A change is applied to every selected block, and Undo reverts all of them in one step. If a block has a state selected (for example a hover or media state; see Experience States and Print Layout), the change goes into that state's overrides, the same as when you edit the block on its own.
Content and data settings such as text content, Button actions, query, for each, and Entity Context can only be edited one block at a time.
Remove a block from the selection with the × on its tag in the settings panel.
Result: The blocks move into a new Box block, in their original order, at the position of the first selected block. The new Box block has no padding and becomes the selected block, so you can set its layout straight away.
If the selected blocks have different parents, nothing changes and the Experience designer tells you why. If you also select some of a block's children, only that block is wrapped and its children move with it.
Shortcut | Action |
|---|---|
Escape | Select the parent block. On the top-level block it clears the selection. |
Delete / Backspace | Remove every selected block and select their parent. |
Cut, copy and paste work on one block at a time.