Exploring Divi 2.4: How The Custom CSS Tab and The Divi Library Can Transform Your Workflow

Last week we introduced Divi 2.4, the biggest upgrade in Divi history and a giant leap forward for our most popular WordPress theme. There are so many great features to explore in this update that it was hard to describe them all on the release post, which is why we have decided to do a 2-week series of informational blog posts that will aim to teach you how to take full advantage of Divi 2.4 and its new options. In part ten of this series, I’m going to explore the new Custom CSS options and how you can use them alongside the Divi Library in lieu of adding custom css with a child theme.

Learn All About Divi 2.4 Here

The All New Custom CSS Tabs in Divi 2.4

Sections, Rows, & Modules all have their very own Custom CSS tabs in the Divi Builder. This lets you add custom css to your page and even more specifically, directly to individual elements on the page. There is nothing wrong with doing this via a child theme or within the Elegant Themes ePanel, but you might find yourself using those methods far less with these new features at your fingertips.

Section & Row Custom CSS Options

Sections and Rows let you define custom css for the main element, which is the whole section or row element in the html, and both the :after and :before pseudo elements. Check out a few examples below.

Use Pseudo Elements to Add a Section Divider

Ive added CSS to the section’s After field to create a carrot that points to the next section. This element is made from a square shape that is the same color of the section background color, and then rotated 45%.

display: block;
position: absolute;
content: '';
width: 40px;
height: 40px;
bottom: -20px;
left: 50%;
margin-left: -20px;
background-color: #1e73be;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 1;

Style The Section Container Via the “Main Element” Field

Here, I’ve added a transparent inset shadow to give my section a nice transparent border effect.

-webkit-box-shadow: inset 0px 0px 0px 20px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0px 0px 0px 20px rgba(0, 0, 0, 0.3);
box-shadow: inset 0px 0px 0px 20px rgba(0, 0, 0, 0.3);

Custom Row CSS

Adding custom css to rows will style the container that holds its columns and modules. I’ve added a simple border and some custom padding to add a nice box around the contents of the row.

border: 4px solid rgba(0,0,0,0.4);
padding: 40px;

Custom Module CSS Gives You More Control Than Ever Before

In addition to being able to add custom css to a module’s outer container and its pseudo elements, you can also add styles to individual pieces of a module. I will go over a few examples below and even show you how the Divi Library can take these examples to a whole new level of awesome.

Create Rounded Blurb Images with CSS

This CSS gives the blurb image a large border radius, effectively constraining your images to perfect circles if your images happen to be perfect squares to begin with. I’ve even added a bit of spacing between the blurb image and title by increasing the image’s bottom margin.

line-height: 0;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
overflow: hidden;
xmax-width: 200px;
margin: 0 auto 50px;

Add Custom Borders To Any Module with Custom CSS

Here, I’ve simply added a top double-border and some custom padding to text modules. This is an easy way to bring attention to a block of text.

border-top: 4px double rgba(255,255,255,0.5);
padding-top: 20px;

Use CSS Filters On Any Module!

CSS filters work great for things like images, team member portraits, and even Google Maps.

From left to right, the css filters are as follows: Grayscale, Sepia, Saturation, Blur, Invert. You can change the values in the parentheses to achieve different levels of these effects. Simply add any of the styles below to the Main Element CSS field of any module.

-webkit-filter: grayscale(1);
filter: grayscale(1);

-webkit-filter: sepia(1);
filter: sepia(1);

-webkit-filter: saturate(2);
filter: saturate(2);

-webkit-filter: blur(5px);
filter: blur(5px);

-webkit-filter: invert(1);
filter: invert(1);

Using Custom Module CSS With The Divi Library To Decrease Development Time

If you achieve an awesome effect with custom css, such as the grayscale filter or circular blurb image, and you think you might use it again, simply save it to your Divi Library for later use. If the custom css is the only thing you want to save, choose to only save the Custom CSS Tab when you are prompted to do so.

Anytime you want to add a module with that effect, just add it to the page from your library, and no matter what content you place in that module, your custom css will still take effect. If you think you might even edit that saved css down the road, you can set it up as a global module. Then, any time you need to edit the CSS, you only have to do it once.

A Step By Step Example

Say I added some custom css to make the portrait in a testimonial module grayscale. Now I want this effect to take place across my entire website anytime I add a new testimonial module to my page. Here is how I would set this up using Custom CSS and the Divi Library.

Step 1. Create A Testimonial Module

This can be done from right inside your Divi Library or on a real page. Either will do. I am going to do this via the Divi Library because I haven’t started building my site yet. After navigating the the Divi Admin Tab, select the Divi Library link and choose to Add New.

Choose Your Settings – I named my module appropriately, told the library that I want to make a module, that I only want to include its Custom CSS tab, and I want it to be Global (in case I want to update my testimonial portrait filter in the future).

Submit & Configure – After submitting I am prompted to choose a module (I chose a testimonial module) and then I am immediately taken to the CSS tab since it is the only tab I chose to sync. After I place my css filter into the Testimonial Portrait field, I can Save and update my new library item.

Step 2. Add The Saved Library Element into a Layout

Since I created this module from within the Divi Library, I need to make a new page for my testimonials. I want to add three testimonials so I added my new global module into each column of a 3 column row.

Step 3. Save and Preview Your Awesome Work!

Reviewing & Modifying – After looking at these, I think that the images need a little more color, so I am going to decrease the filter level to 50%. All I have to do is open the settings of a testimonial module and change my filter amount to 0.5. Note that the CSS Tab is green, telling me that it is the only global tab in this module.

After saving the module and updating my page, I can see that all instances of my global testimonial module have portrait images with a 50% grayscale filter. Beautiful.

All of The Above Without Ever Leaving Divi

It’s hard to believe we just did all of that with native Divi tools. This is only one example of how you can use Custom CSS and the Divi Library to improve your workflow. Not to mention being able to export your Divi Library for use on other websites.