What is an Image Accordion? In simple terms, it displays multiple images concisely with intuitive typography, animations, and buttons to increase visitor interaction.
And, when it comes to creating an Image Accordion, we like quick and easy ways. As a Divi user, we need to find something that is similar to a default Divi module without coding difficulties.
But, Divi builder doesn’t have any such module to design an image accordion on your Divi website.
Therefore, in this “How to create Image Accordion in Divi” tutorial guide, we take the help of the Image Accordion module from DiviFlash.
This plugin ensures low effort and big wins!
Let’s see the detailed guide.
How to Create Image Accordion in Divi
Look at the attractive Image Accordion below. You will see the entire design process in this tutorial.
Check out the demo here. You can also import it to better understand this Image Accordion customization and what are the other design possibilities.
Requirements:
- Divi theme.
- DiviFlash Plugin. Here is a guide on how to install the DiviFlash plugin.
Now we are ready to begin. Here, in our tutorial, we are building everything from scratch. You can start by adding a section to an existing page or creating a new page.
Section Design
First, insert a regular section. And you don’t need to make any other changes in section setting regarding this design.
Row Design
Here we need two different rows. The first one will be a two-column (50/50) structure. After that, we will also add a one-column row.
Then, open the first-row setting.
In Design Tab,
Click the Sizing option and enable Use Custom Gutter Width. Also, make the following changes:
- Gutter Width: 1
- Max Width: 100%
Under Spacing option,
- Margin: 12px (Bottom), auto (Left), auto (Right)
- Padding: 6px (Bottom)
Now, go to the second row setting.
In Design Tab,
Click on the Sizing option and Set the following changes as well.
- Max Width: 100%
Under Spacing option,
- Margin: Bottom: 12px (Bottom), auto (Left), auto (Right)
- Padding: 4px (Top)
Enough with the row settings. We will leave other options as they are by default.
Divi Modules
For this section, we are also inserting two other modules with the DiviFlash Image Accordion Module. These two modules- DiviFlash Advanced Heading Module (Left column) & Divi default Text Module (Right Column)- will appear in the first row. Meanwhile, Image Accordion Module will appear in the second row.
Modules Designs
Add a module by clicking the gray plus icon in the row. A list of modules will appear. Scroll down or put the required module name in the search box.
Advanced Heading Module
At first, there will come DiviFlash Advanced Heading Module in the left column of the 1st row according to our design. Add stylish heading in three different text areas. Here are our texts.
In Content Tab,
Under Content option,
- Title Prefix: Divi Image
- Title Infix: Accordion By
- Title Suffix: DiviFlash Plugin
Now, jump over to the design tab and update the following.
In Design Tab,
Under Title option,
- Title Heading Level: H4
- Title Font: Poppins
- Title Text Color: #000000
- Title Text Size: 48px (Desktop), 32px (Mobile)
- Title Line Height: 1.2em
Under Infix option,
- Display Block: Inline
Under Suffix option,
- Suffix Font Weight: Bold
- Suffix Text Color: #ff606b
Under Spacing option,
- Margin: 0px (Top), 22px (Bottom)
- Padding: 0px (Top)
That’s how we add the DiviFlash Advanced Heading module.
Text Module
Next, we have our second module: Divi Text Module. For our design purpose, we will insert it in the right column of the first row. We will keep the default body content. You can add text as you want. Other than that, there are no changes in the Content Tab. So, we are moving to the Design Tab.
In Design Tab,
Under Text option,
- Text Font: Work Sans
- Text Text Color: #000000
- Text Text Size:16px (Desktop), 14px (Mobile)
We need no more customization here. Let’s move to our next module.
Image Accordion Module
Now, it’s time to add the Image Accordion Module. It will be the only module for the second row. Begin by including some images. To do that, click on the Content Tab and click “Add New Item”.
Then, you will find “Image Accordion Item Settings”.
In Content Tab,
Under Image option,
- Add a background Image
- Background Image: Source File
Under Content option,
- Title: Image Accordion Item 1
- Description: Dummy Text
- Button Text: Details
- Button URL: #
Finally, click the right sign in the green box below, and you will be taken back to the “Image Accordion Setting”.
Note here that we have uploaded five images on this accordion. As the design is a demo, all images have the same dummy text and customization. So, repeat the steps above every time you add an image. Or, you can simply do it by clicking the duplicate button and changing images one by one. However, you can insert different text and customize it to match your design.
Under Accordion Setting Option,
- Select Event Type: Hover
- Active Item Order Number: 3
- Accordion Container Height: 600px (Desktop), 520px (Tablet)
That’s it for the content tab. Now, we will look forward to the Design Tab.
In Design Tab,
Under Content option,
- Content Alignment: To Right
- Content Vertical Align: Bottom
- Background Color: rgba(0,0,0,0.6)
Under Title option,
- Title Font: Montserrat
- Title Font Weight: Bold
- Title Text Color: #ffffff
- Title Text Size: 34px (Desktop), 26px (Mobile)
Under Description option,
- Description Font: Poppins
Under Button option,
- Background Color: #000000
- Button Font: Montserrat
- Button Text Color: #ffffff
- Border Width: 2px
- Border Color: #ffffff
Under Custom Spacing option (Item),
- Item Padding: 150px (Desktop Left), 20px (Tablet Left), 0px (Mobile Left)
Under Custom Spacing option (Content),
- Content Area Padding:
Desktop= 59px (Top), 59px (Bottom), 60px (left), 60px (Right)
Tab= 30px (Left), 30px (Right)
- Button Margin: 24px (Top)
- Button Padding: 8px (Top), 8px (Bottom), 33px (Left), 33px (Right)
And with this final change, we have completed our work. Just hit the save button on the bottom right. Let’s have a look by clicking the exit visual builder. Hopefully, you’ll be able to see a fantastic Image Accordion on your Divi website.
Why Choose DiviFlash to Create An Image Accordion?
Once you have created an Image Accordion, as shown in this tutorial. Don’t limit the customization to this level. Make more versatile styles by trying all the features of the Image Accordion Module of DiviFlash. Here are some advantages of this third-party module:
- Display Image Accordion in horizontal and vertical styles.
- Can apply overlay & hover effects on child items.
- Includes extensive typography, button, animations, etc.
- Custom Spacing facilitates a precise look and responsiveness.
- Can adorn the Image Accordion with stylish borders, rounded corners, box-shadows effect, etc.
- Give control over the text animation type, timing function, and image transition.
Final Thoughts
This was our fun way to create an Image Accordion in Divi. We are very pleased with the final result. As you can see, the accordion panels expand intuitively when you hover around them.
We believe that now you have the answer to “How to create Image Accordion in Divi”. Let us know in the comment box if you find it useful.
0 Comments