How to add links and buttons

In TeleportHQ, you can make a text, image, button, icon or whole container clickable. Select the element on the canvas and click the link icon in the small bar above it (or press Cmd+K / Ctrl+K). Then pick the kind of link on the tabs URL, Page, Scroll To, Email or Phone. To add a button first, click Button (B) in Elements → Primitives → Forms.

Add a button#

1. On the canvas, select the container where the button should go.
2. In the left sidebar, click Elements.
3. On the Primitives tab, find the Forms group.
4. Click Button (B), or drag it onto the canvas. You can also press B with a container selected.
5. Double-click the button text and type your label, for example Order a cake.

Style the button with the right panel, for example Background, Radius and Padding. To make it change color on hover, see How to add hover and click effects.

Add a link to an element#

1. On the canvas, click the element you want to make clickable, for example the Order a cake button.
2. In the small bar above the selected element, click the link icon.
3. The panel opens on the URL tab. Choose a tab and fill it in:
   • Page: click a page of your site, for example Contact.
   • URL: type a full web address, for example https://instagram.com/yourbakery. Open in a new tab is ticked for a new link, so your site stays open; untick it to open the address in the same tab. The field also accepts a file path such as /menu.pdf.
   • Scroll To: jumps to a section of the same page. See How to link to a section of the same page.
   • Email: type the address in Email, for example orders@yourbakery.com, and optionally a Subject. Clicking opens the visitor's email app.
   • Phone: type the number in Phone with the country code, for example +441234567890. Clicking starts a call on phones.
4. Click outside the panel to close it.

The link icon now shows where the link goes, with an × next to it.

Link only some words in a text#

1. Double-click the text to edit it.
2. Highlight the words, for example our menu.
3. Right-click the highlighted words and choose Create Link.
4. Choose the link type and fill it in, as above.

Remove or change a link#

1. Select the element.
2. To change the link, click the link icon and pick a new target.
3. To remove it, click the × next to the link icon.

Check that it worked#

Links don't open when you click them on the TeleportHQ canvas, because a click selects the element. To test links, preview your site and click them there.

Troubleshooting#

The link icon is greyed out with "An ancestor already has a link" An element around this one is already a link, and a link can't sit inside another link. Remove the link from the outer element, or link the outer element only.

My Scroll To list is empty The target section needs an ID first. See How to link to a section of the same page with smooth scrolling.

The Email and Phone tabs are missing They aren't available for elements inside a component copy on a page. Open the component and add the link there. See How to edit a component and update every copy.

A link to a PDF doesn't work Upload the file to the Assets Manager and use its link. See How to link to a file so visitors can download it.

Good to know#

• Menu links update themselves: when you add or rename a page, links in your navigation can change automatically. See Why do my menu links change when I add or rename a page?
• Open in new tab by default: new URL links start with Open in a new tab ticked. To change that, click the Project settings cog at the bottom of the left sidebar, open Editor → Preferences → Editing, and under Links turn off Open in new tab checked by default.
• The Link (L) element in Typography is a text that already is a link. It's the same as a text with a link added.
• The Dynamic tab links to data, for example each product's own page. See How to create a page for each item (details pages).