How to create an image accordion with Elementor

Looking for a way to create an image accordion with Elementor?

Image accordion is a great way to display multiple images in a shortened way. When you click on the image, the image will expand and display the information. Image accordion can make your website look attractive.

By default the Elementor page builder doesn’t have any widgets for image widgets but don’t worry, there are add-ons available. Using free add-ons you can easily create a beautiful image accordion to your website using Elementor. So here in this article. we will show you the easiest way to create an image accordion with Elementor.

Create an image accordion with Elementor

Here in this tutorial, we are using the Elements kits Elementor add-ons which enable you to add so many features to your website. Some of the features are pro and some of the features are free including the image accordion.

First, install and activate the plugin, and then go to ElementsKit > Elements where you can see all the available widgets.

Now go to any page or create a new page where you want to add the pricing table. Open up the page with the Elementor editor and then create a section by clicking on the “+” icon.

Now choose the layout, here we are choosing a 1 column layout and then search for the Image accordion widget, drag it and drop it into your created section.

This will add the default image accordion section to your section. Now you need to edit the content and add your images.

From the content tab, you can select the item to display in your image accordion. By default, it will display 4 items. You can copy the item by clicking the duplicate icon and select an item from the delete icon. To add an item click on the add item button

Just click on any item to edit the content of that item. At first, you can make the item active by default and then you need to add a background image. You can select images from your media library or upload images from your computer.

Next, you need to add a title. You can add an icon in your title too. Just enable the icon option and add or upload your icon.

You can also enable or disable the button option. Add button text and link. Enable the image popup option and add your popup icon. There is also an option to add a project icon with a link.

Following the same process, you can edit content to other items.

After adding your content and image you can now set the display style as horizontal or vertical.

Horizontal look

Vertical look

At last, you can set the active effect as click or hover. When you select click you need to click on the image to expand the image. And for hover just place your mouse course on the image and the image will automatically expand.

Now move on to the style tab to style up your items. From the general option under the Style tab, you can set the minimum height of the image accordion and add space between each item.

You can add background as an image or color gradient from the active background option when the item expands. You can also add padding and margin to realign the item position.

Add border type, the border with, color, border radius and box-shadow to the section.

From the title option, add margin and title icon spacing. You can also add title color and typography as well as set the icon size.

From the content option set alignment, padding and vertical position.

Style your button for normal and hover condition from the button option. Add button text color, background type, border for your button.

You can set the icon width, spacing, popup color, and background from the action icon option.

That’s it. Your image accordion section is done. You can also add some advanced settings from the advanced option. You can see this article to learn How to work with the advanced setting option of Elementor

This is how The image accordion look-