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.

Creating a Custom Accordion

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”

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.

Custom AccordionCreating a custom accordion for you page is as simple as that. Of course you can tweak it a bit to get the style you want.

Summary

Why Create a Custom Accordion? – Creating your own custom accordion is optional. So why bother?

Sure the preinstalled accordion you got with your theme is good, but with custom accordions, you can create your own style, match the colors to your website, create animations, manage how your accordion behaves when clicked, and much more! All in all, having a custom accordion gives you the flexibility you need for your website’s impression to visitors and potential customers.

If you have any more questions, contact us or post a comment below and we will answer your concern.

Check out this post for the 10 Online Design Tools for Brand Savvy Web Entrepreneurs and discover the possible designs you can integrate to your site!

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Want your website to look better and more appealing? Contact us and let’s make it happen!


Other Posts

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