How to create Image Accordion in Divi

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!

How to access the Image Accordion Module

The Divi Supreme Image Accordion Module is completely free and can be used without any issue but If you want all the features in Divi Supreme, you need to purchase the Pro version of our plugin at the cost of $40 for one website and $79 for unlimited sites. Both plans come with a 30% discount on renewals while we also offer you premium support and free updates during the licensing period.

Our goal is to assist you to create beautiful and effective business websites without impacting negatively on user experience.

So, give Divi Supreme Pro a try today and don’t forget to share your experience with the Image Accordion in the comments section below.

Or try out the Divi Supreme Lite

Divi Supreme Lite Offers 21 Modules and 3 Beautiful Extensions and using them you can easily extend your site’s functionality.

Get Access To All Divi & Divi Supreme Tips

Get access to all our Divi and Divi Supreme’s tips, articles and cutting-edge helpful tutorials that are easy to understand for small businesses, bloggers, and non-techy Divi website owners, direct to your inbox.

4 Comments

  1. Sándor Kiss

    How can i set the harmonic height to full screen?

    Reply
    • Divi Supreme

      Hi Sandor,

      You can do that by putting “100vh” into the Accordion Height.

      Reply
  2. Alex Mark

    Como puedo hacer para que se respete el acordeón vertical en un móvil?

    Reply
    • Divi Supreme

      Hi Alex,

      You can simply just use the responsive mode on Accordion Direction. Just hover over the option, click on the mobile icon and from there, you can set to vertical on mobile. Hope that helps!

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *


Divi Supreme