“Image Accordion” allows you to layouts your images into an interactive accordion on your Elementor website. You can show different elements on your accordion images. You can also customize its looks by using its customization and styling options.
Let’s look at each of the options in the “Image Accordion” below.
Install Image Accordion Widget for Elementor
This widget requires Unlimited Elements PRO version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Image Accordion“
- Hover over the widget in the search results and click install
- Add your “Image Accordion” widget to any Elementor Page
General Settings
Select the option to trigger animation.
- Hover
- Click
Select the direction of image accordion.
- Horizontal
- Vertical
Type the number of items you want to display as opened on start.
Type the number of items you want to display as opened on start on mobile device.
Type the text to display as button.
Set the time to transition from one item to another.
Set the gap between two items.
Set the size of open items.
Layout Settings
Show or hide elements in content slide
Show/Hide icon on image accordion.
Show/Hide Title of the accordion.
Show/Hide subtitle on the image accordion.
Show/Hide the button on image accordion.
Set the breakpoint to change the accordion layout to vertical.
Connected Widgets Settings
Provide a name for the connection that other widgets will use to connect and control this widget.
Choose the same group for two or more item-based widgets so they can sync together.
Items Settings
Manage the items of image accordion using repeater field.
- Add new items
- Duplicate items
- Delete items
- Reorder Items
- Edit Items
Choose an image to display.
Choose your icon to display.
Type the title of accordion item.
Choose any of the given content sources
- Content
Type any custom content for your accordion.
- Template
Choose any of the premade templates to show in your accordion item.
Type the subtitle text for accordion item.
Add any URL to link the button.
Select the background position from given options.
- Left Center
- Left Top
- Left Bottom
- Right Top
- Right Center
- Right Bottom
- Center Top
- Center Center
- Center Bottom
Image Accordion Widget Styling
Every aspect of the widget’s design can be controlled through different styling options. Choose colors that complement the style of your website. You can modify the text, icons, fonts, and layout to make the widget look and work the way you want.
Item Styling
Set the height, vertical alignment, radius, border and item shadow of accordion items.
Overlay Styling
Style the color, hover color and padding for overlay.
Icon Styling
You can set the icon size and color.
Title Styling
In this section, set the title’s spacing, color and typography.
Subtitle Styling
Style the subtitle color, typography and subtitle spacing.
Button Styling
Here, you can style the color, border, radius, spacing, padding etc. of the button.
Usage Examples
Here are some live use cases for the Image Accordion widget.
Image Accordion widget with vertical layout.
