Articles on: Elements

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.

Uploading images to project

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.

Adding images to containers

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.

Customizing images

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.

Editing image options



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

Adding hyperlinks to images

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”

Setting image background

Updated on: 14/02/2023

Was this article helpful?

Share your feedback

Cancel

Thank you!