Adding Images

Follow

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.

Find the perfect image or picture for your landing pages or pop ups. There are over 900 free images in the Unbounce Image Library and over 550,000 free high quality images and pictures from Unsplash, integrated right in the Unbounce builder and available for everyone. Get started faster and build beautiful, high converting campaigns with more control and ease than ever.

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
  • Accessing images from the Unsplash 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. Or, select the Image from your library or from Unsplash Images
    • You can also select from the Unbounce Public Image Library or Unsplash Images via the top tab navigation 
  4. Click Choose to add the image to your page
OR
  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").


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.
    Screen_Shot_2018-08-13_at_2.32.27_PM.png

    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


 

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 top navigation tabs of the Media Library.
  5. Select an image to add it to the page.

Using Unsplash Images

Unbounce is integrated with Unsplash to provide an additional 550,000 free stock images and icons. Available to all current plans in Unbounce use the perfect image for every campaign, for free! 

In just a few clicks, find the right image or picture to convert visitors without navigating away from what you’re doing. With the Unbounce Unsplash integration, you can stop adding costs to your campaigns because the full library of high-quality images is free for everyone.

Adding images from the Unsplash library follows the same formula as above.

  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 “Unsplash Images” from the top navigation tabs of the Media Library.
  5. Select an image or (you can also search by keyword) 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).

  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 15 found this helpful