How to set links in TeleportHQ

Find out how to add links to text, images, buttons or any other element inside of your project.

Types of links in TeleportHQ
How to set links on elements
How to add hyperlinks on text
How to add links to other project pages
How to add a link to a section of a page
How to add a scroll to link in a component
Video: How to set and edit links

Types of links in TeleportHQ

Before we get into adding links to elements we will quickly go over the types of links you have at your disposal:

URL - Links to any other website on the web
Page - Links to other pages in your project
Scroll to - Links to different sections of your page
Email - Will prompt an email popup
Phone - Will start a phone call on devices that are phone-capable

How to set links on elements

To add a link on any element inside your project you will first need to select it and then click on the Links icon above the selection. Here you can choose any of the types of links mentioned above.

How to add hyperlinks on text

To add a link on a certain section of text simply double click on the text element, select the section of text you want to hyperlink and right click it. Choose “Create Link” and add any type of links that you want.

How to add links to other project pages

To create internal links within your pages you will use the “Page” link type. Select the element you want to add the link to, open the Links panel and go to the Page tab. Here you will be able to select any page from your project.

How to add a link to a section of a page

Creating anchor links inside pages can be done with the "Scroll to" type of link. To make this work you will also need to add an ID to the section you want to link to. ID's can be added in the** Right side menu** in the HTML section. Once your section has an ID, select it, click on the Link icon, go to Scroll to and choose the section by ID in the dropdown menu.

How to add a scroll to link in a component

To add a scroll to (anchor) link from a component to a section of a page you need to use an ID just like you would add an anchor link inside a page before.
After adding the ID to your sections, find the component in the Left panel, Layers and Files, Components section and double click it to open it.
Select the element you want to add the link on and click on the Scroll To tab.
Choose the ID you want to scroll to from the list. The list will contain all of the ID's found on the pages where the component is used.

Adding anchor links to components will take you to the ID on the page that the component is used.

Video: How to set and edit links

To help you visualize easier how links work in TeleportHQ you can check out this video tutorial.

Updated on: 14/02/2023