Image Box

The Image Box Widget in Animation Addons for Elementor is a completely free feature. To use this widget, simply ensure that the plugin is installed and activated on your site. You can enjoy the full functionality of the Image Box widget without any additional cost, as it is available in the free version.

Introduction

The Image Box widget combines images and text, offering customizable size, alignment, spacing, overlays, hover effects, and animations for an interactive design.

Key Use Cases for the Image Box Widget in Elementor:

• Highlight features
• Showcase services
• Display testimonials, portfolios, pricing plans, and call-to-action sections
• Enhance blog previews, promote events, and visually present key information with text and images

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Image Box Widget:

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Image Box Widget in the list.
• Toggle it on to enable the widget.
• Now, the Image Box Widget is ready to use!

How to Add the Image Box Widget in Elementor:

• Open the page where you want to add the Image Box Widget.
• Launch the Elementor editor.
• Search for “Image Box Widget.”
• Drag the widget to your desired section.

How to Configure the Image Box Widget in Animation Addons?

• In the Elementor panel, search for the “Image Box Widget.”
• Drag and drop the widget into the desired section.
• Customize the widget settings using the available options in the Elementor panel. 

Your Image Box Widget is now ready to use! Here’s the interface where you can configure the settings and customize the Testimonial Widget across various tabs.

Configuring Image Box Widget in Animation Addons: A Step-by-Step GuideThe Image Box Widget can be added anywhere in Elementor, with three main settings: Content, Style, and Advanced.

In the Content settings of the Image Box Widget, you’ll find five options for Layout, Image, Button, and Content. Additionally, the Image Animation feature is available in the editor panel. Note that animations require the Pro version for full functionality.

Content Settings

• Layout: Choose the overall structure and alignment of your image box content.
• Image: Upload and adjust the main image.
• Content: Add and style the title, subtitle, and description.

Button: Add a call-to-action with customizable text, link, and icon.

Layout

 Here’s a brief description of each option in the Layout section:

• Style: Choose the animation style (slide, bounce)
• Direction: Set the direction the text animates (left, right, up, down).
• Gap: Adjust spacing between text and icon.

• Link Type: Choose how the link behaves (e.g., open in a new tab).
• Alignment: Set the text alignment (left, center, right).
• Icon: Add or customize an icon before/after the text.

This section gives you full control over how the widget looks and interacts with users on your website, helping to achieve a polished and professional design.

Image

In the Image section, you will find options for Image and Image Resolution. 

Image: Upload the image you want to display within the widget, which will be shown alongside your text or content.

Image Resolution: Adjust the quality of the image (low, medium, or high resolution) to control its clarity and loading speed on your site. Higher resolution provides better image quality but might affect loading time.

Content

In the Content section, you’ll find:

• Title: The main heading for the widget.
• Title HTML Tag: Choose the appropriate HTML tag for SEO and structure.

• Subtitle: A secondary heading, usually smaller than the title.
• Subtitle Position: Control where the subtitle appears (above or below the title).
• Description: A detailed explanation or additional text to provide context.

Button

In the Button section, you’ll find:

• Style: Customize the button’s appearance (e.g., color, border, background).
• Hover Style: Set the button’s look when hovered (e.g., color change, effects).
• Text: Define the text that appears on the button.
• Link: Set the URL that the button will redirect to.

• Icon: Choose an icon to display on the button.
• Icon Position: Decide whether the icon appears before or after the text.
• Direction: Control the button’s layout (e.g., horizontal or vertical alignment).
• Icon Spacing: Adjust the space between the icon and the text.

Image AnimationIn the Image Animation section, the Reveal option creates a smooth transition where the image gradually appears from a specified direction (left, right, top, or bottom).

After selecting the Reveal option, you’ll find the “Data Ease” setting, which controls the smoothness and flow of the animation transition.

In the Data Ease option, you will find several categories that allow you to fine-tune the animation’s timing and movement. These categories give your animation different pacing effects, each offering a unique transition style. Here’s a brief explanation of the available categories:

1. Power2.out: The animation begins quickly and slows down gradually toward the end.

Example: Imagine an image sliding in from the left. At first, it moves quickly, then slows down as it reaches its final position, creating a smooth, natural stop.

2. Bounce: The animation ends with a bouncing effect, creating a “rubber band” feel.

Example: Picture an image dropping into place. As it lands, it bounces back a couple of times before settling, giving the effect of elasticity.

1. Back: The animation slightly overshoots and then reverses, creating a playful “back and forth” motion before settling.

Example: Imagine a ball moving to the right, going a bit too far, then quickly bouncing back to the left before stopping. This creates a fun, dynamic effect.

2. Elastic: The animation has an elastic or spring-like movement, often bouncing back multiple times.

Example: Think of a rubber band being stretched and released. The element will move, stretch beyond its final position, and then spring back, bouncing a few times before settling.

3. Slowmo: Slows down the animation towards the end, creating a dramatic, slowed effect.

Example: Imagine an object falling and then gradually slowing down as it approaches the ground. The movement becomes slower as it nears its final position, adding a dramatic touch.

4. Stepped: The animation progresses in distinct steps, creating a staccato, segmented effect.

Example: Think of a character walking, where each movement is in separate, abrupt steps rather than a smooth transition. The animation “jumps” from one frame to the next, giving it a blocky feel.

5. Sine: The animation follows a sinusoidal (wave-like) curve, creating smooth oscillations.

Example: Imagine a ball swinging back and forth in a smooth, continuous wave motion. The animation moves fluidly in a smooth up-and-down pattern, like a gentle wave.

6. Expo: The animation starts off accelerating quickly and then slows down at the end, creating a dramatic effect.

Example: Think of a curtain quickly opening and then slowly coming to a stop, revealing what’s behind. This creates a powerful, attention-grabbing effect.

You can select the appropriate easing type based on the feel you want for your animation, providing a smoother, more professional look to the image reveal effect.

Style Settings

In the Style Section, you will find the following options:

1. Image Box: This controls the overall appearance and layout of the image box, including its borders, background color, and padding, allowing you to style the entire section containing the image.
2. Image: Here, you can adjust the appearance of the image itself, such as adding borders, shadows, and setting the image’s size, alignment, and other properties to enhance its visual presentation.

1. Content: This section lets you style the text or content inside the image box, including adjusting the font size, color, spacing, and alignment, ensuring the text complements the image properly.
2. Button: This allows you to style the button within the image box, including customizing its background color, text color, border radius, hover effects, and more, to make it visually appealing and functional.

These options give you complete control over the styling of the image box and its elements, creating a cohesive and polished design.

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 Box Widget in Elementor to effectively customize and display engaging image content on your website.

If you need further assistance, feel free to reach out to our support team!