Skip to main content
Landing Pages Pop-ups Contests & Sweepstakes Refer-a-Friend Quizzes Social Media Instant Win Analytics Customize Everything 🎁 Free Tools View All Features
Pricing Templates
Blog Why ShortStack Enterprise & Agencies Help center
Start Free Today Book Demo Hire Us Log in to your account

Image Widget

All plans Last reviewed

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 or trigger an action (similar to links in the Buttons Widget).

Overview

The Add Widgets panel with the Image Widget icon, a picture frame, circled in green.

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.

Widget settings

The widget settings pop-up 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 pop-up.

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

The image is already in your library

  1. Click the thumbnail to select it (it will be highlighted in gray).

  2. Click Use Selected.

Upload a file from your desktop

  1. Drag and drop the file into the Media Library

  2. Once uploaded, click the image and select Use Selected.

Upload via file selection

  1. Click Select Files in the top-right corner.

  2. Choose the file from your computer.

  3. Highlight the image and click Use Selected.

Upload an image via URL

  1. Click Enter URL in the top-right corner.

  2. Enter the image URL and click Upload.

  3. Select the uploaded image and click Use Selected.

Use an image from Pixabay

  1. Click Pixabay at the top of the Media Library.

  2. Choose an image and click Save to Media Library.

  3. Go back to Media Library, select the image, and click Use Selected.

Learn more about the Media Selector.

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

Control when and where the widget appears using the Visibility section.
Options include:

  • Setting specific dates and times for visibility.

  • Displaying the widget only in the Builder.

  • Limiting visibility to certain countries.

Learn more about Widget Visibility.

Extras

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

ShortStack's Image Widget does not support carousels.

Image Widget styling options

When the Widget is selected, you can customize the styling of the specific widget. Some of the options include changing the background color, the maximum width of the widget, and widget alignment. You will see the following areas of styling available in the Style Panel:

  • Widget Visibility

  • Widget Background

  • Widget Spacing

  • Widget Borders

  • Widget Text

Adding and Editing Image (Video)

Image Size Guide (Help Docs)

Related articles

Was this helpful?