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 filesize so you'll never lose that sweet cat pic you added last week.

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

OR

  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

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").


Properties

Whenever you single click an image you'll see the Properties tab for that image on the right of the interface. From here you can see and manually adjust the dimensions of the image, add alt text, or even make the image a link. You can also add a border or round the corners (click the plus to round the corners individually).


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

Glossary

Unbounce Public Images Library: an extensive library of stock images and icons accessible through your Unbounce account.

 

Back to: Building Your Landing Pages >>

Was this article helpful?
2 out of 4 found this helpful
Powered by Zendesk