We’re going to turn the regular Divi Accordion module into a super stylish custom accordion in just a couple minutes. When you’re done, you should get a result like you see on our home page – webcontempo.wpengine.com.

This involves just a couple quick steps – modifying the CSS, and pasting into your custom CSS section in Divi, then adding a class to the main accordion, and setting up your accordion items, along with a custom icon.

STEP 1 – Modify CSS Code

First – Download the CSS Source Files here 

Open this in your favorite CSS editor. The base color in this example is RED – hex code #ff0000 – do a search/replace to update all instances of #ff0000 to whatever you want your base color to be.

The shadow color is #e60d0d – do a search/replace to update all instances to whatever color you want your shadow to be. NOTE – I recommend only going a slight bit darker than your base color – too dark and there will be too much contrast.

If you want to remove the shadow, delete this line from the CSS file:

text-shadow: 1px 1px 0 #e60d0d, 2px 2px 0 #e60d0d, 3px 3px 0 #e60d0d, 4px 4px 0 #e60d0d, 5px 5px 0 #e60d0d, 6px 6px 0 #e60d0d, 7px 7px 0 #e60d0d, 8px 8px 0 #e60d0d, 9px 9px 0 #e60d0d, 10px 10px 0 #e60d0d, 11px 11px 0 #e60d0d, 12px 12px 0 #e60d0d, 13px 13px 0 #e60d0d, 14px 14px 0 #e60d0d, 15px 15px 0 #e60d0d, 16px 16px 0 #e60d0d, 17px 17px 0 #e60d0d, 18px 18px 0 #e60d0d, 19px 19px 0 #e60d0d, 20px 20px 0 #e60d0d, 21px 21px 0 #e60d0d, 22px 22px 0 #e60d0d, 23px 23px 0 #e60d0d, 24px 24px 0 #e60d0d, 25px 25px 0 #e60d0d, 26px 26px 0 #e60d0d, 27px 27px 0 #e60d0d, 28px 28px 0 #e60d0d, 29px 29px 0 #e60d0d, 30px 30px 0 #e60d0d, 31px 31px 0 #e60d0d, 32px 32px 0 #e60d0d, 33px 33px 0 #e60d0d, 34px 34px 0 #e60d0d, 35px 35px 0 #e60d0d;

Once complete, paste into the Custom CSS area in Divi theme settings, or wherever you like to put your custom CSS.

STEP 2 – Add Class to Accordion Module

Add an accordion module to your page, then click on the advanced settings and add the CSS class: “custom-accordion”

STEP 3 – Add Accordion Items

Now add your accordion items as normal. Note, you do NOT need to do any styling on these – it is already done in the CSS file. Once you add an item, click on the advanced tab and scroll down to TOGGLE ICON.  This controls what icon is used on the accordion. Paste this code:

content: “\e0b0”;

Use the guide here to find the code for the icon you would like to use: https://dividezigns.com/divi-icon-codes/

Then replace “\e0b0” with your own code.

It’s as simple as that, enjoy!

Other Posts

  • This field is for validation purposes and should be left unchanged.