The Image Accordion Widget allows you to display multiple images in an accordion format, where each image can expand to show additional content like a title, description, and a button. It’s perfect for creating interactive image showcases on your website.
Activate the widget
This widget is part of the aThemes Addons for Elementor plugin. To activate it, go to your admin area, visit the aThemes Addons dashboard, search for the widget, and click on the switch to activate it. It will now be available in your Elementor interface.
Widget options
Image Accordion section
- Image: Upload or select an image for each accordion item.
- Image Position: Choose the position of the image (top, bottom, left, right, center).
- Title: Enter a title for each accordion item.
- Description: Add a description for each item using a WYSIWYG editor.
- Show Button: Toggle to display a button on the accordion item.
- Button Text: Enter the text for the button. This option is available if “Show Button” is enabled.
- Button Link: Set the URL for the button link. This option is available if “Show Button” is enabled.
- Active Image: Toggle to set an item as the default open accordion item.
Settings section
- Direction: Choose the direction of the accordion (horizontal or vertical).
- Open Mode: Select how the accordion items open (hover or click).
- Height: Set the height of the accordion container.
- Spacing: Adjust the spacing between the accordion items.
- Growth Rate: Define the rate at which the active item will expand.
- Transition Time: Set the transition time for the accordion animations.
- Content Vertical Alignment: Align the content vertically within each accordion item.
- Content Alignment: Align the content horizontally within each accordion item.
- Title HTML Tag: Choose the HTML tag for the accordion item titles.
Style tab
Customize the appearance of your image accordion under this tab. You can adjust various style settings to ensure the widget matches your website’s design and branding perfectly.
Wrapper Style
- Background: Set the background color for the entire accordion wrapper.
- Padding & Margin: Adjust the padding and margin for the accordion wrapper.
- Border & Border Radius: Configure the border and border radius settings for the accordion wrapper.
- Box Shadow: Apply a box shadow to the accordion wrapper.
Item Style
- Padding & Margin: Adjust the padding and margin for individual accordion items.
- Border & Border Radius: Configure the border and border radius settings for each accordion item.
- Box Shadow: Apply a box shadow to individual accordion items.
- Background: Set the background color or gradient for individual accordion items.
Content Style
- Title Color & Typography: Customize the color and typography settings for the accordion item titles.
- Description Color & Typography: Adjust the color and typography settings for the accordion item descriptions.
Button Style
- Button Color & Typography: Customize the button color and typography settings.
- Button Background & Border: Set the button background color, border, and border radius.
- Button Padding & Margin: Adjust the button padding and margin settings.
- Button Hover Effects: Customize the button hover effects.
These style options ensure that your image accordion looks professional and integrates seamlessly with your site’s overall design.
Usage tips
- Use high-quality images for better visual impact.
- Enable the hover open mode for a more interactive user experience.
- Customize the growth rate and transition time to match the style of your site.
Conclusion
The Image Accordion Widget is a versatile tool for displaying interactive image showcases on your website. With extensive customization options, you can tailor the appearance and functionality to match your needs and provide an engaging user experience.