How to Add Custom CSS to Divi

by | Jul 24, 2018 | Resources | 1 comment

One of the advantages of Divi is its many customization features. This includes multiple methods to add custom CSS to Divi, and where to add custom CSS in Divi. In this article we’ll take a look at six ways to add custom CSS to Divi (four of those are unique to Divi) and we’ll show which is our favorite and why.

How (and Where) to Add Custom CSS to Divi

The methods are in no particular order. Although, I did save the best for last. Hang around until the end for some helpful links.

1. Inline CSS

We can add CSS as inline text, just like any WordPress page or post. This can be cumbersome but it works.

This would mean you’d have to style each element individually. Browsers don’t cache inline CSS so it would have to load each time. Also, we can’t use media queries or pseudo elements.

2. WordPress Additional CSS Field

We could also add our CSS to the default WordPress Theme Customizer field. This field is numbered and will highlight code syntax. This even places the CSS in the Divi Theme Options Panel (as we’ll see later). The narrow field can be difficult to use.

This is the code to add an image in your Divi header from the ET article 9 Useful Divi CSS Snippets You Can Add To ePanel In Seconds.

3. Sections, Rows, and Modules Advanced Tab

Sections, Rows, and almost every Divi module has an Advanced tab where you can input your CSS. They include CSS ID, CSS Class, Before, Main Element, and After. Many modules include specialty fields to target other CSS elements for that specific module. The Before and After fields let you use pseudo elements.

Rows have fields for each column, allowing you to customize each column individually.

This method is great for just a few CSS customizations. If you plan to use CSS on more than a handful of sections, rows, or modules, it’s best to use a method that would allow you to target more elements from a single location. These fields do not include numbering or formatting.

Even if you use a different method, you can use the Advanced tab to access to the selectors. Open the module and click on the Advanced tab. Click inside the area for the Main Element. This will show the element’s selector. Copy this selector and paste it into your CSS to target this specific module.

4. On the Page or Post

You can add your CSS to each individual page by selecting settings (the hamburger icon) at the top of the Divi Builder.

This opens the Divi Builder settings screen and shows a field called Custom CSS.  Paste your CSS here and click Save. This allows you to customize just a single page. You have to use the selector when using this field so it knows what to apply the CSS to. This is the header CSS that I used earlier. It will display the image in the header on this page only.

This CSS field does not include line numbers and formatting. Also, it doesn’t export if you use the export tool next to the Settings icon.

5. Divi Theme Options Panel

To access the Custom CSS field go to Divi > Theme Options in the dashboard menu. Scroll to the bottom and you’ll see the field. You can write or paste your CSS here.

The advantage of this is all of your CSS is in the same place. This field does not get overwritten when Divi updates. The lines are numbered and it displays color-coding and formatting to help with your code. Also, this field is wider and easier to use than the Additional CSS field in the Theme Customizer.

6. Child Theme Stylesheet

The CSS stylesheet is the best option for adding CSS to Divi. You should only add CSS to a child theme. If you add CSS to the parent theme it will be overwritten when Divi updates. In the WordPress dashboard go to Appearance > Editor. Select style.css in the Theme Files list on the right. You can create or paste your code here. You can also upload your CSS file via FTP.

There are several advantages to this method:

  • You can include this stylesheet in your child themes that you provide customers, clients, or for yourself.
  • You can work in code tools such as Brackets or any tool you prefer.
  • All of your CSS is in a single location that’s easy to access.

WordPress will alert you that it’s best to add your CSS to the built-in CSS editor in the Theme Editor (which is the same as the Divi Theme Options Panel). This is true if you’re using a standard WordPress theme but, as we’ve seen in this article, with Divi we have many more options.

You can find more information about child themes and use the free Divi Cake Child Theme Generator here at the Divi Cake blog:

Ending Thoughts

Divi’s a powerhouse when it comes to custom CSS options. There are several methods and they all have their advantages. Not only do the standard WordPress methods work, Elegant Themes provides us with a few ways that are unique to Divi that can target multiple elements, a single page, or even the entire website, at the same time. Using a child theme stylesheet is the best method overall because of the external tools and the ability to include them in your premium child themes.

What’s your favorite way to add custom CSS to Divi? Where do you usually add it? Let us know in the comments.

1 Comment

  1. Kat

    Hello,
    Divi allows to have 1, 2 or 3 columns all of equal width. I’d like to be able to change the width of the columns to have one bigger than the other. Could CSS solve that? Can I use the advance tab for that? FYI, I need it regularly enough, so that might change the answer.
    Take care

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Featured Divi Products

 

Recommended Hosting

Pin It on Pinterest

Shares