Custom CSS code can be added to various locations inside Divi, such as:
Theme Options
Theme Builder Templates
Page Settings
Element's Free-Form CSS
Element's Module Elements Tab
Code module
Child theme
Inline style
Adding custom CSS code in the Theme Options
Go to WordPress Dashboard → Divi → Theme Options
Go to the General Tab → Custom CSS
Notes:
The CSS code added to the Custom CSS section will also be synced with the Appearance → Theme Customize → Additional CSS section
The CSS code added to the Custom CSS section will be applied site-wide.
Adding custom CSS code using the Page Settings
Open a page built with Divi or a Theme Builder template
Expand the Visual Builder toolbar by clicking on the Three Dots icon
Click on the Page Settings icon
Go to Advanced Tab
Add the custom CSS code to the Custom CSS section
Adding custom CSS code using the element's Free-Form CSS
Definition:
An Element is any Section, Row, Column, or Module.
Open the Settings modal window of any element
Go to Advanced Tab → Custom CSS
Select the Free-Form CSS tab
Note:
When using the Free-Form CSS section, any CSS selector that will be used will start with the keyword selector.
Example:
selector h1 {
color: red;
}Adding custom CSS code using the Module Elements tab
Definition:
An Element is any Section, Row, Column, or Module.
Open the Settings modal window of any element
Go to Advanced Tab → Custom CSS
Select the Module Elements tab
Important notes:
In this section, only CSS properties can be added, such as
color: red;CSS code that also includes the element's selector should be added in:
Theme Options → Custom CSS
Or in Page Settings → Advanced Tab → Custom CSS
Or in Element's Advanced Tab → Custom CSS → Free-Form CSS
Adding custom CSS code using the Code module
Custom CSS code can be added to the Code module, wrapped into the <style> </style> tags:
Example:
<style>
.element-selector {
color: red;
}
</style>
Adding custom CSS code in style.css of a Child Theme
You can add CSS code to the Child Theme's style.css file if you're using a Child Theme.
Go to WordPress Dashboard
Go to Appearance → Theme Editor
Select the style.css file from the right sidebar
Add the custom CSS code after the existing code
Adding custom CSS code as Inline Style
You can add CSS code directly to the text-based content of a Module.
Open the Modal Settings window of a text-based module - for example the Text module
Switch to Text Mode
Add the inline style using the
style: " "tag.