Image Accordion

The Image Accordion Widget in Animation Addons for Elementor is a pro feature. To use this widget, make sure the plugin is installed and activated on your site. You can browse both free and pro widgets using the filtering options, but this specific widget is available only in the pro version.

Introduction

The Image Accordion Widget in Animation Addons for Elementor displays images in a collapsible accordion style, offering a clean, interactive way to showcase images.

Key Use Cases for the Image Accordion Widget:

• Display images in a compact, interactive accordion style.
• Enhance user experience with a clean, organized image gallery.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Image Accordion Widget:

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

How to Add the Image Accordion Widget in Elementor:

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

How to Configure Image Accordion Widget

• In the Elementor panel, search for the “Image Accordion Widget.”
• Drag and drop the widget into your desired section.
• Add accordion items by uploading images and setting titles, descriptions, and links.
• Adjust the accordion behavior such as direction, interaction type, and expanded panel.
• Use the Style tab to customize image size, spacing, typography, overlay effects, and colors to align with your website’s design.

Configuring Image Accordion Widget : A Step-by-Step Guide

After adding the Image Accordion Widget to your page, you can customize its settings by navigating through the Content, Style, and Advanced tabs.

Content Settings

In the Content section of the Image Accordion Widget, you will find two main options:

1. Image Accordion: This is where you can upload and configure the images to be displayed in the accordion. You can add multiple images, set titles, and descriptions for each accordion item.
2. Button: You can enable or disable a button for each accordion item. If enabled, you can customize the button text and link to direct users to another page or section.

Style Settings

In the Style section of the Image Accordion Widget, you have two main options to customize:

1. Content: Customize the appearance of the images, titles, and descriptions within the accordion. You can adjust spacing, typography, and image alignment to match your design.
2. Button: Customize the button’s appearance, including font size, color, background, border, and hover effects, allowing you to match the button’s style to your website’s theme.

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 successfully learned how to configure the Image Accordion Widget in Elementor to create an engaging, interactive image section with titles, descriptions, and custom links. For any further assistance or inquiries, feel free to contact our support.