Accordions are basic design elements that provide great ways to provide content in collapsible form. Readers can open and close the content on demand. Divi includes a standard accordion module, but what if you wanted new accordion designs? For that you might be interested in a plugin called Divi Accordion.
Divi Accordion is a third party plugin for SA Solutions that adds a new module to the Divi Builder that includes 10 themes that create new accordion designs. Add backgrounds, overlays, gradients, icons from Font Awesome, and lots more. The themes include basic accordion designs as well as animated cards and icons.
In this article we’ll take a look at all 10 themes and get an idea of what each one can do. It also works with Extra. At the end of this article we’ll take a look at a couple of examples in an Extra blog page. Images for the examples were taken from Unsplash.com.
SA Accordion Installation and Settings
Upload and activate the plugin as normal. You’ll see a new module added to the Divi Builder called SA Accordion.
The module includes two tabs: Content and Advanced. In the Content tab you can add a new item, choose a theme, change colors for background, font, font question, and border, and enter Font Awesome icon slugs for open and closed.
New Item settings add lots of new background customizations. They include gradients, images, parallax, image size, position, repeat, lots of video options, image URL for theme 7, and Font Awesome code for theme 8. It still includes the visual editor.
The features that will be used will depend on the theme you choose. You must provide a title for each item to get them to display.
SA Accordion Examples
Here’s a look at each theme. The first image is the default settings and the second image includes some customizations.
Theme 1
This is the default look for Theme 1. Clicking on the red bar opens and closes the toggle. You can open them all at the same time.
I’ve adjusted the background, font, and font question colors, and added Font Awesome icons. I’ve also placed a background image within each toggle. Background color, gradients, and images are placed behind the text within the open toggle.
Theme 2
Theme 2 looks like theme 1 but rounds the edges.
I’ve changed the background and used the same settings as in theme 1, only this time I’ve added a gradient as an overlay for each of the items.
Theme 3
Theme 3 uses a blocked look with the accent color to the left.
This one includes a color adjustment for the border. I’ve added new Font Awesome icons to indicate the toggle’s open/close state and I’ve darkened the background of the text just enough to make it stand out.
Theme 4
Theme 4 uses a border around the toggle.
I’ve adjusted the fill, border, and font colors, and added Font Awesome icons to indicate open and close.
Theme 5
Theme 5 uses a completely different design. Rather than animating or having an open/close state it provides a nice layout to present your information as a numbered list.
This theme adds a customization for the number color. All of the other colors work the same as the others. The border color adjusts the color around the circle.
Theme 6
Theme 6 is a set of cards that flip around when you hover over them. This one only allows for one toggle to be activated at a time. The card closes when you move away.
You can adjust the number color just like in theme 5. The font question color appears on both sides of the card.
Theme 7
Theme 7 requires a background image in order to display. It shows a cropped version of the image. Hovering over the image opens it (with a nice zoom animation), revealing the title and text in an overlay over the image. This one allows one toggle to be open at a time. The toggle closes as you move away.
This example uses a background overlay with red title font. Theme 7 is one of my favorite themes.
Theme 8
Theme 8 is unique in that it displays the toggles horizontally as icons. Hovering over the icons opens a toggle. The toggle closes as you move away.
You can add icons from Font Awesome and adjust the font and question colors.
Theme 9
Theme 9 places the toggles vertically and includes large blocks. You can open one, which remains open, but it closes when you open the next toggle.
Adjust the background, font, and font question colors.
Theme 10
Theme 10 displays the toggles horizontally and is more similar to the traditional look. You can open multiple toggles at once.
Adjust the background, font, and font question colors.
Using Divi Accordion Within a Layout
Divi Accordion’s theme 6 looks right at home with the Divi Creative Agency layout.
This layout uses a fullwidth image, Divi Accordion using theme 7 with 5 items, and a blog module in a grid layout with 3 posts. Divi Accordion works well within the design. I can see using this to explain the categories, provide info about locations, and lots more.
Using Divi Accordion with Extra
Here’s a look at the blog page using theme 7 in Extra. Divi Accordion works the same with Extra as it does with Divi.
Here’s a look at theme 1 within the same blog layout. This is a great way to add extra elements for information or other media within your content.
License and Support
Divi Accordion can be installed on unlimited sites for you and your clients. It includes 6 months support.
Final Thoughts
Divi Accordion is simple to use but gives you lots of new accordion designs and features to style your accordions to match your pages and posts. The new layouts makes accordions more useful than ever and the ability to add background colors, gradients, and images opens up a lot of design possibilities. If you’re interested in accordion designs that go beyond the standard accordion module, Divi Accordion might be what you’re looking for.
We’d like to hear from you. Have you tried Divi Accordion? Let us know about your experience in the comments.
Featured Image via Cihan Terlan / shutterstock.com
Well… I’m a little bit confused, because after I activate the plugin all my pages stay just white. Nothing is shown until I deactivate this plugin. I tried just to have the Accordian Plugin active (and Divibuilder of course) – but its the same, all my pages in back- and frontend stay just white. I use the Extra-Theme with no changes in css.
Tried it with Firefox and IE. The last one shows an HTTP 500 Error if I’ve the plugin active…
Any advice what I could do wrong?
Pitty – no answers by the support. I really can’t recommend the plugin: it definitly doesn’t work. Sorry.
How can you remove the number in theme 6? I want to change that to a testimonial name. It would be disappointing if this was not customizeable.
How can I add the icons in theme1?
I failed and I do not get any support from the seller –(
I appreciate any help…cu, Michael
Hi Micheal. For the icons I used the slugs from Font Awesome’s website.
I buy this plugin too. Worst of all, I have the impression that the downloaded file is not the current one but a demo (1.0). The ZIP file name is 1.3. There’s something wrong. Terrible … Where’s the endorsement from who made this post? Or anyone fro ET?
This plugin does not work well. Very confusing. The background image does not work. I did not like. Money wasted…
Follow the Divi Accordion link. At the top is an option to buy link.
It wasn’t there on the plugin’s home page when the article appeared two days ago, that’s why so many people were asking… 🙂
Seems the developer missed a once-in-a-lifetime chance.
I would make use of a nice Divi CTA button instead of the tiny, hardly discernible text link. 🙂
BTW, I may be mistaken but IMHO all these are “Toggle” examples, where each click opens a new section. I always thought that with an “Accordion”, when opening a new section, the one before closes automatically.
Fot those wo can’t find the link to purchase the plugin: There is a link in the header of the linked page that says: you dan buy it here. And the word here is a link to a page where you can purchase the plugin.
I believe this is a plugin available on elegantmarketplace
(if you search: marketplace>plugins you should find it)
Hope it helps. 🙂
I’ve solved the mystery. Chrome browser doesn’t show final line of http://www.sawebsolution.de/Projects/divi-accordion/ that says ‘If you are interested in this Plugin, you can buy it here.’ But Safari browser does show this line.
Okay that is really odd. I just clicked on that same link again and it took me here: http://www.sawebsolution.de/Projects/divi-accordion/
but there is a link in the top paragraph to purchase it. Fourth line down.
Same issue. No way to download this plugin.
download in the next rains.
Nice plugin but there is no download or buy option :/
hey, yes, that’s ill – no download link! – Very good for missing the chance to sell their product.
I just did wrote to the developer about missing download, hope he will come back to us 🙂
Nice information this morning.
Thanks for dropping the tutorial to this awesome theme.
Do have a nice day
Yes. +1 for the download/purchase link.
What a Smug little comment – “Click on the bright red text that says Divi Accordion.” GEE! I wish I would have thought of that! Dufas obviously has no clue what is going on. There is not download here. VERY unprofessional on Divi’s part to even send this out without testing.
Scott, sorry the comment came across as smug. That wasn’t my intent.
The link to purchase is on the page we linked to. Unfortunately it’s hard to see as the link is blue on blue. Here is the link you’re looking for: https://elegantmarketplace.com/downloads/accordion-faq-module/
Let us know when you get a download link please. I tried googling it but could not find anything.
Hello. It looks awsome. But I clicked the bright red text that says Divi Accordion and it takes me to a page where I can see examples of every theme, but there is no link to buy or download.
Is it something I am missing???
Could you provide the link for download.
Thanks
Here is the link you’re looking for: https://elegantmarketplace.com/downloads/accordion-faq-module/
Hello. I bought this plugin and it is not working as it should. SA Accordion. I assume the version being uploaded is different from the advertised version. When I install it appears as 1.0 Beta, and when it is downloaded it comes as 1.3. In fact, I’m already quite frustrated with this purchase. I ask for reimbursement of the amount I have paid, or any indemnity for not being misled by the product offered, but I can not get any support from the company that sold the product. I hope that when it is made the disclosure of any product, that this be tested, because from the beginning everything was wrong and confusing. This company does not deserve to be disclosed here, in Elegant Themes, which has always been a serious business. And whoever buys will be in the same situation. So I suggest that no one buy any product from this company. ELEGANT MARKETPLACE.
Very bad plugin! Don’t buy!
nice idea but there is download link for this plugin here on this site or on the SA web site.
I think this is something more simple yet powerful than the Accordion in thrive content builder. Let me see whether it will have any effect on page load speed.
What’s the price? 🙂
Is there a download option?
This plug-in looks great. However the biggest limitation with the accordion is that other elements cannot be addressed to it (such as a pricing table or a contest form) in the same way that Visual Builder can. Is this something that the Divi team have a plan for in future releases?
Sorry “addressed” should read ” inserted”
(autocorrect strikes again).
Very nice. But where and how to download it?
Unfortunately, plugin developers are missing a chance to sell their product. The posting was very good, but there was no correct planning for the sale. If there is an intention to sell. That way, that does not seem to be the intention.
This plugin does not work well. Very confusing. The background image does not work. I did not like. Money wasted…
Looking for price and how to purchase, but no information on this anywhere
Hi Helio. Click on the bright red text that says Divi Accordion.
Hello. I bought this plugin and it is not working as it should. SA Accordion. I assume the version being uploaded is different from the advertised version. When I install it appears as 1.0 Beta, and when it is downloaded it comes as 1.3. In fact, I’m already quite frustrated with this purchase. I ask for reimbursement of the amount I have paid, or any indemnity for not being misled by the product offered, but I can not get any support from the company that sold the product. I hope that when it is made the disclosure of any product, that this be tested, because from the beginning everything was wrong and confusing. This company does not deserve to be disclosed here, in Elegant Themes, which has always been a serious business. And whoever buys will be in the same situation. So I suggest that no one buy any product from this company. ELEGANT MARKETPLACE.
Maybe I’m missing it, but when I click on the Divi Accordion link, I get a page full of examples but no information about purchasing/downloading the module. When I go to the homepage, unfortunately for me, it appears to be in German.
That link has no download options…so, there must be another site for download.
No, the links just open de developer’s examples page. Like Helio, I can’t find any download link, nor purchase option.
Referred page only shows demo of the plugin, no option of downloading / way of downloading it.
Yes, where?
Very interesting. But how can we buy the plugin? The link goes to a demo page only.
Where I can download the plugin?