help center

On this page

Image widget

Last Update: March 7, 2024

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.

    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.

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 22

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.

Choose the image alignment.

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 24

Use the slider to adjust the image width.

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

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.
  • 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 26

To learn more about advanced settings, see Advanced Tab.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article