Adding Images & Videos to Smart Builder

Follow

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 format that’s universally compelling.

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

Adding Images to Section Templates

To add an image to your landing page, you will need to add a section template that contains an image placeholder. 

  1. Log in to Unbounce and launch your page in Smart Builder.
  2. Hover your cursor over an existing section (or near where you’d like to add your new section).
  3. Locate the plus icon that appears beneath an existing section.
  4. If you're hoping to add images to a section, look for a template that contains a grey placeholder box. These layouts will allow for image uploads:
    adding-a-section-template-with-image-placeholders
  5. Once you have selected a template, click on the grey placeholder in that section. Two buttons will appear beneath the grey placeholder box:
    paintbrush-icon-highlights-below-grey-image-placeholder

  6. Click the paintbrush icon   to launch the Image Properties.

  7. From the Image Properties window that appears, click on the upload icon   to upload an image.
  8. Select the image file from your computer, and wait a few moments for it to appear in Smart Builder:
    uploading-an-image-from-computer

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

Customizing Image Properties

Once you’ve added your image, you can customize the image properties, such as cropping the image, adding alternative text, or applying a border radius.

Cropping Images

If you want to adjust what your image looks like within the placeholder dimensions on your section template, you can crop your image using the Crop Settings.

  1. To begin, select your image in your section template, and then click the square icon on the bottom left-hand corner of the image to launch the Crop Settings
    crop-image-box-icon-below-grey-image-placeholder
  2. Move the Image Size slider to adjust how much of your image is visible within the set dimensions of the placeholder’s boundaries: 
    cropping-an-image
    These boundaries are called a "Mask" and may end up covering or obscuring part of your image.
  3. Keeping the Crop Settings open, use your mouse to drag and position your image within the boundaries of the image mask.
  4. When you’re happy with these changes, click the icon at the top right corner to close the Crop Settings, and be sure to Save your page.

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 on a landing page. This text allows screen-reading tools to describe images to visually impaired readers and allows search engines to crawl your website better.

  1. Within Image Properties, enter a description of your image under the field labeled Alt Text:

    text-box-to-add-alt-text

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. Within Image Properties, scroll down to the section titled Border Radius.
  2. Increase the number of pixels for each corner’s field to increase the Border Radius of your image. The higher the number of pixels, the rounder the corner:
    inputting-numbers-to-change-border-radius
  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.

Embedding Videos

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

Smart Builder makes adding videos to your landing page easy by offering video section templates that are optimized 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 popup, 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. A play button will appear on the bottom left-hand side of the placeholder: 
    video-play-button-below-grey-placeholder
  6. Click the play button to launch the Add Video popup.
  7. Enter the video URL of your video into the Youtube URL field to add the video to the section: 
    embedding-a-video-from-youtube-within-grey-placeholder
  8. When you’re happy with these changes, click the  icon at the top right corner to close the Add Video popup, and be sure to Save your page.

Note:

At this time, Smart Builder currently accepts Youtube video formats only.

Glossary

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

Related Articles

Working With Section Templates

Understanding the Smart Builder Interface