Adding Images in Classic Builder

Images are crucial to your landing page design - by using the drag and drop Images widget in the Classic Builder, you can add and customize images on your landing page.

Over 2000 free images exist in the Unbounce Image Library; we've integrated over 1,000,000 free high-quality images and pictures from Unsplash.

This article will explain 

• Uploading images to Classic Builder,
• Using Unbounce Public Images or Unsplash Images
• Scaling & resizing your images,
• Selecting multiple images,
• Adding Background images, and
• Removing & deleting your images,

Uploading images to Classic Builder

1. Navigate to your page in the Classic Builder.
2. To add your first image, drag and drop the Image widget from the left-hand side of the builder onto your landing page; this will also launch the Choose Image dialog box:
   
   
3. In the Choose Image dialog box, click the Upload New Image button in the bottom left-hand corner of the page:
   
   
4. Your operating system will launch a folder of your files & documents; search your files for the image you want to upload.
5. Once you've found the image, click the Open or Select button.
6. The image will appear in your Image Library in Unbounce.
7. Select the image & click the Choose button at the bottom right-hand corner of the dialog box; the image will appear on your landing page.

Using Unbounce Public Images or Unsplash Images

The Image Library also provides you with stock photos, provided by Unbounce and Unsplash:

You can also look for specific images using the search field at the top right-hand corner of the dialog box:

Double-click the image, or select the image & click the Choose button at the bottom right-hand corner of the dialog box:

You're all set! The image will now show on the landing page. 

Replacing an Image

To replace or change an image, you can

• Double-click the image to relaunch the Image Library, or
• Select the image, then the Change Image button from the Properties panel:
  

Adding Alt Text and Titles to Images

Alt text (alternative text) helps screen readers convey and explains what the image entails. Whatever Alt text you input will also appear on the landing page if the image fails to load or breaks.

Alt text also helps improve the accessibility of your website.The image title, on the other hand, provides additional context to the image. 

1. Single-click your image in Classic Builder.
2. On the left-hand side, navigate t the Properties tab.
3. Scroll down and locate the Image Properties section. Update any image's Alt text or title here:
   

Scaling & Resizing Your Images

If the uploaded image is larger compared to the size of your landing page or template, a dialog box will appear, alerting you of this size discrepancy:

Use Full Size: This option will add the image to the page, regardless of size.

Scale Image to Fit Page: This option will scale the image smaller to fit in the confines of the landing page (in other words, to fit within the landing page's width).

 

If you're replacing an image on your page, you may see the following message:

Don't Scale:This option will add the image to the page, regardless of size.

Scale Image to Fit: This option will scale the image smaller to fit the same width and height of the image you're replacing it with.

You can also manually edit your image's size by clicking & dragging the image using the resize buttons, allowing you to increase or decrease your image's size to fit the dimensions of your landing page.

For information about editing images, image quality, and centering images with page guidelines, follow our Editing Images documentation.

Image Mask

You can restore the entire image by clicking the Edit Mask button beneath your recently added image and clicking Restore Size:

Move the slider within the Image Mask dialog box to adjust which part of the image appears on the landing page.

Think of increasing the mask as zooming into the image while decreasing the mask as zooming out.  

Selecting Multiple Images

Hold down the Shift key on your keyboard to select multiple images simultaneously.

While holding down the Shift key, use the left and right arrow keys on your keyboard to move the images:

Adding Background Images

You can add background images to entire page sections in the Classic Builder. To learn more, see Managing your Page Properties (Background Sections).

Removing and Deleting Your Images

If you'd like to remove an image from your landing page, single-click the image and then the Delete button at the top of the Classic Builder:

Or, use the Delete key on your keyboard.

Rest assured, if you remove an image from your landing page by accident, it will still exist in the Image Library.

If you'd like to delete an image from your Image Library, click on the image in the Choose Image dialog box, then click the Delete Selected button at the top right-hand corner of the dialog box.

Deleting an image is permanent. 

Custom Image Features

Unbounce's custom code feature allows you to customize how images display on your landing page. For example, check out this Unbounce Community post that explains step-by-step instructions on adding an Image/Testimonial Carousel Using A Box Widget. 

Do note that the scripts and tips within the Community are custom-code workarounds - some provided by Unbounce and Non-Unbounce experts. So, custom code from the Community is outside the scope of our support. Please share your questions about this script within the Community post. 

Frequently Asked Questions

What image files do you support?

At this time, we only support .bmp, .gif, .jpg, .jpeg, .png, and .svg image files.