Many of our Divi customization tutorials provide CSS code that needs to be added to the website. A common question we get: Where is the best place to add custom CSS code?

In Divi, there are numerous options, each has benefits and sometimes there are downsides. I’ll explain the options and trade-offs.

Example

In order to demonstrate the how to add CSS, I’m going to need an example. So let’s assume I want to an image to be displayed as black-and-white and for it to transform to full color when a visitor hovers over it — as shown in the picture below.

Note: This is covered in more detail in our Divi Image Module Hover Effects article.

To achieve this effect, in the module’s Advanced settings, in the CSS Class field we need to add: image-hover-color. This tells the browser to apply the CSS rules for this class to the image.

The next step is to add the CSS code.

Add the CSS Site-Wide or Just to this Page?

The first thing we need to decide is whather to add the code to a single page or site-wide.

What’s the difference?

If we add the code site-wide, it will get downloaded with every page. If we are only going to use this feature on a single page, it makes more sense to add the code to only that page.

Adding the CSS Site-Wide

Divi has two methods for adding CSS Code site-wide. Either of these methods provide identical results. So it’s a matter of personal preference.

  • From the Administration Panel menu, choose Divi > Theme Customizer. Then select Additional CSS. Add the code and click on the Publish button.
  • From the Administration Panel menu, choose Divi > Theme Options. Scroll to the bottom of the page. Add the code to the Custom CSS field and click on the Save Changes button.

 

Image showing custom CSS added to Divi Theme Customizer

CSS added to Divi Theme Customizer

Image showing Custom CSS added to Divi Theme Options

CSS added to Divi Theme Options

Note: If you have a custom child theme (as we always do for websites we design), a better option would be to add the code to the theme’s style.css file.

Adding CSS to a Single Page

Our preferred method for adding CSS to a single page is to add the code to the page’s Custom CSS field. This can be a bit tricky to find.

  • If you are using the standard (back-end) Divi Builder, click on the hamburger menu near the top right corner of the builder.
  • If you are using the Visual (front-end) Builder, click on the three dots in the purple circle, then choose the gear icon.
Image showing location of Page Settings in standard Divi Builder

Page Settings in Standard Divi Builder

Image showing location of Page Settings in Divi Visual Builder

Page Settings in Divi Visual Builder

Once you have located the Page Settings, locate the Custom CSS field (in the VisualBuilder it is located in the Advanced tab) and add the CSS code.

Image showing custom CSS added to Page Settings in standard Divi Builder

CSS added to Page Settings in Standard Divi Builder

Image showing custom CSS added to Page Settings in Divi Visual Builder

CSS added to Page Setting in Divi Visual Builder

There is one other method to add custom CSS to a page.

Add a code module anywhere on the page. If you use this technique, you must surround the CSS in HTML <style> tags as shown below.

Why might you want to add the CSS using a code module?

Let’s suppose you have a section containing images with this effect that you want to save to the Divi Library to use on several pages. You might even want to export the section from the Divi Library for use on other websites. In this case, it would be convenient to package a code module containing the custom CSS in the section, that way you simply import the section and the CSS is automatically applied.

CSS added to Page Settings in Standard Divi Builder

Image showing custom CSS added to Page Settings in Divi Visual Builder

CSS added to Page Setting in Divi Visual Builder

Summary

Divi provides a number of ways to add custom CSS. There isn’t any single “right” method. The best choice varies on the situation.

Join our email list

Join our email list

Join our mailing list to receive the latest tech tips from our team.

You have Successfully Subscribed!

Pin It on Pinterest

Share This