Selecting elements

Selecting elements is as easy as clicking on them. You will see a thin line around them to let you know this is selected. Once it is selected you are ready to make changes on it. You can launch the text editor to change text, go to the Styles pane to change a background color or maybe swap out the picture for a new one you want to show.

Click to select

Click any visible element on the canvas to select it. A blue border appears around the selected element, and the right-side control panes update to show that element’s settings.

The blue border is a canvas-only indicator. It does not affect your HTML or CSS and will not appear on your published site.

Clicking into nested elements

When elements are stacked or nested inside each other, a single click selects the outermost element your cursor intersects. To select an element deeper in the nesting:

• Click again on the same spot. Each click dives one level deeper into the nesting hierarchy.
• The breadcrumb bar at the bottom of the canvas updates with each click, showing how deep you are.

This click-through behavior lets you drill down to an <a> tag inside a <p> inside a <div> without needing to use the Elements Tree.

The breadcrumb dropdown

The breadcrumb bar at the bottom of the canvas shows the full ancestor path of the currently selected element. Each segment is a clickable link — click any ancestor in the path to jump the selection to that element instantly.

This is the most reliable way to select a parent container that is fully covered by its children, such as a section that contains a full-bleed background image.

You can also click the segment labels to open a dropdown list of that element’s siblings, making it easy to switch between sibling elements at the same nesting level.

Right-click to select relatives

Right-clicking a selected element opens the context menu, which includes navigation shortcuts:

• Select parent — moves selection to the direct parent element.
• Select children — lists the direct children of the current element so you can choose one.

These options are useful when precise clicking is difficult, such as in tightly packed layouts or when working with very small elements.

Multi-select with Shift+click

Hold ⇧ and click additional elements to add them to the selection. Multi-selected elements all get a blue border, and the control panes switch to a multi-select mode that shows only the properties shared across all selected elements.

With multiple elements selected you can:

• Delete all of them at once with Del or Backspace .
• Duplicate all of them with ⌘D .
• Apply a shared class or style change across all selected elements simultaneously.

Selecting via the Elements Tree

The Elements Tree (the tree icon in the right panel) shows every element in the page DOM as a collapsible tree. Clicking any row in the Elements Tree selects that element on the canvas — the canvas scrolls to bring the element into view if it is off-screen.

The Elements Tree is the best tool for:

• Selecting elements that are hidden or off-canvas.
• Selecting display: none elements that are invisible on the canvas.
• Understanding the exact nesting structure of a complex section.

Use the Elements Tree and the canvas together — they stay in sync at all times.

See keyboard shortcuts for the keys that speed this up.