A picture paints a thousand words and, as we all know, most folks these days don’t want to read a couple of thousand words, so what better way to convey a message with a couple of classy images. Introducing the amazing Divi Supreme Image Accordion module. Divi Supreme offers both a free and premium plugin and the free version adds an amazing number of extra modules to the Divi Builder.

In this tutorial, I’m going to show you how to use the Image Accordion module to create stunning image accordions.Β 

The Examples

Let’s begin with a few examples.

Example 1

Create stunning image accordions like never before.

In Forests

Your description goes here. Edit or remove this text inline or in the description settings

In Heaven

Your description goes here. Edit or remove this text inline or in the description settings

On Mountains

Your description goes here. Edit or remove this text inline or in the description settings

In Beach

Your description goes here. Edit or remove this text inline or in the description settings

Example 2

Showcase anything with an icon and text overlay.

Maureen Robinson

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Penny Watts

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Firat Hicks

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Example 3

Choose from five animation styles.

PARIS

Your description goes here. Edit or remove this text inline or in the description settings

TOKYO

Your description goes here. Edit or remove this text inline or in the description settings

LONDON

Your description goes here. Edit or remove this text inline or in the description settings

BANGKOK

Your description goes here. Edit or remove this text inline or in the description settings

Example 4

Create stunning horizontal image accordions.

Vegetable Hamburger

massa enim nec dui nunc mattis enim ut tellus elementum sagittis vitae et leo duis ut diam quam nulla porttitor massa id neque aliquam vestibulum morbi blandit cursus risus at

Vegetable Sandwich

massa enim nec dui nunc mattis enim ut tellus elementum sagittis vitae et leo duis ut diam quam nulla porttitor massa id neque aliquam vestibulum morbi blandit cursus risus at

Pepperoni Pizza

massa enim nec dui nunc mattis enim ut tellus elementum sagittis vitae et leo duis ut diam quam nulla porttitor massa id neque aliquam vestibulum morbi blandit cursus risus at

Bacon Burger

massa enim nec dui nunc mattis enim ut tellus elementum sagittis vitae et leo duis ut diam quam nulla porttitor massa id neque aliquam vestibulum morbi blandit cursus risus at

GETTING STARTED

Begin by installing the plugin from the WordPress repository. You can find the link to the download at the bottom of theΒ Divi Supreme FeaturesΒ page.

USING THE TEXT DIVIDER MODULE

Once you’ve installed the plugin, you’ll find that theΒ Image Accordion ModuleΒ as well as a number of other modules have been added to the DiviΒ Insert ModuleΒ window.

Like with any other module, you simply need to click on the icon to add the module to the page. Once there, open the module and you’ll be presented with a wide number of options to choose from.

Here you can add the images you want to use for the accordion. Here are some of the settings you’ll be able to configure:

  • Accordion Type – Choose whether to open the Image Accordion by Hover or Click.
  • Accordion Content Animation – Choose from five different animations for content entrance.
  • Use Sequenced Animation – With this enabling this option will cause each element (Title, Description, Button, Icon etc.) to appear sequentially.
  • Accordion Direction – you can choose between either the horizontal or vertical layout.
  • Accordion Height.

Once you’ve configured the common options, you can add the individual images and configure each of those images using their individual content options.

The following options are available:

  • Make Item Expanded – enable this option if you want the image to be expanded by default.
  • Image – add the main image.
  • Use Icon – You can use either an image or an icon in the overlay.
  • Title – theΒ main title goes here.
  • Description
  • Show Button – Enabling this switch will allow you to use a button in your accordion. Once enabled, you’ll be able to define the button text & URL.
  • Horizontal Align – you can align the content horizontally, to the left, right, or center.
  • Vertical Align – this allows you toΒ align the content vertically, to the Top, Bottom, or Center.

Β Aside from all the Accordion specific settings, there are all the relevant Divi settings you’ve come to Expect.

Wrapping it Up

And there you have it, a cool little module to add a littleΒ pizzazz to your site.

As I mentioned, there is aΒ premium version of this pluginΒ with a number of superb additions that you’ll find give you the edge and help you stand out from the Divi crowd. So, check it out and see if you shouldn’t invest in a plugin that’ll pay for itself soon enough.

Photo by DaYsO on Unsplash



Divi Notes started as a way to document my own WordPress and Divi web design/development journey and, to my delight, has grown to become a helpful resource to many other Divi users out there. If you’ve found Divi Notes to be useful in your journey, I’d appreciate it if you would consider supporting me using the form below.

$
Personal Info

Donation Total: $4.99