Image Widget

This feature available on All Plans

Overview

The Image Widget displays a single image in your campaign, automatically scaling to fit different screen sizes. You can also set the image to:

• Link to a website.
• Trigger an action (similar to links in the Buttons Widget).

Adding the Image Widget

To add the Image Widget to your campaign:

1. Click the Image Widget icon in the Add Widgets Panel, or
2. Drag the icon into your preview area.

Note: If you’re looking for recommended image dimensions for different templates, refer to our Image Size Guide for detailed suggestions.

Widget Settings

The widget settings popup allows you to customize your Image Widget.

Renaming the Widget

1. Click the pencil icon in the top-left corner (next to the widget name).
2. Type the new name and press Enter.

CSS ID

• The CSS ID (starting with a #) is displayed in the top-right corner of the popup.

Customization

• Navigate through the menu on the left to adjust settings. Use the Back and Next buttons to move between sections.

When finished, click the blue Save and Exit button.

Setup (Selecting an Image)

To add an image to your widget, click Select Image in the Setup section.

Note:

• Maximum file size: 10MB
• Accepted file formats: PNG, JPG, and GIF

Choosing an Image from the Media Library:

1. If the image is already in your library:

   • Click the thumbnail to select it (it will be highlighted in gray).
   • Click Use Selected.

2. To upload a file from your desktop:

   • Drag and drop the file into the Media Library.
   • Once uploaded, click the image and select Use Selected.

3. To upload via file selection:

   • Click Select Files in the top-right corner.
   • Choose the file from your computer.
   • Highlight the image and click Use Selected.

4. To upload an image via URL:

   • Click Enter URL in the top-right corner.
   • Enter the image URL and click Upload.
   • Select the uploaded image and click Use Selected.

5. To use an image from Pixabay:

   • Click Pixabay at the top of the Media Library.
   • Choose an image and click Save to Media Library.
   • Go back to Media Library, select the image, and click Use Selected.

For detailed instructions, see the Media Selector Help Doc.

Options

The Options section allows you to configure text associated with the image:

• Alt Text: Describes the image when it cannot be displayed.
• Title Text: Provides additional information, shown as a tooltip in some browsers when hovering over the image.

Note: Both Alt Text and Title Text enhance accessibility by enabling screen readers to describe the image for users with visual impairments.

Visibility

To control when and where the Image Widget appears, use the Visibility section to:

• Set specific date and time visibility.
• Display the widget only in the Builder.
• Restrict visibility to certain countries.

For more details, refer to the Widget Visibility Help Doc.

Extras

Explore advanced customization options in the Extras section, including:

• Main Tag
• CSS Classes
• Smart Labels

Learn about the Main Tag, CSS Classes, and Smart Labels settings here. 

Carousel Images

ShortStack's Image Widget does not support carousels.