Selecting elements

Selecting the right element is the first step in editing anything in Site Designer. This article covers every technique available — from a simple click to selecting deeply nested elements in a complex layout.

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 Outline pane.

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 Outline pane

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

The Outline pane 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 Outline pane and the canvas together — they stay in sync at all times.