At Divi Supreme, we are always trying to provide you our best in the form of new Features & Modules in Divi Supreme. Here’s another Amazing Module called Divi Supreme Image Accordion Module.

With the Image Accordion Module, you can easily create Accordions that reveal their content on Hover or Click with stunning Animations and much more. So that’s what we’re going to learn in today’s article. We’ll see how to use the Divi supreme Image Accordion Module to create stunning Image Accordions in Divi.

Let’s Get Started

So let’s finally see, how to use the Image Accordion Module. Add the Supreme Image Accordion Module wherever you want to.

Once you’ve added the Module It’s time to use it. Click on the +Add New Item button to add your First Accordion Item.

Now you’ll see some new options to add your first item. You can add the content you want to show in the Accordion here. You can enable the option “Make item Expanded” to have the Item expanded by default. And then you can choose the main Image for the Accordion and then Title & Description.

And then If you want to add a Button in your Accordion, you can simply enable the switch “Use Button” and then It will ask you for the Button Text & URL. And lastly, you’ll find options to align your content Vertically & Horizontally. Simply choose how & where you want to show the content in the accordion.

And once you’re done adding your content, It’s now time we go back & Duplicate the Item we just created and change the Content for each item.

Okay so we’re done with the content, int eh main content tab you’ll find a panel to set your Accordion, change Animation, Height, and more.

To change the accordion reveal method, just change to either click or hover under this panel.

And then you can choose an animation for the Content to show on Hover or Click (what you’ve set it). You can choose from 5 different animations.

Next, you have a switch to Sequence the animation. If you’ll enable it It will add animation to each element separately and each element will have the entrance animation that you set instead of animation to the container of the content.

Next up, we’ve got two options to change the Direction of the Accordion to either Horizontal or Vertical and the second option to change the height of the Accordion.

Okay so we’re finally done with the Content settings, It’s now time to move to the Design tab, and let’s make it look cool. Because right now It’s not that cool.

So the first option we’ve in the design tab is Overlay, to add a color overlay to the Accordion so we can see text in the accordion more clearly.

Next, we can style the Icon or Image If you’ve added. But we’ll skip this as we don’t have an icon in this demo. And further you can style the Title, Description, and Button just like you do usually in Divi.

And If you want to change content width in the Accordion, you can do so by going to Item settings -> Design tab -> Sizing -> Content Width.

So we’re finally done with everything. And here’s a quick look at what we’ve achieved.

And here’s how it looks when changing direction to Vertical.

So that’s how easy it is to create Image Accordion in Divi. We hope you’ll found it useful. Let us know what you think about this awesome Module in the Comment section below.

Have a great day!