How to add elements to a page

In TeleportHQ, you add an element such as a text, image or button from the Elements panel in the left sidebar. Select a container on the canvas and click the element's card to add it inside, or drag the card onto the canvas and drop it where you want it. Many elements also have a one-letter keyboard shortcut.

Before you start#

• Open the page you want to edit. See How to add a new page.
• To find the right element, see Which elements can I add to a page?

Click a card to add the element#

Clicking is the quickest way to add a TeleportHQ element when you know which container should hold it.

1. On the canvas, select the container that should hold the element. For example, click the column with your opening text.
2. In the left sidebar, click Elements.
3. Make sure the Primitives tab is open.
4. Find the element. You can type its name in the search box, for example button.
5. Click the card, for example Button (B).

TeleportHQ adds the element as the last item inside the selected container, then scrolls to it and selects it. Where the new element goes depends on what is selected:

• A container: the element goes inside it, at the end.
• An element that can't hold others (for example, a text or a button): the element goes right after it.
• A component copy: the element goes into the copy's slot, at the end (the first slot, if the component has several). A component without a slot gets the element right after the copy. See How to use slots to put different content inside a component.
• Nothing: the element goes at the end of the page. If the page ends with your site's footer, it goes right above the footer, so the footer stays last.
• Several elements: basic elements such as a text, an image or a button aren't added. Select one element first.

Some cards open a short setup window first (for example Footer, Social Links or Contact Button in the Site group), and site-wide extras such as Announcement Bar or Back To Top go into your site's navigation or footer, so they show on every page.

Drag an element onto the canvas#

Dragging lets you choose the exact spot for a new TeleportHQ element.

1. In the Elements panel, press on a card and hold the mouse button down.
2. Move the card over the canvas.
3. Watch the blue markers while you move. A thick blue outline shows the container the element will go into, and a blue line shows its position between other elements.
4. Release the mouse. The new element is added and selected.

You can also drop the card on the layers tree in Pages, Components & Tree View for precise placement.

Use a keyboard shortcut#

1. Select a container on the canvas or in the layers tree.
2. Press the letter shown on the card, for example T for Text (T) or I for Image (I).

The shortcuts are R Row, C Column, T Text, H Heading, L Link, D Date, B Button, I Image and V Video. S adds a Slot while you edit a component. The shortcuts work when the canvas or the layers tree is focused, not while you type in a field. See Keyboard shortcuts in the TeleportHQ editor.

Drop inside or next to another element#

TeleportHQ decides where a dragged element goes from where you point:

• Next to an element: by default, a new element dropped over a small element lands beside it, not inside it.
• Inside an element: hold Cmd (Mac) or Ctrl (Windows) while you drop. After a moment over an element, the canvas shows "Hold CMD to drop inside" or "Hold CTRL to drop inside".
• Into an empty row or column: a blue square follows your pointer. Drop it in a corner or the center, and the container's alignment is set to match.
• Beside an element in the other direction: drop to the left or right of an element in a column, or above or below an element in a row. TeleportHQ wraps both in a new row or column for you. A grey outline shows the container that will be created.

Check that it worked#

The new element is selected on the canvas, with a blue outline and a name label above it. It also appears in the layers tree. Its settings open in the right panel. To remove it again, click Undo above the canvas or press Cmd+Z / Ctrl+Z.

Troubleshooting#

"Image will transform into a container" You're dropping inside an image while holding Cmd or Ctrl. The image becomes a container with the picture as its background. Release Cmd or Ctrl to drop next to the image instead, or press Cmd+Z / Ctrl+Z to undo.

An "Enable Web App features?" window opens The element needs a server and only works in web apps: Autocomplete, Upload Asset, Site Search or Newsletter Signup. Click Keep as a Presentation Website to cancel. See Which elements can I add to a page?

"Your current role does not have permission to edit components" Your workspace role doesn't allow adding interactive elements. Ask a workspace admin to change your role. See What can each role do?

Clicking a card adds nothing Several elements are selected. Press Esc to clear the selection, select one container, and click the card again.

The keyboard shortcut does nothing Click the canvas or the layers tree first, so the editor has focus. Shortcuts don't work inside a component copy on a page. Open the component to edit it.

My new element appeared above the footer, not at the very bottom That's on purpose: with nothing selected, TeleportHQ keeps your site's footer as the last block of the page. Drag the element, or its row in the layers tree, if you want it somewhere else.

Good to know#

• New Row and Column containers have a dashed grey border until you put something inside. The border isn't part of your site.
• Dropping an element into a row or column removes its margins.
• For whole sections (hero, pricing, footer), use the Sections tab. See How to add ready-made sections.