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.
- Adding Section Templates with Images,
- Uploading Images to Smart Builder,
- Drag and Drop Images, or
- 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.
- Log in to Unbounce Conversion Intelligence™ Platform, and launch your page in Smart Builder.
- Hover your cursor over an existing section (or near where you'd like to add your new section).
- 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.
- 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:
- 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
- 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.).
- Navigate back to Smart Builder.
- 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
- Click the grey image placeholder on your page.
- Or, double-click the grey image placeholder to launch the Image Library automatically.
- From the buttons that appear, click the pen icon to launch the Edit Image settings:
- From the Edit Image settings pop-up, click on the upload icon to upload an image:
- 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.
- Click the blue Choose Image button.
- 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.
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.
- To begin, select your image in your section template.
- Next, click the square icon on the bottom left-hand corner of the image to launch the Crop Settings:
- 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.
- Use your mouse to drag and position your image within the boundaries of the image mask.
- 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.
- Single-click your image.
- Click the pen icon to launch the Edit Image settings.
- Scroll down to the field labeled Alt Text.
- 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.
- From the Edit Image settings, scroll down to the Border Radius section.
- 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.
- 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.
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:
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.
- To add a video to your landing page, hover your cursor over an existing section.
- Locate the plus icon that appears beneath that section.
- From the Add Layout pop-up, select a section template from under the Video tab:
- A new video section template will appear on your page in Smart Builder.
- Click on the grey placeholder in that section.
- Click the Add Video button that appears on the bottom left-hand side of the placeholder:
- Enter the video URL of your video into the Youtube URL field to add the video to the section:
- 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.
- Single-click an image in Smart Builder.
- Select the link icon, and the Link Settings pop-up will appear.
- Select the Web Address button; a blank field will appear in the pop-up.
- 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.
- Click the close icon to update the image with the link.
Be sure to Save your page to finalize the changes.
Image Mask: Masking an image allows you to hide or reveal specific portions of an image.