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
- Double click an existing image to replace it
- Drag and drop the Images Widget onto your page from the widget panel on the left to add a new image
- Click Upload New Image
- Select an image from your computer which will be added to your Image library
- You can also select from the Unbounce Public Image Library via the drop down at the top of the dialog
- 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").
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:
- If you haven't already, add a new lightbox button by dragging and dropping the widget from the panel on the left.
- Under the "Appearance" section of the Properties pane, click the "Style" drop-down menu and select "Image".
- 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.
- 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!
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.
- Log in to Unbounce.
- Open a page in the Editor.
- Either double click an existing image, or drag the image icon onto the page to open your Media Library.
- Select “Unbounce Public Images” from the drop-down menu at the top of the Media Library.
- Select an image to add it to the page.
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).
- Click on your image to see its properties pane on the right
- Under “Click Action” select “Open URL in Lightbox”
- Enter the URL of the full size image you’d like to load in the lightbox
- Adjust the size of the Lightbox to match the image you want to display