Images, icons & files

How to use free stock photos and videos (Unsplash, Pexels)

How to use free stock photos and videos (Unsplash, Pexels)

TeleportHQ includes free stock photos from Unsplash and free photos and videos from Pexels. In the Assets Manager, open the Stock tab, pick Unsplash or Pexels, search for a subject, then drag a result onto your page (or point at it and click the button in its middle). Stock media stays on Unsplash's and Pexels's servers, so it doesn't use your project's storage.

Before you start

  • Stock photos and videos are free on every plan.
  • To replace a picture that's already on your page, select it on the canvas first.

Add a stock photo

  1. In the left sidebar, click Assets Manager.
  2. At the top of the panel, click the Stock tab.
  3. In the row below the tabs, click Unsplash or Pexels. (The third choice, Game, holds game sprites. See How to use free 3D models, game sprites and sounds.)
  4. In the Search box, type at least 3 letters. For example, bread. Before you search, you see a selection of popular photos.
  5. Drag a photo onto the canvas, where you want it. Or point at the photo and click the button in its middle.
The TeleportHQ Assets Manager on the Stock tab, with Unsplash selected, bread typed in the search box and photo results below

The button in the middle of a stock photo does different things depending on what's selected on the canvas:

  • Nothing selected: the photo is added as a new image at the end of the page.
  • A container selected: the photo is added inside it as a new image. If the container already has a background image, the photo replaces that background instead.
  • An image selected: the photo replaces it.
  • A video, Scroll Video or 3D model selected: the photo becomes its cover picture.

Try before you choose: turn on Preview at Hover, under the search box. Then, while an image (or a container with a background image) is selected, pointing at a stock photo shows it in place on the canvas. Nothing changes until you click or drag.

Add a stock video from Pexels

  1. In the Stock tab, click Pexels.
  2. Click the filter button (a funnel) right of the search box, and choose Videos. All shows photos and videos together, Images only photos.
  3. Search for a subject, for example bread baking. Videos show a play symbol.
  4. Drag a video onto the canvas. Or point at it and click the button in its middle. It's added as a Video element in HD, with the clip's first frame as its cover picture.
The filter menu of the TeleportHQ Pexels library, with All, Images and Videos, and Videos highlighted

If a Video or Scroll Video element is selected, the clip replaces its video. To play a video behind a section, see How to add a video background. To make a clip play as visitors scroll, see How to add a video that plays as visitors scroll (Scroll Video).

Save an Unsplash photo to your project

Unsplash photos are linked from Unsplash, not copied into your project. To keep your own copy in TeleportHQ:

  1. Right-click the photo. Or point at it and click ⋯.
  2. Click Save to Assets. The photo is uploaded to your Public folder, with a name that starts with unsplash-image, and you see "Image saved to assets."

Choose Download instead to save the photo to your computer. A saved copy counts toward your project's storage.

The right-click menu of an Unsplash photo in TeleportHQ, with Save to Assets highlighted and Download below it

Check that it worked

The photo or video appears on your canvas and is selected. To see who took a stock photo, point at it in the Assets Manager: the photographer's name shows at the bottom and links to their profile.

Troubleshooting

"No results found. Try again using a different keyword." Try a shorter or more general word, for example coffee instead of artisan coffee shop interior.

"Could not search for Unsplash images. Please try again later." or "Could not get Unsplash photos." Unsplash couldn't be reached. Wait a moment and try again, or switch to Pexels.

"Could not get Pexels assets." Pexels couldn't be reached while loading more results. Wait a moment and scroll again, or switch to Unsplash.

"Could not save image to assets, please try again." or "There was a problem when getting the image" Try Save to Assets again. Saving uses your project's storage, so check that you have space left. See Which files can I upload, and how big can they be?

Right-clicking a Pexels result, or its ⋯ button, does nothing Pexels results can't be saved to your assets or downloaded from the TeleportHQ editor. Drag them onto the canvas instead. To keep your own copy, download the file from pexels.com and upload it. See How to upload images, videos and files.

Good to know

  • Stock photos and videos stay linked to Unsplash or Pexels on your published site and in exported code. If you want the file in your project, use Save to Assets (Unsplash only), or download it and upload it yourself.
  • Unsplash photos are requested at a size that suits the element they go into, so they stay sharp without loading more than needed.
  • Pexels videos play from Pexels, so they don't count toward your project's storage either.
Share

Related Articles

What is the Assets Manager?

The Assets Manager is the TeleportHQ editor panel (left sidebar, Ctrl/Cmd+4) where you upload, organize and check your project's images, videos, documents, audio and 3D files, and pick free stock photos, videos, 3D models, sounds and icons, in the tabs Uploads, Stock, 3D, Audio and Icons.

How to add and replace images

In TeleportHQ, you add an image with the Image element or by dragging an uploaded file onto the page, replace it by selecting the image and picking another file in the Assets Manager, and crop, adjust, add text, remove the background, edit with AI or resize it with Edit image.

How to add a video background

TeleportHQ has no video option in Background, so you place a looping, muted Video element inside the section, stretch it to fill the section with Freestyle position and Object Fit cover, and raise the section's content above it with Z-index.

How to add a video that plays as visitors scroll (Scroll Video)

In TeleportHQ, add a Scroll Video from the Motion group of the Elements panel, then choose or upload a clip (or make one with AI); TeleportHQ optimizes the clip for scrolling, plays it forward as visitors scroll down and backward as they scroll up, and shows a still picture to visitors who ask for reduced motion.

How to change an element's background color, gradient or image

In TeleportHQ, select the element, open Background in the right panel, click + and choose color, gradient or image; image backgrounds have Size, Repeat and Position settings, and several gradients and images can be stacked as layers.

How to use free 3D models, game sprites and sounds

The TeleportHQ Assets Manager includes free 3D models (3D tab: Poly Haven, Smithsonian, Game and Polygonal Mind, with Poly Pizza coming soon), 2D game sprites (Stock tab → Game) and sound effects (Audio tab); search, then drag an item onto your page or point at it and click its add button.