How to use the layers tree to find and select elements

In TeleportHQ, the layers tree lists every element on the page or component you have open, nested the way they sit on the page. Open Pages, Components & Tree View in the left sidebar: the tree is the bottom half of the panel. Click a row to select that element, drag rows to move them, or search to find an element by name.

Before you start#

• Open the page or component you want to work on. The tree always shows what's open on the canvas.
• The layers tree used to be called Layers & Files. Today the left sidebar tab is Pages, Components & Tree View, and the panel title is Explorer.

Steps#

1. In the left sidebar, click the layers icon (tooltip Pages, Components & Tree View), or press Ctrl+2 (Cmd+2 on a Mac).
2. Look at the bottom half of the Explorer panel. The top row is the page name; everything on the page is listed below it.

3. Click the arrow next to a row to open or close it and see the elements inside.
4. Click a row to select that element. It gets a blue outline on the canvas, the canvas scrolls to it, and its settings open in the right panel.

Selecting on the canvas works the other way too: when you click an element on the canvas, the tree opens down to that element and highlights its row.

Find an element#

To find an element in a long TeleportHQ page:

1. At the top of the layers tree, click the magnifier icon.
2. In the box (Name, Id, Class, Tag...), type part of the element's name, id, CSS class or HTML tag, for example hero or button.
3. Matching rows are highlighted. Click one to select it.

To open or close a whole branch at once, point at a row and click its Expand all or Collapse all icon.

Move and nest elements#

In the TeleportHQ layers tree, dragging is often more precise than dragging on the canvas.

1. Press and hold on a row.
2. Drag it. A line shows where it will land: above a row, below a row, or inside a row.
3. Release the mouse button.

If you hover over a closed row while dragging, it opens so you can drop inside it. You can also select a row and press the arrow keys to move the element before or after the one next to it.

Other things you can do in the tree#

• Rename an element: double-click its row, type a name such as Hero section, and press Enter. Double-clicking the top row renames the page.
• Use the element menu: right-click a row for the same menu as on the canvas, including Copy, Paste, Duplicate, Delete, Hide and Make Component.
• Select several elements: hold Ctrl (Cmd on a Mac) and click rows, or hold Shift and click to select a range of elements that sit side by side.
• Keyboard: Tab and Shift+Tab select the next or previous element at the same level; Esc selects the parent (with several elements selected, Esc clears the selection); Enter selects the first element inside. See Keyboard shortcuts in the TeleportHQ editor.
• Resize the tree: drag the line between the page list and the tree up or down.

Check that it worked#

The row you clicked is highlighted in the layers tree, the element has a blue outline on the canvas (purple for a component), and the right panel shows its settings. If you moved an element, it now appears in its new place both in the tree and on the canvas.

Troubleshooting#

I can't see an element on the canvas, but it's in the tree It's probably hidden. Hidden elements show a closed-eye icon in the tree. Click the row to select it, then show it again. See How to hide an element.

Hide or Show is greyed out with "Editing or removing some properties of interactive nodes is not allowed." Parts of interactive elements, such as a mobile menu, burger menu or dropdown list, can't be hidden this way. Select the whole element instead.

I can't rename a row Renaming is turned off while the tree shows HTML tags. To switch the tags off:

1. At the bottom of the left sidebar, click the Project settings cog.
2. Under Editor, click Preferences, then View.
3. Under Layers, switch off HTML element tags in the tree view.

A row won't accept what I drop on it Some elements, such as locked parts of components, don't accept other elements inside them. Drop the element next to it instead.

Good to know#

• What the badges mean. Rows can show the element's #id and first CSS class (with +2 if it has more), a link icon, a lock for members-only content, comment badges, and icons for workflows or conditions linked to the element. Hover over a badge to read what it means.
• Tree display options. In Project settings (the cog at the bottom of the left sidebar) → Editor → Preferences → View → Layers, you can switch CSS classes in the tree view (on at first) and HTML element tags in the tree view (off at first). These settings only change your own view.
• Collaborators. Elements a teammate is editing may be locked. See Why can't I select an element someone else is editing?