“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 Free 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 the “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
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
Enable Schema
Enable Schema for the selected widget.
Schema Source
Choose the Schema Source:
From List
Custom
Custom JSON Schema
We can also add a Custom JSON Schema.
Schema Type
Choose the Schema Type:
FAQ (FAQ Page)
List of Person (Person)
How To
Recipe
Courses (Course)
Books (Book)
Items List (ItemList)
Event
Places (Place)
Products (Product)
Tourist Destinations (TouristDestination)
Event Series (EventSeries)
Music Playlist (MusicPlaylist)
Search Results Page (SearchResultsPage)
We are continuously expanding the list of supported Schema types in upcoming releases.
Schema Main Title
Enter a Schema title that describes the action, for example, how to tie your shoes.
Enable Fields Mapping
Enable manual field mapping by roles. Post-related fields are applicable only
When the content is sourced from posts.
Show Schema Debug
Display Schema debug information in the front-end footer.
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.
