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;
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.