Need help? You’ve come to the right place

What’s New Getting Started Building Integrating Publishing

The image widget

Last Updated

Add photos, your logo, and other graphics to your pages using the image widget. You can even link images to a URL, landing page, pop-up, a Calendly pop-up, or another section on the page. Read on to learn more about using and customizing the image widget.

 

How to use the image widget

Upload images

After dragging an image widget onto your page, click the photo icon to access the image chooser.

When the image picker pops up, select Upload. Then, drag your image file onto the popup window to upload it—or click Or Select File to open your browser’s standard file picker.

NOTE: Maximum file size is 15MB. Leadpages supports the following image filetypes: JPG, PNG and GIF

If your image is too large, we would recommend using an online resource like one of these listed below, then add the image to your page.

Purchase premium images

Even if you don't have a professional photographer built into your business' budget, you can still utilize professional photography using Leadpages and Shutterstock.

Click the Premium Images tab on the image widget to search an expansive Shutterstock image library. Purchase an image for as low as $7.99 USD and have unlimited use of the image throughout your Leadpages account.

NOTE: These images are for use in your Leadpages account only. Be sure to read Shutterstock's "Image Guidelines" at purchase. Premium image purchases are non-refundable.

Steps to purchase

  1. Select the Premium Images tab on the image widget, then browse the Shutterstock gallery or search using keywords for images you'd like.
  2. Click on an image to preview it in more detail, then the Buy Image button to begin the purchase.   
  3. Click Complete Purchase.
NOTE: The payment method on file with your Leadpages account will be the default used for Shutterstock purchases. Clicking "Update" under the payment details will direct you to your account settings where you can change your payment method for Leadpages. This will change the payment method for your Leadpages subscription as well.

Your purchased premium images can be found under the My Images tab when adding images to any of your Leadpages sites, landing pages and/or pop-ups.

Resize images in the builder

Images automatically fill up the space they’re given in your layout, so you don’t need to worry about specific image dimensions. You can change how much space an image takes up by adjusting its width and alignment. Click any image, then the paintbrush icon and adjust the width slider.

It’s also possible to set a maximum width in pixels for your image, which is especially helpful for graphics like logos and icons. You do not need to enter “px” or “pixels” when setting a max width.

To make an image larger, you’ll need to adjust the spacing between columns—to learn how, check out Customizing Page Layout and Section Styles.

Image optimization

We automatically optimize your images in order to serve your pages as quickly as possible. This means that images will be loaded as visitors scroll down your page. However, we realize that this type of fast-loading optimization isn't for everyone and there are going to be times you want all of your images to load to their full resolution immediately. In these cases, check the box next to Do Not Optimize This Image.

Link an image to a URL, pop-up, Calendly pop-up, landing page, or page section

​Turn any image into an actionable element by linking it to another page, section, or popup opt-in form. Start by clicking the chainlink icon in the image options toolbar. Then, select the Open a pop-upOpen a Calendly pop-upGo to an external URLGo to a landing page, or Jump to a page section option to configure your link.

To remove a link from an image, click the link icon, then Remove.

For more on click events ↗

Customization and styling details

By click the paintbrush icon, you can select between Square, Rounded, and Circular—which control the appearance of your image’s corners and edges. Note that these options do not mask or crop your image. To create a perfectly circular image, first upload an image with equal width and height dimensions, then select the Circular style setting.

Adjust image alignment

You can also adjust your image’s alignment under its style settings. Click the paintbrush icon in the widget settings, then choose from left, center, or right aligned options (as shown below).

Set image titles and alt text

When you select an image for your page, you can specify custom title and alt text to describe the image. Adding these details to your image can help describe your image to users who have images disabled or who use a screen reader. Many search engines also rely on alt text and image titles for providing relevant results.

You can get back to this screen by clicking the photo icon in the image widget options.

Tips and frequently asked questions

Tip: If you’re pairing an image with text, consider using the Image + Text widget

The Image + Text widget is designed specifically for laying out text and images together. You’ll gain more control by using the image and text widget than you’ll have with our layout tools alone.

Tip: Best practices for non-photo image files

For elements like your company logo, we recommend using the PNG format with a transparent background. You can use a variety of photo-editing programs to remove the background from an image and export it as a PNG file. That way you can adjust your background colors without interfering with your image.

If you’re looking for icons to use on your pages, you can use our built-in icon widget instead of uploading your own image.


Need more help?

You can always get in touch with our support team—just click help_circle in the top-right corner of your Leadpages dashboard, or submit a ticket ↗

Was this article helpful?
Powered by Zendesk