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 pop ups. There are over 2000 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, available for Enterprise, Premium and Essential plans.

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 help you out with:


Adding Images to Your Landing Page

 

  1. Navigate to the Unbounce page where you’d like to add your new image.
    1. If there is already an existing image, double click that image to replace it and access the Choose Image image5.png dialog box.
    2. If there isn’t already an existing image, drag and drop the Image widget from the left-hand side of the page to the space on your landing page where you’d like to insert an image. This will also open the Choose Image image5.png dialog box.
  2. In the new Choose Image dialog box, you have 3 options for images. All options are available by clicking through the tabs at the top left-hand corner of the dialog box:
    1. My Images -- this is where you can sort through any images that you’ve uploaded yourself to the Unbounce Page Builder (Upload a New Image to Unbounce).
    2. Unbounce Public Images -- these images are provided by Unbounce and free to anyone who’d like to use them!
    3. Unsplash Images -- high quality stock photos available for use to anyone on Enterprise, Premium and Essential plans.
  3. image10.png
    Note: Selecting an Unsplash Image from the Image Library will cause your selected image to load in your My Images tab.
  4. 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.
  5. image3.png
  6. You can also look for specific images by using the Search Images field in the top right-hand corner of the dialog box. Tabbing through the 3 image library options will allow you to do a search for specific images in that image library using this field.
  7. image2.png
  8. Once you’ve selected an image that you’d like to use, you can either:
    1. Double Click the image.
    2. Click the image then click the Choose button at the bottom right-hand corner of the dialog box.
  9. This will propagate the image onto your landing page.

 Upload a New Image to Unbounce

 

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 page where you’d like to add your new image.
    1. If there is already an existing image, double click that image to replace it and access the Choose Image dialog box.
    2. If there isn’t already an existing image, drag and drop the Image image5.png widget from the left-hand side of the page to the space on your landing 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 which accesses the files on your computer.
  3. image6.png
  4. Navigate through your computer and find the image that you’d like to upload to Unbounce.
  5. Once you’ve found the right image, double click on the image file. This will bring you back to the Choose Image dialog box.
  6. Your new file should now be uploaded to Unbounce! 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

  • If you’ve accidentally uploaded the wrong image, you can delete the image by clicking on the image in the Choose Image dialog box, then clicking the Delete Selected button at the top right-hand corner of the dialog box. This will remove the image from your My Images library.

 image7.png 


Scaling Images to Fit Your Landing Page

Sometimes you may choose an image that’s too big to fit on your landing page or on the image template that you chose from the prefabricated templates that Unbounce has created. When this happens you’ll get a dialog box alerting you to the 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 of the viewable area that you’ve designated as the boundaries for your image. 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 image will be inserted at its full size.

 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 and dragging on the small boxes on the borders of your image. This will allow you to increase or decrease the size of your images to fit the dimensions of your landing page.

image13.gif


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