Adding Images in Classic Builder


Images are crucial to your landing page design - by using the drag and drop Images widget image5.png in the Classic Builder, you can customize images to your liking and get your page looking pretty as a picture. 

Over 2000 free images exist in the Unbounce Image Library and over 1,000,000 free high-quality images and pictures from Unsplash, integrated right into the Unbounce builder.

If you’d prefer to use your own images rather than the stock ones we provide, you can upload your own creations to your Unbounce Media Library and sort them by creation date, name, or file size so you'll never lose that sweet cat pic you added last week.

This article will explain how to:

Add Images to Your Landing Page

  1. Navigate to the Unbounce Builder where you’d like to add your new image.
  2. To add your first image, drag and drop the Image widget image5.png from the left-hand side of the Builder onto your landing page.
  3. This will also open the Choose Image image5.png dialog box.
  4. There are three options for adding images to your landing page using the Choose Image dialog box. All options are available by clicking through the tabs at the top left-hand corner of the dialog box:
    • My Images: this is where you can sort through any images you’ve uploaded yourself to the Unbounce Page Builder.
    • Unbounce Public Images: these images are provided by Unbounce and free to anyone who’d like to use them!
    • Unsplash Images: high-quality stock photos available for use. image10.png

      Note: Choosing an Unsplash Image will import that image into your personal My Images tab.

  5. You can sort through these images using the Sort drop-down menu in the top left-hand corner of the dialog box. Click the arrow on the right-hand side of the drop-down menu to toggle ascending or descending order.
  6. You can also look for specific images using the Search Images field in the top right-hand corner of the dialog box.
  7. To add a selected image onto your landing page, double-click the image to add this directly onto your page, or select the image & click the Choose button at the bottom right-hand corner of the dialog box.
  8. You're all set! The image will now show on the landing page. 

To replace or change an image, double click on the image to reopen 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. 

Within the Properties tab, scroll down and locate the Image Properties section. 

Update any the image's alt text or title here: 


Upload Your Images Into the Unbounce Builder

You may have your own fabulous image that you’d like to use on your website rather than our Unbounce or Unsplash stock photos. This next set of instructions will tell you how: 

  1. Navigate to the Unbounce Builder where you’d like to add your new image.
    • If there is already an existing image, double click that image to replace it and access the Choose Image dialog box.
    • If there isn’t already an existing image, drag and drop the Image image5.png widget from the left-hand side of the page where you’d like to insert an image. This will also open the Choose Image dialog box.
  2. In the Choose Image dialog box, click the Upload New Image button in the bottom left-hand corner of the page. This will bring up a dialog box that accesses the files on your computer.image6.png
  3. Navigate through your computer and find the image that you’d like to upload to Unbounce.
  4. Once you’ve found the right image, double-click on the image file.
  5. You'll see you're newly added image within the Choose Image dialog box. Click the image you’ve just uploaded and select the Choose button at the bottom right-hand corner of the dialog box to add your new image to your landing page.add-new-image-choose-image.png

Scale & Resize Your Images

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

The dialog box will provide you with 2 different options:

  • Scale the Image to Fit: this will resize the image to fit into the dimensions you’ve designated as your image's boundaries. These boundaries are called the "Mask" and may end up covering or obscuring part of your image. You can restore the full image by clicking the Edit Mask button beneath your recently added image.
  • Don’t Scale: the full size of the image is inserted.


Click the button for whichever option you’d prefer for your image.

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 images' 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. 

Remove & Delete Your Images from the Unbounce Builder 

If you'd like to remove an image from your landing page, click the Delete button at the top of the Unbounce builder.

Rest assured, if you remove an image from your landing page, it will still exist in the Image Library in case you'd like to re-add this back onto your landing page:


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.


This will remove the image from your My Images library. Do note: deleting an image is permanent. 

Custom Image Features

Unbounce's custom code feature gives you the freedom to customize how images display on your landing page. As an example, check out this Unbounce Community post that explains step-by-step instructions on how to Add 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. 

Select Multiple Images

To select multiple images simultaneously, hold down the Shift key on your keyboard while you click the two images. Move the images using your mouse or arrow keys. 

Frequently Asked Questions

What image files do you support?

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

Do you agree or disagree with this statement: This article helped me find the information I needed quickly and easily.

Select an option and leave us some feedback in the comments:

Strongly DisagreeDisagreeSomewhat DisagreeUndecidedSomewhat AgreeAgreeStrongly Agree

Measuring Customer Effort Score with Nicereply