Images, video, and fonts in the AI Hybrid Builder

Follow

This article is about the AI Hybrid Builder. To see how it compares with Classic Builder, read How the AI Hybrid Builder differs from Classic Builder.

Add an image

  1. Open the Components tab and click Image.
  2. Choose Basic Image, or Avatar for a small round image like a profile photo.
  3. With the image selected, open Properties and click Select Image to choose a different one.

In Properties, you can also:

  • Click Edit Image Fit to change how the image fills its space
  • Add Alt Text (see below)
  • Add a Link URL to make the image clickable, and turn on Open in new tab if you want the link to open separately

Your image library

Select Image opens a window with two tabs.

My Library holds the images you've added to your account. You can:

  • Search your images, and sort them
  • Click Upload Images to add images from your computer
  • Click From URL to add an image from a web address
  • Open an image's ⋯ menu to see Image Details, Rename it, or Delete it

Pick an image, then click Insert.

Unbounce's shared image library

The Unbounce tab in the Select Image window has shared icons and images from Unbounce's templates that you can use on any page. Search it the same way as your own library.

Free images from Unsplash

The Unsplash tab lets you search free photos from Unsplash and filter them by Orientation and Color. Unbounce keeps the photographer's attribution with the image for you.

Unbounce AI also picks Unsplash images when it builds a page. If an image doesn't fit, ask Unbounce AI for a different one or choose another yourself.

Alt text

Every image has an Alt Text field in Properties. Describe what the image shows so visitors using screen readers know what's there.

How images are optimized

When you publish, images are cropped, resized, and compressed automatically so your page loads quickly. You can't change these settings.

Video

  1. Open the Components tab and click Video.
  2. Choose Video or Video Inline. Video Inline adds a title and subtitle under the video.
  3. With the video selected, open Properties and paste the video's address into Video URL.

In Properties, you can also choose a thumbnail image with Select Image, and add Alt Text and a label or title.

Videos play in a pop-up window (a lightbox) when visitors click them. Playback is turned off while you edit, so click Preview to watch it.

You can also set a video as the background of a section.

Video links from YouTube, Vimeo, and Wistia work.

Fonts

Choose fonts in the Style Guide tab, under Fonts. Set a Headlines Font and a Paragraph Font, or click Advanced Settings to set each heading level separately, including weight, size, line height, and letter spacing.

The font menu lists any fonts Unbounce AI used on your page, followed by these standard fonts: Arial, Arial Black, Brush Script MT, Comic Sans MS, Courier New, Georgia, Helvetica, Impact, Inter, Lucida Sans Unicode, Tahoma, Times New Roman, Trebuchet MS, and Verdana.

To add more fonts, go to Typography > Advanced Text Settings, click Font +, and choose a font from Fonts Library, which includes Google Fonts.

Add a custom font

To use your own font, select a text element and go to Typography > Advanced Text Settings > Font + > My Custom Fonts, then add the web address of a font file you host. There's no file upload; the font file needs to be hosted somewhere online, the same as in Classic Builder.

▶All AI Hybrid Builder articles
  1. Getting started with the AI Hybrid Builder
  2. Create a page with Unbounce AI
  3. Build a page from a website you already have
  4. Edit your page with AI or on your own
  5. Build forms in the AI Hybrid Builder
  6. Images, video, and fonts in the AI Hybrid Builder (this article)
  7. Page settings and publishing in the AI Hybrid Builder
  8. Track and improve page performance in the AI Hybrid Builder
  9. How AI credits work
  10. How the AI Hybrid Builder differs from Classic Builder
  11. Using Unbounce AI responsibly
  12. AI Hybrid Builder FAQ