Add photos, your logo, and other graphics to your pages using the image widget. You can even link images to a URL, Lead 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 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.
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.
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, Lead 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-up, Open a Calendly pop-up, Go to an external URL, Go to a Lead 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.
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.
Where can I find more images for my pages?
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.
(Updated January 28, 2019)
Please let us know if you have additional questions.
You can always file a support ticket if you have additional questions by clicking the ? support button at the top-right corner of your account dashboard or by clicking here to file a support ticket.