support@diviexpand.com

How To Use Image Accordion Module from DiviExpand

Pre-requisites

To use that excellent Image Accordion module, you need the following things:

  • Divi Theme & page builder
  • Image Accordion & Before After Plugin

You can use our Image Accordion Module by exploring the following steps:

Step: 01

First, select a new row. After that, search IMAGE ACCORDION from the Insert module section and then picks it.

Step: 02

Select ADD NEW ITEM under the CONTENT tab and upload your desired image.

In the CONTENT AREA section under the CONTENT tab, you’ll get the Content options to add content to the accordion. Here are the options-

  • Title Text,
  • SubTitle Text,
  • Description Text,
  • Button Text,
  • Button URL

Step: 03

There are some optional features in our module. Here are the options-

  • ICON
  • LIGHTBOX
  • ITEM LINK

You will get those features under the CONTENT tab. If you want to use those features, you have to turn them on those features one by one.

Step: 04

You can reorder your content however you want using our module. To do so, go to the ITEMT ORDER section under the CONTENT tab and then turn on the Enable Order.

Let’s say you have five content attributes Icon, Title, Subtitle, Description, and Button. Chronologically you can fix the position of those content attributes. If you want a button in number one and a title in number three, then number them in your desired order.

Step: 05

After giving all information in ACCORDION IMAGE CHILD SETTINGS, go back to IMAGE ACCORDION SETTINGS. Then add another child item as before you made, or you can make some replicas of the child item and change their attributes.

Step: 06

Under the CONTENT tab In ACCORDION SETTINGS, you can fix Accordion Type, Vertical Accordion at Mobile, Event Type, Active Item on First Time, Active Item Order, and Accordion Container Height.

Step: 07

You need to customize your CONTENT, ICON, TITLE TEXT, SUBTITLE TEXT, DESCRIPTION TEXT, and BUTTON. To do so, you have to the DESIGN tab, where you will get all the features we mentioned before.

Step: 08

Sometimes you will need to fix Items Margin & its Padding. You will get those features in ADDITIONAL SPACING under the DESIGN tab. Here you can also select the margin and padding of other content attributes like Title, Subtitle, Description, Button, and so on.

Step: 09

After completing all those steps, you can add animation to your image accordion design. You will get so many features in ANIMATION SETTINGS under the CONTENT tab. To that, first, turn on the Enable Animation. You can use your desired Content Animation like Slide Left, Slide Right, Slide Up, Slide Down, Fade, etc. You can fix Duration and Delay in ms. You can also turn on a feature like Enable Stagger from here.

Step: 10

Now you are ready to change others child’s Image and Content Area. Replace those things with your desired images and contents.

After clicking the Save Changes button, Finally, you will see the beautiful Image Accordion on your webpage.

That’s it!