Using the editor

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.

In the TeleportHQ editor, click the Undo or Redo arrow above the canvas, or press Ctrl+Z and Ctrl+Shift+Z (Cmd on a Mac); undo history only covers your own changes since you opened the project.

In the TeleportHQ editor, press Ctrl+P (Cmd+P on a Mac) to open the command palette, type the name of a page, component, workflow, form, table or class to jump to it, or type > first to run a command such as Create new page or Publish project.

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

In the TeleportHQ editor, click Preview in the toolbar at the bottom of the screen to open a working copy of your whole site in a new tab, where you can click links, try interactions and switch between desktop, tablet and mobile views.

In the TeleportHQ editor, click the Show layout structure button in the bottom toolbar (or press Ctrl+Shift+S, Cmd+Shift+S on a Mac) to turn the canvas grey and outline every element with a dashed line, so you can see how the page is built.

The colored chips at the top left of the TeleportHQ editor warn about missing settings and links that lead nowhere ("N issues"), unsafe workflow code ("N security issues"), an ended subscription ("Subscription ended") or a web app that needs its own subscription ("Subscription required"); click a chip to see details and fix it.

In the TeleportHQ editor, select an element and press Ctrl+C then Ctrl+V (Cmd on a Mac), or Ctrl+D to duplicate it in place; to copy only the look, copy the element, select another and press Ctrl+Alt+V (Paste Style).

In TeleportHQ, copy an element or section with Ctrl+C (or right-click a component in the Components list and choose Copy), open the other project, select where it should go and press Ctrl+V; its styles, fonts, images and components come along.

In the TeleportHQ editor, drag any icon in the left sidebar up or down to a new spot, or focus it and press Alt+↑ or Alt+↓; right-click the sidebar to hide a button, show hidden ones or reset the order, and your arrangement is saved to your account and used in every project.

In the TeleportHQ editor, open Pages, Components & Tree View in the left sidebar, click + on the Pages folder, choose New Page → Blank Page and type a name; the new page starts with your site's navigation and footer.

In the TeleportHQ editor, right-click a page in the Pages list (or click its … button) and choose Rename, Duplicate or Delete; deleting a page that other elements link to asks what happens to those links, the homepage can't be deleted until another page is the homepage, and Ctrl+Z brings back a page you deleted by mistake.

In the TeleportHQ editor, right-click a page in the Pages list, click Set as Homepage and confirm in the window that says what changes; that page then opens at your site's main address (/), and its old address redirects there.

In the TeleportHQ editor, add a page, design it, then right-click it in the Pages list and click Set as 404 Page; visitors who open a missing address on your live site see it.

In the TeleportHQ editor, right-click a page, open Page SEO Settings and type the address in the URL field, for example services/wedding-cakes; folders don't change page addresses.

In the TeleportHQ editor, click + on the Pages or Components folder and choose Create Folder, then drag pages or components onto it; folders only organize the editor and never change page URLs.

In the TeleportHQ editor, right-click a page in the Pages list and click Exclude from Code Generation; the page stays in your project but is left out of your live site and downloaded code until you include it again.

TeleportHQ keeps the links in your Navigation and Footer components in sync with your pages; it asks AI to add a link when you add a page, renames links when you rename a page and asks what happens to them when you delete one, and you switch adding off, or change the answer offered first on deletion, in Project settings → Editor → Preferences → Editing → Links.

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.

TeleportHQ's Elements panel has two tabs, Primitives (single building blocks such as text, images, buttons, forms, animations, site-wide extras and charts, sorted into groups) and Sections (ready-made page sections and scroll stories), and a few elements that need a server only work in web apps.

In TeleportHQ, you add an element by clicking its card in the Elements panel to put it inside the selected element, by dragging the card onto the canvas, or by pressing its keyboard shortcut.

In TeleportHQ, you select an element by clicking it on the canvas or in the layers tree, select its parent by clicking the name label above it or pressing Esc, and select several elements with Cmd/Ctrl-click, Shift-click or by dragging a box.

In TeleportHQ, you move an element by dragging it on the canvas or in the layers tree to a new spot; hold Cmd or Ctrl to drop it inside another element, hold Alt or Option to drop a copy, and press Esc to cancel.

In TeleportHQ, you add a Text or Heading element from the Elements panel, double-click it to type, and highlight words to make them bold, italic, underlined, colored or aligned from the small toolbar that appears.

In TeleportHQ, you add an image with the Image element or by dragging an uploaded file onto the page, replace it by selecting the image and picking another file in the Assets Manager, and crop, adjust, add text, remove the background, edit with AI or resize it with Edit image.

In TeleportHQ, you upload an MP4, M4V or MOV file to the Assets Manager, drag it onto your page as a Video element, and set its poster, controls, autoplay, loop and sound in the Video section of the right panel.

In TeleportHQ, you add a YouTube or Vimeo video by adding an Iframe element to the page and pasting the video's embed address into its src field in the Attributes section.

In TeleportHQ, you make any text, image, button or container clickable by selecting it and clicking the link icon above it, then choosing a URL, a page of your site, a section to scroll to, an email address or a phone number.

In TeleportHQ, you give the target section an ID in the Attributes section, then select the link or button and choose that ID on the Scroll To tab of the link panel; published sites scroll smoothly to it by default.

In TeleportHQ, you add a "Scroll to top" button by clicking Back To Top in the Site group of the Elements panel, which puts a round arrow button in the bottom-right corner of every page, or you build your own with an ID, a Fixed button and a Scroll To link.

In TeleportHQ, you add a Google Map by dragging or clicking the GMaps element in Elements → Primitives → Media, then typing your address, or latitude and longitude, into the Google Maps Location section of the right panel.

In TeleportHQ, you show another website's page inside yours by adding an Iframe element from Elements → Primitives → Media and pasting the page's address into its src field in the Attributes section; the other site must allow embedding.

In TeleportHQ, you add your own HTML, CSS or JavaScript to one spot on a page by dragging or clicking the Code Embed element in Elements → Primitives → Media, pasting the code into the Code Embed (HTML+CSS+JS) window and clicking Save.

In TeleportHQ, you click a navigation bar design in Elements → Sections → Navbar; it becomes your site's navigation at the top of every page, linked to your pages, and on phones its links fold into a menu button that opens a phone menu.

In TeleportHQ, you add a dropdown menu with the Dropdown element from Elements → Primitives → Interactive, then use dropdown settings to show the list while editing, choose where it opens, add menu items, turn an item into a submenu and preview it on the canvas.

In TeleportHQ, you add a carousel with the Slider element, pick a ready layout such as Card carousel or Logo marquee in Slider Settings, then add slides, set autoplay, dots, arrows and slides per view, and style the arrows and bullets.

In TeleportHQ, you add an expand-and-collapse panel with the Accordion element from Elements → Primitives → Interactive; its Accordion settings let you choose whether it starts Open or Closed and give several accordions the same Group Name so only one stays open at a time.

In TeleportHQ, you add an audio player with the Audio element and pick a sound in Audio Settings, or make a button, text or container play a sound on click or hover with the Play Sound On section of the right panel.

In TeleportHQ, you add a 3D model with the 3D Model element from Elements → Primitives → Media, choose a free model with Browse 3D models or use an uploaded GLB file, then set rotation, lighting and zoom in 3D Model Settings.

In TeleportHQ, you add a ready-made section such as a hero, pricing table or FAQ from Elements → Sections by opening a category or searching and clicking a design; it lands as ordinary elements in your site's style, and Replace Section swaps any block of the page for another design.

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.

In TeleportHQ, select a row or column container and use the Inner Layout section of the right panel to set its Direction, Justify, Align, Gap and Wrap, which control how the items inside line up and how much space sits between them.

In TeleportHQ, add a Grid element (or switch any container to grid in Inner Layout), set its Rows and Columns in the right panel, and place items in cells with the Row and Column settings.

In the TeleportHQ editor, you position an element from the Position section of the right panel by choosing Auto, Relative, Freestyle, Fixed or Sticky, then setting its offsets and Z-index; Freestyle elements can also be dragged on the canvas, where they snap to their neighbours.

In TeleportHQ, select your header or navigation bar, set Position to Sticky (or Fixed), set its top offset to 0 and give it a high Z-index, then check the result in Preview, because the editor canvas doesn't show sticky or fixed elements staying on screen.

In TeleportHQ, select an element and type a Width and Height in the Size section of the right panel (in px, %, vw and other units), or drag the handles around the element on the canvas, where the edge snaps to the parent's and neighbours' edges.

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.

In TeleportHQ, select an element and click the eye toggle in the Visibility section of the right panel (or right-click it and choose Hide); the element stays in your project but is hidden on the canvas and on your live site at that screen size and smaller.

A TeleportHQ component is a reusable block, like a navigation bar, footer or card, that you design once and place on many pages; when you edit the main component, every copy updates, and each copy can still show its own text, images and links.

In TeleportHQ, create a component by right-clicking elements you already designed and choosing Make Component, or start a blank one with the + button on the Components folder and New Component (Ctrl+Alt+K).

In TeleportHQ, double-click a component instance (or click the component in the Components folder) to open the main component in its own tab; every change you make there updates all its copies on every page.

In TeleportHQ, right-click a component in the Components folder of the left sidebar and choose Rename, Duplicate or Delete; deleting a component also removes every copy of it from your pages.

In TeleportHQ, change one copy (instance) of a component by editing its values in the Component Properties section of the right panel, or right-click it and choose Detach Instance to turn it into normal elements that no longer update with the main component.

In TeleportHQ, open the main component, click the connect (plug) icon next to a text, image or link field and choose Create Prop (or use Component settings → Props → Create new prop); each copy of the component can then set its own value in Component Properties.

In TeleportHQ, open a component and add a Slot element (Elements → Primitives → Layout, shortcut S) where the variable content should go; then, on each copy of the component on a page, drag any elements or components into that slot.

In TeleportHQ, open a component, create a state in Component settings → State (for example isOpen, true or false), then change it with a Change State event on an element and use it to show or hide parts of the component; states work in every project, websites included.

In TeleportHQ, right-click a component in the Components folder and choose Set as Navigation, Set as Footer or Set as Company Logo, so the editor can keep your menu and footer links in sync with your pages and protect those components from accidental deletion.