How to move and rearrange elements by dragging

In TeleportHQ, you move an element by pressing on it and dragging it to a new spot on the canvas, or by dragging its row in the layers tree. Blue markers show where it will land. Hold Cmd (Mac) or Ctrl (Windows) to drop it inside another element, hold Alt (Option on a Mac) to drop a copy, and press Esc to cancel.

Move an element on the canvas#

1. Press on the element and keep the mouse button down. You can also press on the grab handle (the hand icon at the left of the name label above a selected element).
2. Move the mouse. The element fades, and an outline of it follows your pointer.
3. Watch the markers. A thick blue outline shows the container the element will go into, and a blue line shows its new position among the other elements. The page reflows to preview the result.
4. Release the mouse. The element moves and stays selected.

If several elements are selected, dragging one of them moves all of them. Dragging near the edge of the canvas scrolls the page.

Move an element in the layers tree#

The layers tree is the most precise way to reorder or nest elements in TeleportHQ.

1. In the left sidebar, click Pages, Components & Tree View.
2. In the layers tree, drag a row up or down.
3. Drop it between two rows to place it before or after them, or on a row to put it inside that element. Hovering over a collapsed row while dragging expands it.

See How to use the layers tree to find and select elements.

Drop inside another element#

By default, TeleportHQ drops an element next to a smaller element, not inside it. To put it inside:

1. Start dragging the element.
2. Hover over the target element. After half a second, the canvas shows "Hold CMD to drop inside" (Mac) or "Hold CTRL to drop inside" (Windows).
3. Hold Cmd or Ctrl and release the mouse.

Drop a copy instead of moving#

1. Start dragging the element.
2. Hold Alt (Option on a Mac).
3. Release the mouse. The original stays where it was, and a copy lands at the drop spot. The canvas doesn't show a "copy" hint while you drag.

Move an element with the arrow keys#

Select an element and press an arrow key to swap it with the element next to it. In a row, use Left and Right. In a column, use Up and Down.

Check that it worked#

The element appears in its new place on the canvas, stays selected, and its row sits in the new position in the layers tree. To undo a move, press Cmd+Z or Ctrl+Z.

Troubleshooting#

The element won't start dragging You may be editing its text. Click outside the text, then drag. Some parts of interactive elements (for example inside a navbar or a component copy) can't be moved on their own.

Holding Ctrl or Cmd draws a blue box instead of moving Pressing Cmd or Ctrl before you start dragging selects elements with a box. Start the drag first, then hold the key before you drop.

"Image will transform into a container" You're dropping inside an image. The image will become a container with the picture as its background. Release Cmd or Ctrl to drop next to the image instead.

The element jumps around instead of dropping into a container The element uses Freestyle, Fixed or another special position, so it moves freely. See How to position elements.

The layout changed after the move Dropping into a row or column removes the element's margins. Dropping beside an element in the other direction wraps both in a new row or column. Press Cmd+Z or Ctrl+Z to undo.

Good to know#

• Press Esc during a drag to cancel it.
• Dropping into a grid places the element among the grid's items in order. To add grid cells, see How to create a grid layout.
• While you drag an element, collaborators can't edit it.