Reordering, duplicating, and deleting elements

Once you have an element selected, Site Designer gives you several ways to rearrange, copy, and remove elements. These operations work from the canvas, the context menu, keyboard shortcuts, or the Outline pane.

Reordering with the drag handle

Every selected element has a drag handle that appears at its top-left corner when hovered. Grabbing this handle lets you drag the element to a new position within its parent container.

1. Select the element

   Click the element you want to move. The blue selection border appears.

2. Grab the drag handle

   Hover over the top-left corner of the blue border until the cursor changes to a grab icon, then click and hold.

3. Drag to the new position

   Drag up or down within the same parent. A blue insertion line shows where the element will land.

4. Release

   Drop the element when the insertion line is in the right position.

Reordering via the Outline pane

The Outline pane provides drag-and-drop reordering for the entire page structure. This is particularly useful for moving elements between containers or restructuring deeply nested sections.

Open the Outline pane (tree icon in the right panel), then drag any row to a new position. A blue line indicates sibling placement; a blue highlight on a row indicates the element will become a child of that container.

Duplicating an element

Duplicating creates an identical copy of an element — including all its classes, inline styles, content, and children — and inserts it immediately after the original in the DOM.

Options for duplicating:

The duplicate is automatically selected after it is created, so you can immediately drag it to a new position or start editing it.

Deleting an element

Select the element and press Del or Backspace . The element and all its children are removed from the page.

You can also right-click and choose Delete from the context menu.

Undoing mistakes

All reorder, duplicate, and delete operations are undoable.

Site Designer maintains a full undo history for the current session. If you accidentally delete an element or drop it in the wrong place, undo will restore the previous state immediately.

Cut, copy, and paste

You can cut or copy a selected element and paste it elsewhere in the page or even into a different page:

Paste inserts the element as the last child of the currently selected container, or at the same nesting level as the current selection if a non-container element is selected.