Image Widgets

Before setting up the Image Widget, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll get access to all free widgets, including the Image Widget—completely free! You can also explore both free and pro widgets by using the filter options.

The Image Widget for Elementor offers easy customization, allowing you to adjust image size, alignment, hover effects, and more to create visually engaging and interactive web pages.

Key Use Cases for the Image Widget in Elementor:

• Use the image widget to display product images, create portfolio galleries, or design hero sections and banners.
• Showcase blog post featured images, team members, testimonials, and before-and-after transformations.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Image Widget

• Click on Animation Addons in your WordPress dashboard.
• Find the Image Widget in the list.
• Toggle it on to enable the widget.

Now, the Image Widget is ready to use!

How to Add the Image Widget in Elementor:

• Open the page you want to add the Image widget.
• Launch the Elementor editor.
• In the Elementor panel, search for “Image Widget.”
• Drag and drop the widget to your desired section.

Your Image Widget is now ready to use! Here’s the interface where you can configure the settings and customize the image across various tabs for a personalized effect.

Configuring Image Widget in Animation Addons: A Step-by-Step Guide.

The Image widget is available in Elementor and can be placed on the desired section of the page. It offers three main settings tabs: Content, Style, and Advanced.

In the Content settings of the Image Widget, you’ll find the option to upload your image and the Image Animation feature, available in the editor panel. Note that animations are part of the Pro version.

Content Settings

The Content section lets you choose your preferred image, adjust its resolution, and set the alignment.

Image Animation

After selecting the Image Animation option, you’ll have access to the “Enable on Editor” option, the “Play Animation” button, and the “Data Ease” setting to control the animation’s ease and flow.

Reveal

After enabling these options, the “Enable on Editor” option allows you to preview the animation in the editor, while the “Play Animation” button triggers the animation when clicked. The “Data Ease” setting adjusts the speed and smoothness of the animation, offering a more fluid and dynamic effect.

ScaleIf you choose the “Scale” option for image animation, the image will gradually grow (scale up) or shrink (scale down) based on the animation settings. This creates a dynamic zoom-in or zoom-out effect that draws attention to the image. You can control the speed, direction, and smoothness of the scaling animation using the available options.

By choosing the “Scale” option for image animation, you will have access to several settings:

• Enable/Editor Toggle: Allows you to enable or disable the animation in the editor.
• Play Animation Button: A button to preview the animation effect.
• Start Scale & End Scale: Controls the initial and final scale values of the image, adjusting the zoom-in or zoom-out effect.
• Animation Start: Defines when the animation begins during page load or on interaction.

Stretch

By selecting the “Stretch” animation option for the image, you will get the following two settings:

• Enable/Editor Button: Allows you to enable or disable the animation effect in the editor.
• Play Animation Button: A button to preview the stretch animation effect in action.

These two options give you basic control over the stretch animation for your image

Style Settings

In the Style section, you can customize the image’s dimensions, opacity, and apply CSS filters for effects like blur or brightness. Additionally, you can adjust border types, border radius for rounded corners, and add a box shadow for a 3D effect.

Advanced Settings 

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve now learned how to configure the Image Widget in Elementor to effectively customize and display images on your website.

If you need further assistance, don’t hesitate to reach out to our support team!