canvas drag drop nesting containers components

Drag & drop and nesting

Dragging elements onto the canvas and nesting them inside containers is how you build page structure in Site Designer. The visual drop indicators make it clear where an element will land before you release the mouse.

Dragging from the Components panel

The Components panel (accessible from the top toolbar) contains pre-built blocks, elements, and layout patterns. To add one to your page:

Open the Components panel from the toolbar.
Find the component you want to add.
Click and drag it onto the canvas.
Watch the drop indicators to choose a placement, then release.

You can also double-click a component in the panel to insert it at the end of the current selection’s parent container, without dragging.

Reading the drop indicators

Site Designer uses two distinct visual indicators while you drag to communicate exactly where the element will be placed:

Indicator	Meaning
Blue line between elements	The element will be inserted as a sibling — placed before or after an existing element at the same level.
Blue fill inside a container	The element will be inserted as a child — nested inside that container.

Hover over different parts of the canvas while dragging to see the indicators change. Moving your cursor toward the inside of a container switches from the line indicator to the fill indicator, signaling that you are about to nest.

Nesting rules

Not every element can be placed inside every container. Site Designer enforces standard HTML nesting rules:

Block containers (div, section, article, header, footer, main) accept any child element.
Inline containers (span, a, label) should only contain inline-level elements and text.
<p> elements cannot contain block-level children like div or section.
<ul> and <ol> elements only accept <li> children.
Form elements (input, button, select) are void or self-closing and cannot have children.

When you attempt an invalid drop, Site Designer will refuse the placement and the drop indicators will not appear for that target.

Moving existing elements between containers

To move an element that is already on the page into a different container:

Select the element you want to move.
Grab the drag handle at its top-left corner.
Drag to the new target container.
Watch for the blue fill indicator on the destination container.
Release to drop.

If the element is difficult to grab on the canvas — for example because it is very small or overlapping with other elements — use the Outline pane instead. Drag any row in the Outline tree to any other position in the tree.

Auto-scroll while dragging

When you drag an element near the top or bottom edge of the canvas viewport, Site Designer automatically scrolls the page so you can drop elements further up or down the page without releasing the drag. The scrolling speed increases as you move closer to the canvas edge.

See the Auto-scroll and canvas navigation article for full details.

Nesting after placement

If you placed an element as a sibling but later decide it should be nested inside a nearby container, you do not need to delete and re-add it. Use the context menu:

Select the element.
Right-click → Wrap in container — this wraps the element in a new div in place.
Alternatively, cut the element (⌘X ), select the destination container, and paste (⌘V ).