Adding and Editing Images


Images are crucial to your landing page design. Luckily, they're quick and easy to manage. By using the drag and drop Images Widget, you can customize images to your liking and get your page looking pretty as a picture.

The Unbounce shared images library is chock full of over 900 for your perusal. We hope you'll find something that's perfect for your campaign.

If stock images aren’t your bag, 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 help you out with:

  • Accessing images from the Unbounce Public Images Library
  • Uploading and incorporating your own images into the Unbounce Page Builder
  • Changing image properties
  • Aligning images and creating professional looking page design

Adding Images to Your Landing Page

  1. Double click an existing image to replace it


  1. Drag and drop the Images Widget onto your page from the widget panel on the left to add a new image
  2. Click Upload New Image
    • Select an image from your computer which will be added to your Image library
  3. Select the Image from your library
    • You can also select from the Unbounce Public Image Library via the drop down at the top of the dialog
  4. Click Choose to add the image to your page
  1. Drag and drop an image from Finder (Mac), My Computer (PC), or Desktop directly to the image library or page canvas

If you choose an image that's not exactly the same dimensions as the one you're replacing you'll be asked if you'd like to "Scale the Image to Fit" or "Don't Scale."

Scale the Image to Fit: maintains the same viewable area as the image you're replacing and scales the replacement image's width to make it fit - this may result in masking part of your image.  You can edit or remove the resulting mask by clicking the image and then clicking "Edit Mask."

Don't Scale: the image will be inserted at its full size.  You can always edit it with the guides or add a mask if you need one (just click the image, then click "Edit Mask").

Working with Image Resolution

To check your image resolution, single-click the image in the Builder and find "Image Resolution" in the "Properties" tab on the right.

The resolution will be displayed according to the following three resolution tiers (in ascending order of quality):

1x: Standard Definition.
2x: Retina Definition.
3x: High(er) Retina Definition.


Pro Tip

If your image isn't crisp or showing the 3x checkmark in the Builder, try uploading a version of the image with bigger dimensions.

Working with Image Alignment/Distribution

To adjust your image alignment, single-click the image in the Builder and use the Align buttons at the top or bottom of the image to choose one of the following alignment options:

  • Align Left.
  • Align Horizontally.
  • Align Right.
  • Align Top.
  • Align Vertically.
  • Align Bottom.


When you select three or more images at the same time (see Multi-Selecting Images for a quick rundown on how to do this), you'll see two more options for distribution. These options will evenly distribute the selected elements horizontally and/or vertically:

  • Distribute Horizontally.
  • Distribute Vertically.


Multi-Selecting Images

To select multiple images at the same time, hold down Shift and click each image.

Adding an Image to a Lightbox

The Builder can support a maximum of 20 lightboxes per page.

To add an image to a Lightbox button:

  1. If you haven't already, add a new lightbox button by dragging and dropping the widget from the panel on the left.
  2. Under the "Appearance" section of the Properties pane, click the "Style" drop-down menu and select "Image".
  3. In the "Choose Image" window that appears, select or upload the image you would like to display as your Lightbox button image preview.

    The image will not be editable within the Page Builder, so you will need to ensure the image is already sized as desired.

  4. Remove the default button styling (e.g. remove border, remove label text, modify corner radius to "0") as desired to create a plain image look.

    Now go forth and add images to your lightboxes!

Related articles:

Loading Content into a Lightbox
Loading a Form into a Lightbox

Align Your Images Using Page Guides

The Unbounce Landing Page Builder generates guide lines for you to use when lining up multiple elements on your landing page. These green lines allow you to align your image with the other elements on your page or center them within boxes or page sections.

Filtering and Sorting Your Media

You can easily sort files by the creation date, name, or filesize in ascending or descending order. In addition you can also search for a particular file by filtering your library. To find out how simply follow the steps below.

  1. Log in to Unbounce.
  2. Open a page in the Editor.
  3. Either double click an existing image, or drag the image icon onto the page to open your Media Library.
  4. Filter your library by typing in the Filter textbox.
  5. Click Created, Name, or Filesize to sort the library in ascending or descending order.

Note: Each sub-account has a unique media library.

Renaming Images

Need to rename an image!? No problem! Just follow the simple steps below.

  1. Log in to Unbounce.
  2. Open a page in the Editor.
  3. Either double click an existing image, or drag the image icon onto the page to open your Media Library.
  4. Move the mouse over an image to show the Rename and Delete buttons.
  5. Click Rename.
  6. Hit enter or click the checkmark once you have input the new name.

Note: We do not currently support image names with non-roman characters. Any non-roman characters will be omitted or changed to a '-' in the image name when saved.

Using Unbounce Public Images

Unbounce provides you with an extensive library of stock images and icons to use on your landing page, making it even easier to update the look and feel of your landing pages (and improve your conversion rates). Follow the steps below to access the Unbounce Public Image library.

  1. Log in to Unbounce.
  2. Open a page in the Editor.
  3. Either double click an existing image, or drag the image icon onto the page to open your Media Library.
  4. Select “Unbounce Public Images” from the drop-down menu at the top of the Media Library.
  5. Select an image to add it to the page.

Image Sliders

We don't generally recommend adding image sliders to your landing pages because they tend to decrease conversion rates (and no one wants that).

With that being said, you can check out how other Unbounce customers have added image sliders over in our community

Adding a Lightbox Style Window for Image Previews

If you don’t already have the image thumbnail on your page, drag and drop the image widget from the left.

The full size images you link to need to be hosted either on your own domain or with any number of free image hosting services (just Google 'image hosting' and you'll find a plethora).

  1. Click on your image to see its properties pane on the right
  2. Under “Click Action” select “Open URL in Lightbox”
  3. Enter the URL of the full size image you’d like to load in the lightbox
  4. Adjust the size of the Lightbox to match the image you want to display 

Was this article helpful?
6 out of 12 found this helpful