Add the widget

image widget icon Image widget 1

To access and use a widget:

  1. In Elementor Editor, click +.
    All available widgets are displayed.

  2. Click or drag the widget to the canvas. For more information, see Add elements to a page.

What is the Image widget?

Images play a crucial role in capturing attention on websites. The Image widget allows you to add and customize pictures on your website. You can upload or select images, adjust size and alignment, apply hover effects and filters, and link photos to specific URLs.

Common use case

Tim is creating a website for a new furniture store. To attract more people, they are hosting a woodworking workshop. On the website, they strategically placed a captivating image of a craftsman in action, shaping a piece of wood, right next to the contact details. This visual instantly caught visitors’ attention, making them curious about the workshop and store.

image widget example

Additional use cases 

  • Use the image widget to create a stunning portfolio gallery. Each image can be linked to a project page or a detailed view.
  • If you’re hosting an event or webinar, the image widget can help you create visually appealing banners or posters.
  • Use images to display before and after transformations for home renovations, fitness progress, or any other transformation journey.

Add an Image widget: Step-by-step

  1. Add the image widget to the canvas. For details, see Add elements to a page.
  2. In the Content tab, under Image, click the Choose Image option.add the image widget Image widget 4
  3. Upload an image from your computer or select an image from your Media Library.upload image Image widget 6
    Tip: If you don’t want to add an image manually, you can use the Dynamic option. This feature automatically pulls images from posts (like featured images), your site’s logo, or the author’s profile picture.

    Best Practice
    Giving your image an Alt Text description in the Media Library will help boost your SEO and increase accessibility for your site. For more details, see Make your website accessible.

    dynamic image options Image widget 8
  4. In the Image Resolution field, adjust the image size: choose from thumbnail, full size, or specify a custom size.
    image resolution Image widget 10
  5. Use the Alignment field to set the alignment of the image (left, center, right).
    image alingment Image widget 12
  6. (Optional) In the Caption field, choose None, Attachment Caption or Custom Caption.
    1. Attachment Caption: Uses the existing caption from the WordPress Media Library.
    2. Custom Caption: You can add a unique caption to your image directly from the Elementor editor.custom caption Image widget 14
  7. Use the Link field to make your image clickable. Set the link destination to Media Files, add Custom URLs, or choose None.image link Image widget 16
  8. If you choose Media Files, you get an option to open image in a Lightbox:
    1. You can choose whether to show images in a lightbox. Selecting Yes or No will override the default lightbox setting.
      Image widget 18
    2. If you’re adding a Custom URL:
      lightbox custom url Image widget 20
      1. Click the ⚙️ to set the link to either open in a new window or to add rel=nofollow to the link.
      2. Use the Custom Attributes option to assign custom attributes to the link element. Use the | (pipe) for key-value separation and commas to separate pairs.

Delete an image

There are two ways to delete the image in the image widget.

To delete the image:

  • In the panel, hover over the image and click the trash icon The trash icon Image widget 22 .
    Clikc the trash icon Image widget 24

    The image is deleted.

  • In the panel, click the image. This will open the media library Where you can select a different image.

Create a link from an image

You can’t link from an image. However, you can add a link to a container. So if you want users to click an image to activate a link, put the image in a container and add the link to the container. For details see, Make a container clickable.

Related articles

Settings for the Image Widget

You can customize your widgets using content, style, and other advanced parameters, offering you great flexibility in tailoring them to your needs. Click the tabs below to see all the settings available for this widget.

content tab of the image widget Image widget 26

Add your image or select dynamic tags to automatically use the post’s featured image, site logo, or author profile picture.

Determine the image size.

The image can be aligned to either the left Align left Image widget 28, right align right Image widget 30or centeralign center Image widget 32 of the widget. This is relevant when the image is smaller than widget.

The examples below show an image aligned to the left center and right. The border of the widget itself is in pink.

2025 02 12 13 32 46 Image widget 34

CEnter Image widget 36

right Image widget 38

 

Add an optional caption below the image. Choose to curate a custom caption or use the attached caption from the WordPress Media Library.

Link the image to its respective Media Files, add Custom URLs or choose None.

style tab of image widget Image widget 40

Use the slider to adjust the image width.

This is the minimum width for the widget. See Max width below to see how Width and Max Width work together.

Use the slider to define the maximum width for the image.

Setting a Max Width allows the widget to expand if needed or able. Thus helps keep the design consistent for different screen sizes.

For instance, you can set an image to take up 100% of a container’s width with a Max Width of 600 px. This way the image will be as wide as the contain but will never expand to more than 600 pixels wide. 

Choose a height for the image using the slider. After selecting the height, you can pick how the image fits:

The options for Object Fit are:

  • Fill: Makes the image completely cover the space, even if it changes the image’s shape and proportions.
  • Cover: Stretches the image to fit the width but might cut off parts of it.
  • Contain: Keeps the whole image inside, but you might see blank areas around it.

Determine how the image appears by default.

  • Opacity: Adjust the image transparency.
  • CSS Filters: Apply filters such as Blur, Brightness, Contrast, and Saturation.

Determine how the image appears when moused over.

  • Transition Duration: Determine the duration of the hover animation.
  • Hover Animation: Click the dropdown to choose hover effects that activate when someone hovers over the image.

Select a border style from None, Solid, Double, Dotted, Dashed, or Groove. For more details, see Border type.

 

To create rounded corners around the image, increase the border radius. For more details, see Border radius tools. 

Click the 🖋️ icon to add a shadow to the image. Learn more about shadows.

image widget advanced tab Image widget 42

To learn more about advanced settings, see Advanced Tab.