In this tutorial, I’ll show you 4 creative ways to create and use an Elementor Image Accordion by the Premium Addons. Image accordions give you the ability to add styled-up Elementor image sections in both horizontal and vertical orientations. The image accordion can have a title, description, links, color styles and a lot of other effects. 

We will create a horizontal image accordion with images color change on hover, a horizontal image accordion with skewed images and link text on hover, and a vertical image accordion with text and content on hover. 

Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.

Video: Elementor Image Accordion Tutorial

What You’ll Need to Create Image Accordions in Elementor

For this tutorial you’ll need the Premium version of the Premium Addons for Elementor; the Image Accordion comes with the premium version so you need to install and then activate it in order to access this widget. To activate the Image Accordion widget:

In your dashboard go to Plugins and find Premium Addons for Elementor, click on Widgets and Addons (01:13)

In the Widgets and Addons area find the Image Accordion Widget and activate it (by making sure it’s green) (01:19).

Now you’ll be able to access this widget in your widget area on your Elementor dashboard.

1. Horizontal Image Accordion with Image Overlay Color

In your Elementor dashboard, add a new section with 1 column (00:46). In the Edit Section area on the left, under Layout, set Height to Min Height and give it (the minimum height) a value of 60VH.

Now go to the Widgets icon and search for the Premium Image Accordion then drag it to your section (00:56).

Now that you have your Image Accordion widget ready, the next step is adding images to it. Select the accordion; in the Edit Premium Image Accordion area, under content click on Images, the Upload image option takes you to the Media Library where you can find the image you want to show, insert it in the accordion.

On the Image #2 option insert your second image then use the Add Item option to insert the other 2 images to show. 

For your images to be visible, click on each of them and under Size, instead of Auto set it to Cover. (02:23)

To Read: Reversed Elementor Horizontal Tabs with Gradient on Hover + a Tiny CSS

With that done, go to Style and under Overlay Color use a transparent black, on Overlay Hover Color set a lighter (more transparent) black.

Still under Style, click on the Container option and set 40 pixels for Border Radius; this will give your image accordion rounded borders.

2. Horizontal Image Accordion with Images Color Change on Hover

Duplicate the first accordion widget (select it, right-click and choose duplicate).

On your duplicate section right-click on the icon in the corner and choose to add new column (03:29). In this new column add your content (text). You can reposition your content column to be on the left side of the images.

Then select the images accordion and on the Edit area on the left, under content click on Image #1, Image #2, and Item #3 to add the images you want to show here.

When you’re done adding images go to Style, go to the Container option and remove the Border Radius by setting it to zero (0).

Back up to the Images option, under Normal click on CSS Filters and set Saturation to zero (0). Go to the Hover and under CSS Filters set Saturation to 100, this will make images black and white, but they’ll turn to color on hover (04:29)

3. Horizontal Image Accordion with Skewed Images, Separator Color, and Hyperlinks.

Add a new one-column section in the Widgets area, drag and drop the Premium image Accordion widget to your section. In the Edit area on the left, under content choose each image item and upload the image you want to show.

After adding your images, go to Display Options turn on the Skewed Images option (04:59).

Also Read: How to Make Glassmorphism Forms in Elementor [PRO]

Then go to Style, go to spacing and set it to 20 pixels and the Spacer Color should be white (05:14). This is to show a spacing/division between the images.

The next step is to work on the positioning of the images. In the Content, select the second image and set Position to the top left. Select the third image and position it to the center-left. You can position your images any way you want them.

You can also add hyperlinks to your images so that when someone clicks on the image, they can click on the text and it takes them to a specific page. 

To do this:

Select the first image and first enable the Content option, go to the Link option and enable it too, under Link Type choose URL then on Link you can paste a URL of your choice where you want your visitors to be redirected. 

Give the link a title; this is the text they’ll click on. If you enable the Wrap Image Link option, your whole image will be turned into a link. Select the other images and with the same process add links to them (07:01).

To style these links up:

Select the image accordion and go to Style, under the Link option change Color to the one you prefer, and set Hover Color to white. Under Typography set the font to Poppins, then Size to 60 pixels.

Back to Content choose image #1; go to Custom Position and enable it, set horizontal offset to 200 pixels.

Then select image #4; enable custom positioning and set the horizontal offset to 103 pixels. (08:22)

Select the section and go to Layout, set Height to Min Height, and add a Minimum Height of 60VH.

To Read: Create an Elementor vCard with Download Link and Contact Modal Popup

4. Vertical Image Accordion with Content

For this, create a new section.

Go to the widgets area and drag the Premium Image Accordion into your section

In the Edit area under Display Options set Direction to vertical (09:07) 

Choose the Accordion option and add the images you want to display in this section.

Select image #1: Set its Size to Cover instead of Auto. Turn on the Content option then add a title to it under Title and a description under Description.

Select image #2: Change its Size to cover. Turn on Content, add a Title for it and a Description of your choice

Select the last 2 images and do the same; change the size to cover, enable content and give a title and description to each.

After adding your content you now need to style it up:

Select the image accordion, go to Style, and select Content, under Title change the color to white. Under Typography set Family to Poppins and Size 40 pixels.

Under Description change Color to white and on the Typography option change Family to Poppins.

(10:26)

Elementor Image Accordion Responsive Settings

To make sure your image accordion is responsive on all devices, select the Responsive Mode icon and the Bottom (10:41)

Also Read: Create an Elementor Custom Mouse Cursor using Text, Icons, Images or Lottie Animation

First, select the Tablet device to see its responsiveness:

On the tablet, the first image accordion looks great.

For the second one, select the column, and under Layout set the column width to 60%

Select the third column and go to Style>Link>Typography; change the Size to 35 pixels. Select the first image and under Custom Position set the horizontal offset to 120 pixels.

The image accordion is all set on the Tablet device. You can also go ahead do the same on your mobile device.

In Closing

Now you know how to create image accordions and use them on your website with the Premium Addons for Elementor.

For any comments or questions use the comments section below. Don’t forget to subscribe to my newsletter and Youtube channel for more tips and tutorials.