“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 #
Event
Select the option to trigger animation.
- Hover
- Click
Direction
Select the direction of image accordion.
- Horizontal
- Vertical
Opened Items on Start
Type the number of items you want to display as opened on start.
Opened Items on Start-Mobile
Type the number of items you want to display as opened on start on mobile device.
Button Text
Type the text to display as button.
Transition
Set the time to transition from one item to another.
Gap
Set the gap between two items.
Size of Open Items
Set the size of open items.
Layout Settings #
Show or hide elements in content slide
Show Icon
Show/Hide icon on image accordion.
Show Title
Show/Hide Title of the accordion.
Show Subtitle
Show/Hide subtitle on the image accordion.
Show Button
Show/Hide the button on image accordion.
Change to vertical on (px)
Set the breakpoint to change the accordion layout to vertical.
Connected Widgets Settings #
Enable Remote Connection
Widget Name for Connection
Provide a name for the connection that other widgets will use to connect and control this widget.
Sync
Sync Group
Choose the same group for two or more item-based widgets so they can sync together.
Show Debug
Items Settings #
Manage the items of image accordion using repeater field.
- Add new items
- Duplicate items
- Delete items
- Reorder Items
- Edit Items
Image
Choose an image to display.
Icon
Choose your icon to display.
Title
Type the title of accordion item.
Content Type
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.
Subtitle
Type the subtitle text for accordion item.
Link
Add any URL to link the button.
Background Position
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.
