Do you want to create an image accordion in Elementor? Image accordion allows you to display multiple images in a compact and organized manner, making it perfect for showcasing a gallery or portfolio. The accordion effect adds a touch of creativity to your website, making it more visually appealing and engaging for visitors.
With the Animated Service Boxes widget from The Plus Addons for Elementor, you can easily create vertical and horizontal image accordions in Elementor.
To check the complete feature overview documentation of The Plus Addons for Elementor Animated Service Boxes widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.
To do this, add the Animated Service Boxes widget to a page and follow the steps –
1. Select Image Accordion from the Main Style dropdown.
Then from the Style section, you can select a predefined style.
2. From the Orientation dropdown, you have to select the image accordion orientation. Here you’ll find two options –
- Vertical – To create a vertical image accordion.
- Horizontal – To create a horizontal image accordion.
Select the option as per your requirement, let’s select Vertical here.
Then from the Active Slide section, you can select a particular slide to be active by default or make all the slides equal.
In the Active Slide Width(0-15) field, you can set the active slide width i.e. how much the active slide will open. You can set the value from 1 to 15, where 1 will make all the slide’s widths equal and 15 will set the maximum width for the active slide.
You can select the image size from the Image Resolution dropdown.
By enabling the Button toggle you can add a button to the image accordion.
When enabled you can select a button style from the Button Style dropdown.
3. Then in the Animated Service Boxes section, you have to add the content for the image accordion. By default, you’ll find three items, open one item.
You can add a title, subtitle and description in the Title, Sub Title and Description fields if required.
4. Then in the Featured Image section, you have to add an image for the accordion.
You can edit the button text and URL from the Button Text and Button Link fields respectively.
Note: Make sure the Button toggle is enabled to make the Button Text and Button Link fields work.
Following this process you can edit the other items.
You can click on the +Add Item button to add more accordion items.
Then from the Layout tab, you can manage the vertical and horizontal alignment of the text content of the image accordion, you can also manage the image accordion height as well.
Now you’ll see a beautiful vertical image accordion.
Note: Similarly you can create a horizontal image accordion by selecting Horizontal from the Orientation dropdown.
Suggested Reading: How to Create Sliding Box Effect in Elementor?
