Articles on: Elements

How to create links


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


  1. Types of links in TeleportHQ
  2. How to set links on elements
  3. How to set links on component props
  4. How to add hyperlinks on text
  5. How to add links to other project pages
  6. How to add a link to a section of a page
  7. How to add a scroll to link in a component
  8. Video: How to set and edit links



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



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.


Adding links to elements



To make a component prop linkable you first need to create a link prop on the element inside of the component. To do this:


  • Open the component
  • Select the element you want to be linkable
  • Click on the link icon above the element
  • Click on the prop icon near the URL field
  • Click Create prop


Now you will be able to go back to the component instance and add a link on that element.


How to create a link on a component prop


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.


Adding hyperlinks on text



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.


Adding links to other pages from the 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.


Adding anchor links



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.


Adding anchor links on components



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


Updated on: 28/03/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!