Recently a question was asked in one of the Divi Facebook groups about how to achieve a particular effect using Divi. By manipulating the native Tabs module using pure CSS I was able to recreate the desired effect.

Custom Divi Tabs effect
Here is the link to download the JSON file if you’re interested in using this on your project as well.

File Contents
The JSON file contains a ROW which has a Tabs module and a Code module which holds the additional CSS needed for this effect to work.

I’ve placed CSS in the Tab module where available to keep things as native to Divi as possible and the additional CSS that didn’t have a place in the Tab module has been placed in the Code module. Feel free to extract the CSS in the code module to your own child theme style.css file or place it in your Divi panel CSS field.

Icons
The icons are inserted using CSS and the code for them is in the Code module. If you’d like to change the icons, you can find additional unicodes for Divi’s native icon set here: https://www.elegantthemes.com/blog/resources/elegant-icon-font

If you’re not familiar with working with unicodes in CSS, you only need the portion of the unicode that comes after the ‘x’ and you can omit the trailing semicolon.

For example, the unicode for the credit card icon is:


All we need from this unicode is e014. See the Code module included in the CSS for actual uses.