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 Images to Smart Builder
- Uploading Images to Smart Builder
- Accessing images from Unsplash or Pexels
- Editing your Images Properties
- Adding Alt Text
- Adjusting the Border Radius
- Deleting Images
- Embedding Videos
- Unsplash and Pexels FAQ
Adding Images to Smart Builder
- Log in to Unbounce Conversion Intelligence™ Platform, and launch your page in Smart Builder.
- Using drag and drop, add an image element to your page:
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:
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:
- 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 existing image from the Image Library, or upload an image from your computer using the upload button.
- Click the blue Choose Image button.
- Wait a few moments for it to appear in Smart Builder:
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:
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.
- In the Image Library window, select Unsplash Image or Pexels Image menu option at the top of the page.
- Using the search bar in the upper right-hand corner of the window, search for an image:
- 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.
- 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 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.
- 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.
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.