The Custom CSS options in Divi allow you to write and apply advanced CSS directly to a module. This feature provides flexibility for unique designs and precise styling beyond the built-in design settings.
Where to Find the Custom CSS Options
Open the Module Settings: Click the gear icon or the module itself to access the settings.
Navigate to the Advanced Tab: Locate the Custom CSS option group.
Custom CSS Customization Settings
Free-Form CSS:
Use free-form CSS to write custom styles for a specific module.
Use the
selectorkeyword to target the selected element.Example:
selector h1 { color: red; }
Module Elements:
Apply CSS to individual elements within a module.
Open the Module Elements section to view areas like Title, Body, or Button, each with its own field for custom CSS.
Example for targeting the title element:
color: blue;
font-size: 24px;
Free-form CSS Examples:
In the Free-Form CSS, you can add CSS code that will target the current editing element. In this area, multiple CSS blocks can be added.
selector h4 { | Target the current module's H4 tag, set the text color to red, and set the line height to 1.5.
Changes the current module's display to Grid and sets the grid layout to two equal columns.
Target the current module's paragraph tags and set the text to appear in uppercase, the font size to 18px, and a letter spacing of 3px. |
Module Elements Examples:
Each element (section, row, column, and module) has different areas to which you can only add CSS rules unline the Free-Form CSS area when entire CSS Blocks can be used.
For example, the Audio module will have areas for Audio Cover Art, Audio Content, and Audio titles, where you can only add CSS rules. In contrast, the Blurb Module will have different areas such as Blurb Image, Blurb Title, Blurb Content, and more.
Almost all Divi elements also have three common areas: Before, Main Element, and After.
CSS Area | CSS Rules |
Before | content: ""; |
Maine Element | color: red; |
After | content: "\4d;; |
As can be seen from the examples above, in the Free-form CSS, you can add complete CSS Code such as:
selector h4 {
color: red;
line-height: 1.5;
}
selector {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
selector p {
text-transform: uppercase;
font-size: 18px;
letter-spacing: 3px;
}Whereas in the different sections of the Module Elements, only CSS properties can be added, such as:
color: red;
line-height: 2em;
opacity: 80%;
Best Practices for Using Custom CSS
Be Specific: Use targeted CSS to avoid accidentally affecting other modules.
Leverage Built-In Classes: Combine custom CSS with Divi’s built-in classes or create your own for better reusability.
Test Across Devices: Ensure your custom CSS works on desktop, tablet, and mobile screens.
Keep It Organized: Write comments in your CSS to make it easier to understand and maintain.
The Custom CSS options empower you to fine-tune your modules, enabling advanced styling that perfectly aligns with your vision.