How to add and customize Text elements

Text is the most fundamental element in the editor. Here is everything you need to know about typography elements in TeleportHQ.

1. Text types
2. Adding text to the project
3. Customizing text
4. HTML text tags
5. Creating text tokens
6. Adding links to text

Text types

In the Elements Tab in the Left Panel you will find the typography section. There are 3 types of text that you can add to the canvas:

• Text - Adding this element, it will add a regular paragraph to your project
• Heading - This will add an H1 element
• Link - This will add a paragraph with hyperlink
• Date - Adds a DateTime element that can receive time and date information from a headless CMS

Adding text to the project

Text is added with drag and drop. You can drop any type of text element directly in the canvas or in a container in the treeview. Double click on the text to write your own text or paste a copied piece of text.

Customizing text

To make changes to your text elements you can click on the text in the canvas then go to the Right panel and scroll down until you see Test style. Here you can change the font family, font size, line height, letter spacing and more.

HTML Text tags

You can also change the HTML tag of your text so that it provides the semantic value that you intended in the first place. You can change the HTML tag to: paragraph, heading, span, label and more..

Creating text tokens

Text tokens will allow you to predefine different styles for your text elements. This is most useful for projects that use multiple fonts and sizes. Create the tokens when you start the project and use them from the Text styles tab in the Right Panel.

Adding links to text

To add links to text already placed on the canvas you need to:

• Double click on the text element
• Select the section of text you want to link to
• Right click on the section
• Select Create link

Updated on: 28/03/2025