How to add custom CSS to Divi

What is CSS and why would you want to add it to Divi?

“Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.”

Divi comes with a large range of built-in options that can be used to easily change how your website looks and for many websites these options are more than enough to customize your website.

The need to learn and use any CSS at all has greatly reduced since Divi was first released.

But as with anything in life we like to be different and adding custom CSS to Divi allows you to style your website in ways not available within the Divi Builder.

My personal preference is to use either the Theme Options area or a Divi child theme when I need to add CSS, but for most websites, I stick with the built-in design options.

Where to add Custom CSS to Divi

If you want to add your own custom CSS to Divi you can choose any of the following 7 options below.

1. Divi Theme Options Custom CSS Box (For small sites with little CSS)
2. Advanced Options tab of sections, rows, and modules
3. Divi Builder Page Settings on a page-by-page basis
4. A Divi Code module
5. Divi child theme style.css file (Most of my more customized sites use a child theme)
6. WordPress Theme Customizer Custom CSS box

1. Divi Theme Options Custom CSS Box

Adding your custom CSS via the Theme Option is a popular option as it allows you to easily keep all of your custom CSS in a single location, rather than having to add it into various places around your site in sections, rows, and modules. This option is quickly accessible in your WordPress dashboard and doesn’t require a child theme.

• Keep your CSS in one place with the theme
• Don’t need to install a child theme
• Comes with Divi code formatting
• CSS is not lost when updating Divi
• Can be hard to read on a smaller panel if you have lots of CSS

If I am building a Divi site that does not need a child theme for other reasons, then I will usually add my CSS to the Theme Options. But, if I need a child theme anyhow to make Theme or plugin customizations, then I will add my CSS into the style.css of the child theme (see #5 below).

Where to find
The Custom CSS box can be found in your WordPress dashboard by navigating to Divi > Theme Options and scrolling to the bottom of the page.
When to use
Use the Theme Options CSS box on sites with less custom CSS code and those that don’t otherwise require a child theme.

2. Advanced tab of sections, rows, and modules Settings

All Divi sections, rows, and modules have an Advanced settings tab where you can add CSS classes & IDs and add custom CSS to target various pre-set areas of the section, row, or module. Sections and rows will have the option to add CSS for Before, Main Element and After and modules will have additional boxes for different elements within that module. Each also has the option to easily add the CSS for Default and Hover states.

The downside of using CSS in your individual sections, rows, and modules is that it can become very hard to find where your code is.

• CSS stays will your module if you want to export it to another site
• Easy to add hover states for your CSS
• Don’t need to install a child theme
• Comes with Divi code formatting
• CSS is not lost when updating Divi
• Can be hard to find your CSS when spread across multiple places

Where
In the settings for any section, row or module go to the Advanced tab where you will see CSS IDs & Classes and various Custom CSS boxes.
When to use
Use the advanced settings custom CSS boxes for quick, one-off edits, or if you want to export a section, row, or module and keep the CSS attached.

3. Divi Builder Page Settings

Each page you have in Divi will have a set of page settings associated with it and Custom CSS is one of the settings found in the Advanced tab. When you can add your CSS it will only be added only to that specific single page and not site-wide. This is useful for easily adding page-specific edits without having to manually target pages yourself.

• Add CSS on a page-by-page basis
• CSS is not added sitewide
• Comes with Divi code formatting
• CSS is not lost when updating Divi
• Don’t need to install a child theme

Where
In the Visual Builder click on the cog icon and select the Advanced tab in the settings modal.
When to use
Use the page settings if you need to add CSS that will only be used on a single page and not sitewide.

4. Divi Code module

The Divi Code module allows you to add HTML, CSS, or JavaScript code content and place it in any row on your site. When creating a page layout that uses JavaScript and CSS it can be added into a single Code module and exported in a JSON file. When you add CSS into a Code module you will need to wrap it in <style></style> tags.

• Add CSS together with and HTML & JavaScript code
• Comes with Divi code formatting
• CSS is not lost when updating Divi

Where
The Code module is available in the Divi Builder and can be added the same as you add any other Divi Module.
When to use
Use the code module to keep CSS, JavaScript, and HTML in a single area. Helpful in exporting JSON layouts with code attached.

5. Divi child theme style.css stylesheet file

Along with the Theme Options Custom CSS box (see #1), using a Divi child theme style.css file is the most common way of adding custom CSS to Divi. Not all Divi sites need a child theme but for those that do, taking advantage of the style.css file within it is something I will do. If a Divi site is basic and does not need a child theme for making PHP edits to theme or plugin files I will usually not add a child theme just for CSS but will add it into Theme Options.

This method requires you to have 1st actually added and installed a child theme for Divi. If you have not done this already then editing your style.css (of Divi) will mean that you will lose edits when Divi is updated. You can use our free Bare Bones child theme, which is a black child theme for Divi. Just upload it in your dashboard and activate it and you will then have a child theme with style.css where you can safely add your custom CSS.

• Your CSS is in a single, easily accessed location
• You can use your preferred code editor for adding/editing CSS
• CSS is not lost when updating Divi

Where
In your WordPress dashboard navigate to Appearance > Theme Editor and select style.css from the list of files on the right side. Ensure it is the child theme style.css and NOT the Divi Theme style.css.
When to use
Use a child theme style.css stylesheet if you have a lot of CSS or already have a child theme for other reasons.

6. WordPress Theme Customizer Custom CSS box

The WordPress Theme Customizer allows you to add CSS but I am yet to find any benefits of using the option over any of the others mentioned.

Where
Open the WordPress Theme Customizer and navigate to Additional CSS.
When to use
I don’t think I have ever used this option, ever.

Where NOT to add custom CSS in Divi

You already know where you should be adding your custom CSS in Divi, but just to make things clear you should not be adding or editing CSS in the Divi Theme style.css file.

Do not add or edit CSS in your style.css (see #5) file unless you have a child theme installed and activated. If you do not already have a child theme added and you add your CSS to the style.css in Divi it will be overwritten when you update the Divi Theme.

Divi Code formatting for options 1 – 4

When adding custom CSS in Divi you are given a number of tools that were introduced in a Divi update in February 2018. These help you add your CSS code faster and without errors. Your Divi CSS boxes will include the following features;

• Smart Syntax Highlighting
  Custom CSS and code will be automatically color-coded and formatted in numbered lines for easy reference.
• Warning And Error Reporting
  As you write your custom CSS Divi will automatically generate warning messages as errors are detected.
• Autocomplete And Suggestions
  As you write your custom CSS Divi will automatically add autocomplete suggestions and generate closing tags.
• Easy Color Picking
  When adding CSS for colors Divi will automatically open a color picker.
  
• Multi-Select
  Select multiple lines or multiple values at once for batch adjustments using Ctrl+Click and Alt+Drag.
• Search, Find And Replace
  A search & replace functionality to easily find & replace code in the CSS box

Where do you add your CSS?

As I mentioned above, I usually add my CSS into the Theme Options Custom CSS box or into a child theme but there are a few situations where I will use the other options too. I think most Divi users will also be using the Theme Options or child theme methods but let us know in the comments which method you prefer to use.

If you found this post useful, please share it with a friend or drop a comment below 🙂