1. Documentation
  2. Working in Smart Builder
  3. Editing your Page in Smart Builder

Adding Images & Videos to Smart Builder

Follow
Avatar
Meredith
Last Updated

Adding images to your landing page can help capture a visitor's attention and convey complex messages in the blink of an eye. 

Videos allow visitors to experience your message with minimal effort. They let you deliver ideas that images and written copy cannot, all in a universally compelling format.

This article will explain adding image and video elements to your Smart Builder landing page using our pre-designed section templates.

  1. Adding Images to Smart Builder
  2. Uploading Images to Smart Builder
  3. Accessing images from Unsplash or Pexels
  4. Editing your Images Properties
  5. Adding Alt Text
  6. Adjusting the Border Radius
  7. Deleting Images
  8. Embedding Videos
  9. Glossary
  10. Unsplash and Pexels FAQ

Adding Images to Smart Builder

  1. Log in to Unbounce Conversion Intelligence™ Platform, and launch your page in Smart Builder.
  2. Using drag and drop, add an image element to your page:
    Using drag and drop to add an image into Smart Builder.

Do note that some pre-designed section templates in Smart Builder have image placeholders; look a template that contains a grey placeholder box.

Click the plus icon beneath an existing section; a new window will appear with section templates to choose from:
Adding a section template with images.

Uploading Images to Smart Builder

Now you can upload your images into Smart Builder!

The Image Library is where all your images will be hosted. To access or upload images to your Image Library, follow these steps:

  1. Click the grey image placeholder on your page.
    • Or, double-click the grey image placeholder to launch the Image Library automatically. 
  2. From the buttons that appear, click the pen icon   to launch the Edit Image settings:
    Annotated image of red around pen icon, below an image in Smart Builder.
  3. From the Edit Image settings pop-up, click on the upload  icon to upload an image:
    A pop-up window next to image placeholder, with different image editing options
  4. Choose an existing image from the Image Library, or upload an image from your computer using the upload  button.
  5. Click the blue Choose Image button.  
  6. Wait a few moments for it to appear in Smart Builder:
    Gif demo of a using uploading image into Smart Builder.

Pro-tip:

You can also drag images directly from your computer - saved in a folder or on your desktop - and drop the image directly into Smart Builder:
Gif demo of a user dragging and dropping an image from the desktop into Smart Builder.

Accessing images from Unsplash or Pexels

Unsplash is an online community that allows creators to contribute towards and make use of a library of free stock images.

Similarly, Pexels is a stock photo and video-sharing website that empowers designers, developers, bloggers etc. to share visuals that can be downloaded or accessed for free by other creators.

With Smart Builder, you can easily sift through thousands of images from Unsplash or Pexels, and embed them onto your landing page.

  1. In the Image Library window, select Unsplash Image or Pexels Image menu option at the top of the page.
  2. Using the search bar in the upper right-hand corner of the window, search for an image:
    Searching through the Unsplash or Pexels library.
  3. Click on an image of your choosing to add it to your page.

That's it! Your image should now show in your section.

Editing your Images Properties

Once you've added your image, you can customize the image properties, such as cropping the image, resize it, or add different filters. 

See Styling & Editing Images Directly in Smart Builder to learn more. 

Adding Alt Text

Alt text (alternative text) is the written copy that appears in place of an image on a webpage if the image fails to load.

This text allows screen-reading tools to describe images to visually impaired readers and allows search engines to crawl your website better.

  1. Single-click your image. 
  2. Click the pen icon   to launch the Edit Image settings.
  3. Scroll down to the field labeled Alt Text.
  4. Type in a description relating to the image on your landing page:
    Dog in Smart Builder, with alt caption 'A dog receiving a bath'.

Adjusting the Border Radius

The Border Radius defines the radius of an element's corners.

Adjusting this setting will add rounded corners to your image.

  1. From the Edit Image settings, scroll down to the Border Radius section.
  2. Increase the number of pixels for each corner's field to increase the Border Radius of your image:
    inputting-numbers-to-change-border-radius
    The higher the number of pixels, the rounder the corner.
  3. When you're happy with these changes, click the icon at the top right corner to close the Image Properties, and be sure to Save your page.

Deleting Images

To delete images from your image library, click the upload button from the Edit Image settings pop-up. This will launch the Image Library again. 

Select any image, then click the trash can icon to delete it:
Delete image from Smart Builder Image Library.

Embedding Videos

Videos allow visitors to experience your message without effort beyond an initial click. They also let you convey ideas that images and written copy cannot, while doing it in a universally compelling format.

Smart Builder makes adding videos to your landing page easy by offering optimized video section templates to help generate higher conversions.

  1. To add a video to your landing page, hover your cursor over an existing section.
  2. Locate the plus icon that appears beneath that section.
  3. From the Add Layout pop-up, select a section template from under the Video tab:
    Adding a section template for videos.
  4. A new video section template will appear on your page in Smart Builder.
  5. Click on the grey placeholder in that section.
  6. Click the Add Video button that appears on the bottom left-hand side of the placeholder: 
    Add a video button.
  7. Enter the video URL of your video into the Youtube URL field to add the video to the section.
  8. When you're happy with these changes, click the  icon at the top right corner to close the Add Video pop-up.

Be sure to Save your page.

You can also add TikTok videos or videos from Promo or Vimeo into Smart Builder.

See this section in our documentation to learn about available Media Apps: Media Apps, Powered by Unbounce Apps. 

Glossary

Image Mask: Masking an image allows you to hide or reveal specific portions of an image.

Unsplash and Pexels FAQ

Do I need an Unsplash or Pexels account to use the stock image apps?

For both Unsplash and Pexels, Unbounce handles the authorization and Unbounce users do not need an account.

Do I need to pay for the images?

The images are free for Unsplash and Pexels but users must follow the license agreement for each app. License agreements can be found below:

When I add a stock image app, is it at the client level or page level?

It will be added on the client level. The benefit to this is that you will only have to install a stock image app once, as opposed to one page at a time.

Can I customize (crop, resize, etc) the stock photos that I add to my page?

You can edit your stock images by customizing the image properties in the Smart Builder.

What happens if I am using images from an app and I uninstall it?

Since the images are downloaded to your user account, the app will uninstall from the builder but the images will remain within the account.

 

 

Related articles