How to use Images in TeleportHQ

Find out everything you need to know about images and how to use them in TeleportHQ.

Uploading images
Adding images in containers
Customizing images
Image settings
Adding links to images
Background images

Uploading images

After you open one of your projects, in the Left Side Menu you will notice the area called Assets Manager. In the first Tab, Uploads, click on the Upload assets button or simply drag and drop the file in that area.

Adding images in containers

To add images in the project you can either drag and drop directly on the canvas or in the tree view, in the appropriate container. To change an image that was already placed, just drag the new one over the one you want to change, hold CTRL/CMD and drop.

Customizing images

To customize your images go to the Right panel. Look for the area called size section to change the size of your image. You can use different units of measurement such as: px, em, rem or %. In this panel you will also add borders, set a radius or shadow on an image.

To add interactions to an image, like a hover effect you need to go to the Right Panel and in the State section, select the effect you want to apply and define it using CSS rules.

Image settings

There are also some additional image options in the Image section of the Right Panel like Img alt, which is used for search engine optimization and Loading, which determines the way images are loaded during a session.

Adding links to images

To add a link on an image you just need to select it in the canvas and click the link icon above the selection.

Background images

To add a background image, follow these steps:

Select the container you want to edit
Go to the assets manager
Right click on the image you want to set as background image
Click “Set as background image”

Updated on: 14/02/2023