Selecting a text, an image or a button on the page you’re building is predictable: you always get what you see. You can also move between elements using the keyboard. This guide explains how selection works.
First things first: containers
Some elements on the page act as containers: they hold other elements inside them. Examples of containers are a layout block, a slider and its slides.
Selection is based on a simple idea: first you select the container, then you go inside to select what’s in it.
Selecting with the mouse
Click: selects the element you clicked. If the element is inside a container, the first click selects the whole container.
Double click: takes you inside the container and selects the element at the point where you clicked. If there are containers inside other containers, each extra click takes you one level deeper.
⌘ (Mac) or Ctrl (Windows) + click: jumps straight to the innermost element, skipping all the containers in one go.
Once you’re inside a container, you can click the other elements it holds directly, without double clicking again. If you click something outside the container, you leave it automatically.
Clearing the selection
Clicking an element that’s already selected keeps it selected. To clear the selection, you can either:
press Esc
click on an empty area of the page
If a window or the interactions panel is open, or you’re in the middle of adding a new element, the first Esc closes that and keeps your selection as it is. Press Esc a second time to clear the selection.
The dashed outline: a preview of your click
When you move the mouse over the page, a dashed outline appears around the element you would select by clicking at that point. This way you know in advance what you’ll get.
The outline also appears when you already have something selected. If you hold down ⌘ or Ctrl, the outline moves to the innermost element.
Overlapping elements
If two elements overlap, a click selects the one you see on top.
If an element is completely hidden under another one and you can’t click it, you can reach it in three ways:
Select a nearby element and press Tab until you get to it.
Select the container that holds it and press Enter.
Click it in the page tree, in the side panel.
Moving with the keyboard
You can move between elements without using the mouse. First, click once inside the page: the keys only work there. If you’re typing in a field in the side panels, the keys keep working for that field as usual.
Key | What it does |
|---|---|
Enter | Goes inside the selected container and selects the first element in it |
Shift + Enter | Goes back out and selects the container that holds the element |
Tab | Moves to the next element in the same container |
Shift + Tab | Moves back to the previous element |
Esc | Clears the selection |
With Tab, once you reach the last element you start again from the first one.
The page tree
In the side panel you’ll find the page tree, which is the list of all the elements on the page. Clicking an element in the list selects it directly, no matter how deep it is. Hovering over it highlights the element on the page.
3D elements can only be selected from the page tree: you can’t reach them by clicking on the page or with the keyboard.
Selecting elements on the canvas works the same way whether you use the mouse, the keyboard or the page tree, giving you full control over what you edit in your creative.