Want to showcase multiple images in an interactive, space-saving layout? The Image Accordion widget in aThemes Addons lets you create expandable image panels that reveal content on hover or click – perfect for portfolios, feature highlights, and visual storytelling.
In this guide, we’ll walk you through how to use the Image Accordion widget in aThemes Addons for Elementor.
Before you get started, make sure you’ve installed and activated the aThemes Addons plugin on your WordPress site along with Elementor.
Activating the Widget
Go to your WordPress admin dashboard and navigate to the aThemes Addons dashboard. Search for the Image Accordion widget and toggle it on to activate it.
Exploring Widget Options
Configuring the Image Accordion Section
Add individual accordion items with the following options for each:
- Image – Upload or select the image for the accordion panel.
- Image Position – Set the focal point of the image (top, bottom, left, right, or center).
- Title – Enter a title for the panel.
- Description – Add descriptive text using the WYSIWYG editor.
- Show Button – Toggle to display a call-to-action button.
- Button Text – Set the text displayed on the button.
- Button Link – Add a URL for the button to link to.
- Active Image – Toggle to set this panel as the default open panel.
Configuring the Settings Section
The Settings section controls the overall behavior and layout of the accordion:
- Direction – Choose between horizontal or vertical accordion layout.
- Open Mode – Select whether panels expand on hover or click.
- Height – Set the overall height of the accordion.
- Spacing – Adjust the gap between accordion panels.
- Growth Rate – Control how much the active panel expands relative to others.
- Transition Time – Set the animation speed for panel transitions.
- Content Vertical Alignment – Align content vertically within each panel.
- Content Alignment – Set the horizontal alignment of the panel content.
- Title HTML Tag – Choose the HTML tag for the title (H1 through H6).
Customizing the Style Tab
The Style tab lets you customize the visual appearance of the accordion.
Styling the Wrapper
- Background – Set the background color for the wrapper.
- Padding and Margin – Control the inner and outer spacing.
- Border and Border Radius – Configure the border style and rounded corners.
- Box Shadow – Add a shadow effect to the wrapper.
Styling the Items
- Padding and Margin – Adjust spacing for individual accordion items.
- Background – Set the background for each item.
- Border and Border Radius – Configure borders and rounded corners for items.
Styling the Content
- Title – Set the color and typography for the panel title.
- Description – Customize the color and typography for the description text.
- Alignment – Control the text alignment of the content.
- Typography – Customize the button text font settings.
- Text Color – Set the button text color.
- Background – Choose a background color for the button.
- Border – Configure the button border style.
- Padding – Adjust the inner spacing of the button.
- Hover Effects – Set different colors and styles for the button hover state.
Following Usage Tips
- Use high-quality images that are consistent in size for the best visual result.
- Keep content concise so it displays well within the accordion panels.
- Test both hover and click open modes to determine which works best for your audience.
- Ensure the accordion looks great and functions properly on all devices by checking responsive behavior.
That’s it! You’ve successfully set up and customized the Image Accordion widget using aThemes Addons for Elementor.
Next, would you like to create visually engaging image cards with hover effects? Check out our guide on using the Image Card widget to learn more.
