Adding Images

Follow

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

Find the perfect image for your landing pages or Popups. There are over 2000 free images in the Unbounce Image Library and over 1,000,000 free high-quality images and pictures from Unsplash, integrated right in 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.

We currently support .bmp, .gif, .jpg, .jpeg, .png, and .svg image files. 

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.
    image3.png
  6. You can also look for specific images using the Search Images field in the top right-hand corner of the dialog box.
    image2.png
  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. 

“change-image-in-builder”


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.

 image12.png 

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.

“resizing-image”

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:

remove-image-from-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.

“hard-delete-an-image”

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. 

Unbounce made it easy for me to find the information I need.
Strongly DisagreeDisagreeSomewhat DisagreeUndecidedSomewhat AgreeAgreeStrongly Agree

Measuring Customer Effort Score with Nicereply