Adding Images in Classic Builder

Follow

Images are crucial to your landing page design - by using the drag and drop Images widget image5.png 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 how to:

Add 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 image5.png from the left-hand side of the builder onto your landing page; this will also launch the Choose Image dialog box:
    Gif demo of a user adding an image widget to the Classic Builder.
  3. 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:
    Different image libraries available
  4. 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:
    Drop-down to sort through images.
  5. You can also look for specific images using the search field at the top right-hand corner of the dialog box:
    Search bar in Image Library.
  6. To add a selected image onto your landing page, double-click the image, or select the image & click the Choose button at the bottom right-hand corner of the dialog box:
    Gif demo of a user selecting an image from the library and it appears on landing page.

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:
    Change image button within 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 image's Alt text or title here:

image-of-alt-text-box-and-title-text-box-highlights-with-Unbounce's-Properties-tab

Uploading Your Images

You can upload your own images or graphics to the Unbounce image library.

  1. In the Choose Image dialog box, click the Upload New Image button in the bottom left-hand corner of the page:
    Upload images file in the Image Library.
  2. Your operating system will launch a folder of your files & documents; search your files for the image you want to upload.
  3. Once you've found the image, click the Open or Select button.
  4. The image will appear in your Image Library in Unbounce.
  5. 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.

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

Scale & Resize 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:
Disclaimer message that appears if image is too large.

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:
Disclaimer message that appears if image replacing the other is too large.

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 images' size to fit the dimensions of your landing page.

Gif demo of a user resizing an image.

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:

Image mask feature in Classic Builder

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.  

Select 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:
Gif demo of a user selecting and moving multiple images at a time.

Remove and Delete 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:
Delete image button at the top toolbar of Classic Builder.

Or, simply 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 Libraryclick 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.

Delete image from Image Library.

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