Adding Images & Videos to Smart Builder

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 how to add image and video elements to your Smart Builder landing page using our pre-designed section templates.

• Adding Section Templates with Images,
• Uploading Images to Smart Builder,
  1. Drag and Drop Images, or
  2. Upload Images Manually
• Customizing Image Properties (cropping images, adding alt text, adjusting the border radius, etc.),
• Deleting Images,
• Embedding Videos, and
• Adding Hyperlinks to Images

Adding Section Templates with Images

To add an image to your landing page, you must add a section template containing an image placeholder. 

1. Log in to Unbounce Conversion Intelligence™ Platform, 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. Click the plus icon beneath an existing section; a new window will appear with section templates to choose from. 
   
   • See our documentation to learn more about Section Templates. 
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:
   
5. Click on a section and it will appear in Smart Builder.

Uploading Images to Smart Builder

To upload images, you can either drag and drop the images directly onto your page, or upload images manually from the image library.

Drag and Drop Images

1. Locate the image you want to use in Smart Builder within your operating system (a folder within your PC, or an image saved to your desktop, etc.). 
2. Navigate back to Smart Builder. 
3. Drag and drop the image directly into Smart Builder:
   
   
   • If you work with two screens/monitors, you can drag the image from one screen over to the next into Smart Builder. 

Upload Images Manually

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:
   
   
3. From the Edit Image settings pop-up, click on the upload  icon to upload an image:
   
4. Choose an image from the Image Library, or upload an image from your computer using the upload  button.
   • Or select an image from Unsplash or Pexels.
5. Click the blue Choose Image button.  
6. Wait a few moments for it to appear in Smart Builder:
   

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

Did you know you can add images from the Unsplash or Pexels library into Smart Builder? See our documentation to learn more: Adding Images from Unsplash or Pexels (Beta) to Smart Builder.

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.
2. Next, click the square icon on the bottom left-hand corner of the image to launch the Crop Settings: 
   
   
3. Move the Image Size slider to adjust how much of your image is visible within the set dimensions of the placeholder's boundaries: 
   
   These boundaries are called a "Mask" and may end up covering or obscuring part of your image.
4. Use your mouse to drag and position your image within the boundaries of the image mask.
5. When you're happy with these changes, click Apply to finalize the changes. 

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.

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:
   

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:
   
   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:

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 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:
   
   
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: 
   
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. 

Adding Hyperlinks to Images

Say you want page visitors to click an image, and be redirected to a different page or website? You can add outgoing links or other click actions to images on your page in Smart Builder.

1. Single-click an image in Smart Builder.
2. Select the link  icon, and the Link Settings pop-up will appear.
3. Select the Web Address button; a blank field will appear in the pop-up. 
4. Type or paste in the URL of the web page you wish to hyperlink:
   
   • Enable Conversion Tracking if you want to capture conversions whenever a visitor clicks this image. 
5. Click the close  icon to update the image with the link. 

Be sure to Save your page to finalize the changes. 

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