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 and click the edit icon to open its settings. Select the photo icon to choose an image.
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.
If your image is too large or you would like to crop the photo, 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.
Steps to purchase
- Select the Premium Images tab on the image widget, 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 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.
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 chainlink 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, click the link icon, then Remove.
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 ↗