Demo
Here are some examples of how you can style Accordion for Divi.
Toggle Style
When using the Toggle style, each toggle can be opened and closed individually.
Demo 1
This is a normal accordion item. It was created using WordPress TinyMCE. It has all the features you would expect like bold text, italic text or links.
- One
- Two
- Three
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Demo 2
This accordion item was created using the Divi Builder. It has all the features you would expect.
Blurb
Hello, I am a Blurb
Blurb
Hello, I am a Blurb
Accordion for Divi is a awesome product. I use it on all my sites.
Accordion Style
When using the Accordion style, there will be always one open toggle. Opening another toggle closes the currently open one.
Demo 1
This is a normal accordion item. It was created using WordPress TinyMCE. It has all the features you would expect like bold text, italic text or links.
- One
- Two
- Three
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Demo 2
This accordion item was created using the Divi Builder. It has all the features you would expect.
Blurb
Hello, I am a Blurb
Blurb
Hello, I am a Blurb
Accordion for Divi is a awesome product. I use it on all my sites.
Styling Options
Accordion for Divi has way more powerful styling options than the default Accordion module. You can change colors, borders and even the toggle icons – and if there is no setting (yet), there is a CSS field for every element.
Demo 1
This is a normal accordion item. It was created using WordPress TinyMCE. It has all the features you would expect like bold text, italic text or links.
- One
- Two
- Three
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Demo 2
This accordion item was created using the Divi Builder. It has all the features you would expect.
Blurb
Hello, I am a Blurb
Blurb
Hello, I am a Blurb
Accordion for Divi is a awesome product. I use it on all my sites.
Fullwidth Module
Accordion for Divi is available as Fullwidth Module as well. However, Divi applies some default Styles to Fullwidth Sections which could mess up your page styles if using the Divi Builder for the Accordion Items. An alternative way of achieving a fullwidth Accordion for Divi would be to use a normal Section/Row and make the Row fullwidth with a custom width of 100% instead.
Demo 1
This is a normal accordion item. It was created using WordPress TinyMCE. It has all the features you would expect like bold text, italic text or links.
- One
- Two
- Three
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Demo 2
This accordion item was created using the Divi Builder. It has all the features you would expect.
Blurb
Hello, I am a Blurb
Blurb
Hello, I am a Blurb
Accordion for Divi is a awesome product. I use it on all my sites.
Documentation
Here you find the answers to the most common questions and problems.
How to add a module to your page
To add custom Divi modules to your page, you currently must use the backend builder. Due to limited support from Elegant Themes, third party modules do not work in the visual builder. Elegant Themes announced better third party support for Divi 3.1 but has not announced a release date yet. Once available, we will update our modules as soon as possible.
How to add Accordion Items?
After activating the module, head over to your WordPress backend. You will see a new menu called Accordion. Here you can add and edit your Accordion Items. Use Categories to group your Accordion Items.
How to update your plugin or theme
Updates for our products get delivered automatically right to your WordPress backend. Either go to Dashboard->Updates or use the update button in the Plugins or Themes section.
Attention: Some of our products require an activated license to get updates.
How to activate your license
If the modules requires a license key, go to the Plugins section of your WordPress backend and select the submenu for the module. Enter the license key in the license key field and click the save button. An activate button will appear. Click it and if the license is valid, you will see a green activation confirmation.
If you don’t see a green activation confirmation, the activation failed due to an invalid license. Make sure you enter the correct license and click the save button before clicking the activate button.
Not all of our module require you to enter your license key to work. If there is no settings page to enter the license (as described above) then you can use the module as is without entering the license key. However, this is subject to change in the future, so keep your license in a safe place.
How to install a Divi Module
Our Divi Modules are WordPress plugins and can be installed like any other WordPress plugin:
- Download the zip file from Elegant Marketplace
- Head over to your WordPress backend and go to the Plugins section
- Click “Add new”
- Click “Upload Plugin”
- Select the zip file you downloaded earlier
- Click “Install Now”
After the plugin is installed, make sure to activate it.
Where to find your license
If your module requires a license key and you did not receive one via e-mail from Elegant Marketplace, you can do the following:
Head over to Elegant Marketplace and log into your account. Then go to your purchase history:
Find the “View License” button:
Click on the little Key icon to reveal the license key:
If there is no license key available for your purchase or if the license key expired unexpectedly early, please contact the Elegant Marketplace support. Licenses are generated by Elegant Marketplace and generation and renewal are out of our scope.