Editor basics

How to reorder the tabs in the left sidebar

How to reorder the tabs in the left sidebar

In the TeleportHQ editor, you can put the left sidebar tabs you use most at the top, and hide the ones you don't use. Drag an icon up or down and drop it where you want it. To hide an icon, right-click it and choose Hide followed by its name. Right-click the sidebar to show hidden buttons (Show all buttons) or go back to the default order (Reset order). Your arrangement is saved to your account, so every project you open, on any device, shows the same sidebar.

Before you start

The TeleportHQ left sidebar has three parts, split by thin lines. Hover over an icon to see its name.

The TeleportHQ left sidebar with its three parts numbered 1 to 3: the workspace tabs, the plugin buttons with Plugins, and Growth under the Live label
  1. Your workspace tabs. By default: Elements, Pages, Components & Tree View, Data Sources, Workflows and Assets Manager. You can reorder them.
  2. Plugins. The buttons of the plugins your project uses: E-commerce, Blog, Help Center, Bookings and AI assistant chat, each while it's switched on. You can reorder them, and move them into the first part too. Under them, Plugins lists every plugin your project can add, and stays at the end of this part. See A tour of the TeleportHQ editor.
  3. Live. Under the Live label, Growth: marketing, analytics, SEO, form submissions, and the records of the store and bookings. It stays in its place.

At the very bottom, the Project settings cog always stays in place.

Move a tab

  1. In the left sidebar, press and hold on the icon you want to move, for example Assets Manager.
  2. Drag it up or down. A line shows where it will land.
  3. Release the mouse button when the line is where you want the icon, for example under Elements.

With the keyboard: press Tab until the icon is focused, then hold Alt (Option on a Mac) and press ↑ or ↓. At the end of a part, the next press moves the icon into the other part.

Hide or show a tab

Right-click the TeleportHQ left sidebar to open its menu:

The right-click menu of the TeleportHQ left sidebar, with Hide Assets Manager, Buttons in the sidebar, Show all buttons and Reset order numbered 1 to 4
  1. Hide followed by the icon's name, for example Hide Assets Manager. It's there when you right-click an icon, and hides that icon.
  2. Buttons in the sidebar: a list of every tab, with a tick next to each one that's shown. Click a tab's name to hide or show it.
  3. Show all buttons: brings back every icon you hid.
  4. Reset order: puts the icons back in their default order.

The same switches are in the Project settings panel: click the cog at the bottom of the left sidebar, then under Editor, click Preferences, then View, and look under Left sidebar. They're also in Project Menu → View → Left sidebar. See How to change editor preferences (Editing, View and Advanced features).

Elements and Plugins can't be hidden. A plugin's own settings have the same switch: click Plugins, click the plugin's row, and use Show in the left sidebar.

Check that it worked

The icon now sits in its new place in the left sidebar, or is gone if you hid it. Open another project: the sidebar looks the same there too.

Troubleshooting

The order went back to how it was TeleportHQ saves your arrangement in the background. If saving fails, for example because your connection dropped, the change only lasts until you reload. Move the icons again once you're back online.

I can't find a tab Check that it isn't hidden: right-click the left sidebar and click Buttons in the sidebar, or click Show all buttons. The plugin buttons (E-commerce, Blog, Help Center, Bookings and AI assistant chat) only appear while your project uses the plugin. To switch a plugin on, click Plugins, then click its row. See How to turn features on or off from Project settings.

I can't find Extra Features It's now called Plugins. It's the last icon of the second part of the left sidebar, right above the line over Live.

I can't find the Forms tab Forms no longer have a tab of their own. Your forms and their submissions are in Growth → Forms, and Ctrl+5 (Cmd+5 on a Mac) opens them there. See What's in the Growth tab?.

I can't find the Discord, Tutorials or keyboard icons They moved into the Project settings panel. Click the cog at the bottom of the left sidebar: the icons for the Discord community, Video tutorials and Keyboard shortcuts are at the bottom of the panel.

I can't find CSS Classes, AI Hub, Sections or Import in the sidebar Those are no longer sidebar tabs. CSS Classes is the Classes tab of the Design Language panel on the right (deselect everything to see it). Sections is a tab inside the Elements panel. AI Hub is in the Project Menu at the top left. Import buttons are in the floating toolbar at the bottom of the editor.

Good to know

  • Open and close panels. Click an icon to open its panel; click the same icon again to close it. You can also press Ctrl+1 for Elements, Ctrl+2 for Pages, Components & Tree View and Ctrl+4 for Assets Manager (Cmd on a Mac). Ctrl+5 opens Growth on Forms.
  • Resize the panel. Drag the right edge of an open panel to make it wider or narrower.
  • New tabs. When TeleportHQ adds a new tab, it appears at the end of its part.
  • Turning a plugin off keeps its spot. If you switch a plugin off and on again, its button comes back where you left it.
Share

Related Articles

A tour of the TeleportHQ editor

The TeleportHQ editor has a header with the Project Menu, Share, Code and Publish, a left sidebar of panels such as Elements, Pages, Plugins and Growth with the Project settings cog at the bottom, a canvas in the middle, a right panel that shows the Design Language or the selected element's styles, and a floating toolbar at the bottom with Preview, Backups and Support.

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 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.

How to turn features on or off (Plugins)

In the TeleportHQ editor, click Plugins in the left sidebar, click a plugin such as Blog, Bookings or Authentication, and flip its "enabled" switch in the drawer that opens; the same drawer starts its tutorial, opens its panel, shows or hides its left-sidebar button and lists what needs attention, and flipping the switch again and confirming turns it off.

What's in the Growth tab?

The Growth tab in the TeleportHQ editor brings together the Marketing Studio, Analytics (who visits your site), SEO & Performance, your form submissions and, when your project has a store or takes bookings, its orders, subscriptions and bookings; the marketing, analytics and SEO tools need a trial or paid plan.

A tour of Project settings: everything you can set for your project

In the TeleportHQ editor, click the Project settings cog at the bottom of the left sidebar to open one panel with every project setting, grouped under Site, Appearance, Data & code, Editor, AI, Credentials and Integrations; click an entry to open it in a drawer beside the panel, and switch features such as the store or the blog on in the Plugins tab.