“Image Accordion” allows you to layouts your images into and interactive accordion in 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 “Content Slider Widget” 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.
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.
