Divi Plugin Highlight – Divi Accordion

Posted on July 8, 2017 by in Divi Resources | 47 comments

Divi Plugin Highlight – Divi Accordion

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.

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

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

47 Comments

  1. Very interesting. But how can we buy the plugin? The link goes to a demo page only.

  2. Very nice. But where and how to download it?

    • Randy A. Brown

      Hi Helio. Click on the bright red text that says Divi Accordion.

      • Referred page only shows demo of the plugin, no option of downloading / way of downloading it.

      • No, the links just open de developer’s examples page. Like Helio, I can’t find any download link, nor purchase option.

      • That link has no download options…so, there must be another site for download.

      • 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.

      • 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 Carpetcleaninghaddontownship, 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.

    • Looking for price and how to purchase, but no information on this anywhere

    • 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…

  3. 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).

  4. What’s the price? 🙂

  5. 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.

  6. nice idea but there is download link for this plugin here on this site or on the SA web site.

  7. 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

      • 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 Carpetcleaninghaddontownship, 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.

  8. Let us know when you get a download link please. I tried googling it but could not find anything.

  9. 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.

    • Nathan B. Weller

      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:

    • Randy A. Brown

      Scott, sorry the comment came across as smug. That wasn’t my intent.

  10. Yes. +1 for the download/purchase link.

  11. Nice information this morning.

    Thanks for dropping the tutorial to this awesome theme.

    Do have a nice day

  12. I just did wrote to the developer about missing download, hope he will come back to us 🙂

  13. hey, yes, that’s ill – no download link! – Very good for missing the chance to sell their product.

  14. Nice plugin but there is no download or buy option :/

  15. download in the next rains.

  16. Same issue. No way to download this plugin.

  17. Okay that is really odd. I just clicked on that same link again and it took me here:
    but there is a link in the top paragraph to purchase it. Fourth line down.

  18. I’ve solved the mystery. Chrome browser doesn’t show final line of that says ‘If you are interested in this Plugin, you can buy it here.’ But Safari browser does show this line.

  19. I believe this is a plugin available on elegantmarketplace
    (if you search: marketplace>plugins you should find it)

    Hope it helps. 🙂

  20. 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.

  21. 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.

  22. This plugin does not work well. Very confusing. The background image does not work. I did not like. Money wasted…

  23. 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

    • 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?

    • Randy A. Brown

      Hi Micheal. For the icons I used the slugs from Font Awesome’s website.

  24. 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.

  25. 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.

500,591 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today
виды ценных бумаг

https://shah21.com.ua

www.profvest.com

Pin It on Pinterest