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
After dragging an image widget onto your page, click on the widget or hover over it. Select the photo icon to choose an image.
When the image manager opens, select Upload Images. Then, drag your image file onto the popup window to upload it—or click Select File to open your browser’s standard file picker.
As you increase the number of uploaded and purchased images within your account, you may find the need to locate specific images previously added. You can quickly locate those images using search. Click the All Images tab from the image manager and enter your search term in the search field in the top right corner to see all images matching your term.
NOTE: Search by the filename, image title, alt text, and file type (ex. JPG, ICO).
Edit the image
After you have uploaded an image, it will appear under All Images. To edit your image, such as crop, flip, rotate and more, click on the image then Edit at the bottom-left corner of the image preview.
NOTE: When you're finished, click Save Copy in the bottom-right corner of the image editor. A copy of the edited version of your image will be saved to your Leadpages images library without affecting the original image you uploaded to your account.
Adjust image size
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.
NOTE: While these size options are available. from the widget options, in order to make multiple images uniform, you may need to resize or crop the images to equal size before uploading them to Leadpages or by using the image editor.
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 in the image manager 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.
Steps to purchase
- Select the Premium Images tab from the image manager, then browse the Shutterstock gallery or search using keywords for images you'd like.
- Click on an image to preview it in more detail, then Buy Image to begin the purchase.
- Click Complete Purchase.
Your purchased images can be found under the All Images tab when adding images to any of your Leadpages sites, landing pages and/or pop-ups.
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 a click event by linking it to another page, section, or popup opt-in form. Start by clicking the link icon in the image options toolbar. Then, select the Open a pop-up, Open a Calendly pop-up, Jump to a page section, Link to a landing page, or Link to an external URL option to configure your link.
To remove a link from an image, select the radio button next to another option.
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 Support in your Leadpages navigation menu, or submit a ticket ↗