Layout & positioning

How to hide an element

September 15, 2026
How to hide an element

In TeleportHQ, you hide an element without deleting it: select the element and click the eye toggle in the Visibility section of the right panel. You can also right-click the element and choose Hide. The element is hidden on the canvas, in Preview and on your published site, at the screen size you are editing and all smaller ones.

Before you start

Steps

  1. Above the canvas, click the screen size you want to hide the element on. Pick the largest one to hide it on every screen.
  2. On the canvas, click the element. For example, click a banner.
  3. In the right panel → Visual tab, find the Visibility section, near the bottom of the panel after Transforms. Click its title or + to open it.
  4. Click the eye toggle (tooltip "hidden").

The element disappears from the canvas. In the layers tree it now shows a closed-eye icon.

Or: right-click the element on the canvas or in the layers tree and choose Hide.

The Visibility section of the TeleportHQ right panel, open, with the eye toggle highlighted next to the Opacity box

Find and show a hidden element again

A hidden element can't be clicked on the canvas. Use one of these ways in TeleportHQ:

  • From the hidden elements list: at the bottom center of the canvas, click the card that says, for example, "3 hidden elements". The Hidden Elements list opens. Click a row to select that element.
  • From the layers tree: in the left sidebar, open Pages, Components & Tree View and click the element with the closed-eye icon.
The Hidden Elements list open above the bottom of the TeleportHQ canvas, with a Show button on each hidden element

Then, to really unhide it:

  1. With the hidden element selected, open the Visibility section in the right panel.
  2. Click the eye toggle again. Or right-click the element and choose Show.

Peek at a hidden element without unhiding it

Sometimes you want to edit a hidden element, for example a mobile menu, without changing your site. TeleportHQ lets you reveal it in the editor only.

  1. Select the hidden element from the Hidden Elements list or the layers tree.
  2. Under the Visibility section, the bar says "Hidden on canvas". Click Show. Or click Show on its row in the Hidden Elements list.
  3. Edit the element. The bar now says "Visible on canvas".
  4. When you are done, click Hide in the bar.

This reveal only affects the editor. The element stays hidden on your published site. The reveal also ends when you select an element outside the revealed one.

Make an element transparent instead

In the Visibility section, type a value from 0 to 100 in Opacity. For example, 50 makes the element half transparent. At 0 the element is invisible but still takes up space on the page.

Check that it worked

  • The element is gone from the canvas at this screen size and smaller.
  • Switch to a larger screen size above the canvas. If you hid it on a smaller size, it's still visible there.
  • Open Preview to see the page as visitors will.

Troubleshooting

Hide is greyed out in the right-click menu Mobile menus, dropdown lists and burger menus can't be hidden this way. The tooltip says "Editing or removing some properties of interactive nodes is not allowed."

My element is hidden on mobile, but I hid it on desktop only Hiding on a screen size also hides it on all smaller sizes. Switch to the mobile size, select the element in the layers tree, and click the eye toggle to show it again there. TeleportHQ then saves a visible setting for that size and smaller ones.

The hidden elements card is greyed out The card is disabled while "Showing all conditional nodes" is on. Click that toggle to turn it off.

I don't see my hidden element in the Hidden Elements list The list doesn't show elements hidden inside a component placed on the page, or children that are hidden only because their parent is hidden. Open the component, or look for the parent.

Good to know

  • A hidden element is still part of your page code. It isn't deleted.
  • The page itself can't be hidden.
Share

Related Articles

How to hide an element on mobile or desktop

In TeleportHQ, switch the canvas to the screen size where the element should disappear, select the element and click the eye toggle in the Visibility section; hiding applies to that breakpoint and every smaller one, so to show something on mobile only you hide it on the default breakpoint and show it again on Mobile.

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 show or hide elements based on a condition

In TeleportHQ, you show an element only when a condition is true, such as "stock equals 0" or "the menu is open", by selecting it, turning on the Conditional Rendering switch near the top of the right panel and building the condition from a value, an operator and a comparison value; it works in every project, website or web app.

How to change styles for mobile only

In TeleportHQ, click a smaller breakpoint icon above the canvas (such as Mobile, 479px), select the element and change its style; the change applies to that screen size and smaller ones only, and you remove it with Reset Values on the blue section title.

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.