Editor basics

How to see your page structure (Grayscale Structure Mode)

September 15, 2026
How to see your page structure (Grayscale Structure Mode)

In TeleportHQ, Grayscale Structure Mode shows your page as a grey wireframe: colors and backgrounds fade out and every element gets a dashed outline, so you can see how containers are nested. Turn it on with the Show layout structure button in the bottom toolbar, or press Ctrl+Shift+S (Cmd+Shift+S on a Mac). It only changes what you see in the editor.

When to use it

Grayscale Structure Mode in TeleportHQ helps when:

  • a gap appears on the page and you can't tell which container causes it;
  • elements overlap and you want to see where each box starts and ends;
  • a white element sits on a white background and you can't find it.

Steps

  1. In the floating toolbar at the bottom center of the editor, find the button with the tooltip Show layout structure. It sits after the import buttons and before the comments button.
The TeleportHQ bottom toolbar with the Show layout structure button highlighted
  1. Click it. The canvas turns grey, backgrounds become light, text turns dark grey and every element gets a thin dashed outline.
  2. To go back to the normal view, click the same button again (its tooltip now says Hide layout structure).
The TeleportHQ canvas in Grayscale Structure Mode, with dashed outlines around every element and the Hide layout structure button highlighted in the toolbar

Other ways to switch it on or off:

  • Press Ctrl+Shift+S (Cmd+Shift+S on a Mac) while the canvas is active.
  • At the top left, click the TeleportHQ logo (tooltip Project Menu), then View → Canvas → Grayscale structure mode. A checkmark shows when it's on.
  • Click the Project settings cog at the bottom of the left sidebar, then Preferences (under Editor) → View, and under Canvas use the Grayscale structure mode switch.

Check that it worked

The whole canvas is grey with dashed outlines around each element. You can still select, move and edit elements as usual. Your changes to colors are kept: they reappear when you turn the mode off.

Troubleshooting

I can't find the button in the bottom toolbar The toolbar may be hidden. Open Project Menu → View → Workspace and click Toolbar to show it again. The menu option and the keyboard shortcut work even while the toolbar is hidden.

Ctrl+Shift+S does nothing The shortcut only works when the canvas is showing. Click an empty part of the canvas and try again.

I expected margins and padding to be highlighted Grayscale Structure Mode doesn't show spacing. To see margins and padding, switch on Highlight element margin and padding in Project Menu → View → Selection and select an element, or press Ctrl+Shift+H (Cmd+Shift+H on a Mac). See How to add space around and inside elements.

Good to know

  • Editor only. Preview and your published site are never affected.
  • It stays on. TeleportHQ remembers your choice in this project, so the mode is still on the next time you open it, until you switch it off. Your collaborators aren't affected.
  • Old name. This feature used to be called Wireframe mode.
  • Find elements by name. For a list of every element on the page, use the layers tree. See How to use the layers tree to find and select elements.
Share

Related Articles

How to use the layers tree to find and select elements

In the TeleportHQ editor, the layers tree in the bottom half of the Pages, Components & Tree View panel shows every element on the open page; click a row to select it, drag rows to reorder or nest them, and search by name, id, class or tag.

How to add space around and inside elements

In TeleportHQ, add space outside an element with the Margin section and space inside it with the Padding section of the right panel, or drag the margin and padding handles on the canvas.

How layout works: rows, columns and grids

In TeleportHQ, every page is built from containers that arrange their contents as a row (side by side), a column (stacked) or a grid (in cells), and you can switch any container between these layouts in the Inner Layout section of the right panel.

Keyboard shortcuts in the TeleportHQ editor

A complete list of the keyboard shortcuts that work in the TeleportHQ editor, for editing, selecting, adding elements, zooming, finding text and opening panels; open the in-app sheet with Ctrl+Shift+/ (Cmd+Shift+/ on a Mac).

How to zoom and move around the canvas

In the TeleportHQ editor, use the − and + buttons at the top right of the canvas (or Ctrl/Cmd + and −) to zoom, click the percentage to go back to 100%, and hold Space and drag to move around the page.

How to change editor preferences (Editing, View and Advanced features)

In the TeleportHQ editor, click the Project settings cog at the bottom of the left sidebar, then Editor → Preferences, and pick Editing (how the editor behaves), View (what it shows, including which left-sidebar tabs appear) or Advanced features; each switch saves as you flip it.