This feature available on All Plans
Contents
Widget Settings
Setup (Selecting an Image)
Options
Visibility
CSS Class
Overview
The Image Widget displays a single image in your campaign that automatically scales depending on screen size. In addition to displaying the image, you can also set the image to link to a website, or trigger an action (similar to the links in the Buttons Widget).
To add one of these widgets to your campaign, click the Image Widget icon in the Add Widgets Panel, or click and drag the icon into your preview area.
Note: Before adding images to your campaign, you may be looking for recommended image dimensions for the different templates. Lucky you, we have a guide that has all that information! Head on over to the Image Size Guide to see our suggestions.
Widget Settings
The widget settings popup is where you'll make any needed changes to your Image Widget. To change the widget name, click on the pencil icon in the top-left (next to the name) then type your new name.
You will also see the CSS ID (starting with a #) of your new widget listed in the top-right corner of the popup.
You'll want to move through each item in the menu on the left side to make sure you've completely customized the Image Widget in the way you'd like. You can navigate through these sections using the Back and Next buttons at the bottom.
When you're finished making changes to your widget, click the blue Save and Exit button.
Setup (Selecting an Image)
In the Setup section, click Select Image to choose the image you wish to add.
Note: The maximum filesize for an image on our platform is 10mb. The accepted file formats are png, jpg, and gif.
This will open your Media Library, where you have a few options:
If the image you want to use is already in your library, click the thumbnail of the image you want to use (it will highlight in gray), then click the Use Selected button.
If you have a file on your desktop that you'd like to use, you can drag and drop it into the Media Library. It will upload the file, then you'd click to select it and click Use Selected.
If you'd like to upload a file from your computer, click Select Files in the top right.
A window will pop up allowing you to navigate to and select the image you'd like to use. Once selected, the image will upload to the library; you'd highlight it and click Use Selected.
If the image you want to use is already stored online, click Enter URL in the top right.
A field will pop in that allows you to type or paste the URL where your image is located. Once you have it entered in, click on the Upload button.
The image will then appear in your Media Library, where you can click on it, then click Use Selected.
The last option would be to use an image from our stock library, provided by Pixabay. Click on Pixabay at the top of the library, then click on the image you'd like to use. Click on Save to Media Library to save a copy of that stock image to your account's Media Library.
From there, click on Media Library to flip back to your images, and you'll see the image you saved - from there just highlight it and then click Use Selected.
Note: For additional in-depth information about the Media Selector, check out this help doc.
Options
The Options section allows you to change some of the text associated with the image displayed in your widget.
Use the Alt text field to specify alternative text to appear when the image cannot be shown.
Use the Title text field to provide additional information to the visitor. In some browsers, the title text is shown as a tooltip when hovering over the image.
Note: Both the Alt Text and Title Text fields are primarily used by screen reader software so that a person who is listening to the content of a web page (for instance, a person who is blind) can interact with the element.
Visibility
If you'd like to limit visibility of the widget to a specific date and time, make the widget a popup, only show the widget in your Builder, or limit in which country/countries the widget can be seen; you'd do so in the Visibility section. More information about these settings can be found in the Widget Visibility help doc.
CSS Class
In this section, you can add a CSS Class that will be associated with this Image Widget - that way you can target it with custom CSS code. Rules and naming conventions are provided so that you don't use a class that won't work. Simply add your CSS class(es) to the Extra CSS Classes field.
