majiayu000 Divi 5 CSS Development Patterns
Overview
Divi 5 is a complete architecture overhaul featuring:
- React-based framework (faster, more responsive)
- Flexbox-first layout system (sections, rows, columns use Flexbox by default)
- CSS Grid support (for advanced layouts)
- Design Variables (native token system)
- No shortcodes (block-based like Gutenberg)
- 7 responsive breakpoints (vs 3 in Divi 4)
CSS Integration Methods
Method 1: Theme Options (Global Styles)
Location: Divi -> Theme Options -> Custom CSS
Format: Raw CSS without <style> tags
/* Paste directly - no tags needed */
:root {
--custom-color: #2ea3f2;
}
Method 2: Code Module (Page-Specific)
Location: Add Code Module to page
Format: CSS wrapped in <style></style> tags
<style>
.page-specific-style {
background-color: var(--custom-color);
}
</style>
Method 3: Child Theme (Production)
Location: child-theme/style.css Format: Standard CSS file
Method 4: Free-Form CSS (Per-Element)
Location: Module -> Advanced -> Custom CSS -> Free-Form CSS
Format: Use selector keyword to target element
selector {
background-color: #1d1f22;
}
selector h2 {
color: gold;
}
Selector Specificity for Divi Overrides
Divi uses inline styles and !important extensively. To override:
Standard Override Pattern
/* May not work - too low specificity */
.et_pb_button {
background-color: black;
}
/* Better - higher specificity */
body .et_pb_button {
background-color: black !important;
}
/* Best - with custom class */
body .et_pb_button.custom-btn {
background-color: black !important;
}
Button Override Template
body .et_pb_button {
background-color: #000000 !important;
border-radius: 0 !important;
letter-spacing: 4px !important;
text-transform: uppercase !important;
font-family: 'Lato', sans-serif !important;
font-weight: 400 !important;
border: 1px solid #000000 !important;
}
body .et_pb_button:hover {
background-color: #222222 !important;
border-color: #222222 !important;
}
Section Override Patterns
/* Dark section */
.et_pb_section.custom-dark-section {
background-color: #1d1f22 !important;
}
.et_pb_section.custom-dark-section h1,
.et_pb_section.custom-dark-section h2,
.et_pb_section.custom-dark-section p {
color: #ffffff !important;
}
/* Gray section */
.et_pb_section.custom-gray-section {
background-color: rgba(150, 150, 150, 0.47) !important;
}
Class Naming Convention
Use a unique prefix to avoid conflicts with Divi's classes:
| Pattern | Example | Purpose |
|---|---|---|
{prefix}-btn |
cjs-btn |
Button base |
{prefix}-btn--variant |
cjs-btn--primary |
Button variant |
{prefix}-section--modifier |
cjs-section--dark |
Section modifier |
{prefix}-card |
cjs-card |
Component |
Adding Classes in Divi 5
- Select the module
- Go to Advanced Tab -> Attributes
- Click Add Attribute
- Set Name to
class - Set Value to your class
Common Divi Module Selectors
| Module | Selector | Notes |
|---|---|---|
| Button | .et_pb_button |
Needs body prefix and !important |
| Text | .et_pb_text, .et_pb_text_inner |
Inner for paragraphs |
| Blurb | .et_pb_blurb |
Card-like modules |
| Section | .et_pb_section |
Outer containers |
| Row | .et_pb_row |
Inner containers |
| Column | .et_pb_column |
Grid columns |
| Heading | .et_pb_module h1/h2/h3 |
Use module prefix |
| Image | .et_pb_image |
Image modules |
| CTA | .et_pb_promo |
Call-to-action |
Typography Patterns
Font Stack Template
:root {
--font-body: 'Fira Sans', system-ui, sans-serif;
--font-title: 'Josefin Sans', sans-serif;
--font-heading: 'Playfair Display', Georgia, serif;
--font-button: 'Lato', Helvetica, Arial, sans-serif;
}
Heading Overrides
body .et_pb_module h1 {
font-family: var(--font-title) !important;
text-transform: uppercase;
letter-spacing: 3px;
}
body .et_pb_module h2 {
font-family: var(--font-heading) !important;
color: #3f445e !important;
}
Text Line Length (Readability)
/* Limit text width for optimal readability */
.et_pb_text_inner p,
.et_pb_text_inner li {
max-width: 60rem; /* ~960px, replaces 75ch */
}
/* Center when in centered modules */
.et_pb_text_align_center .et_pb_text_inner p {
margin-left: auto;
margin-right: auto;
}
Responsive Breakpoints
Divi 5 supports 7 breakpoints. Key ones:
/* Tablet landscape */
@media (max-width: 1024px) { }
/* Tablet portrait */
@media (max-width: 980px) { }
/* Phone landscape */
@media (max-width: 767px) { }
/* Phone portrait */
@media (max-width: 479px) { }
/* Ultrawide monitors */
@media (min-width: 2560px) {
:root { font-size: 17px; }
.et_pb_row { max-width: 1500px !important; }
}
@media (min-width: 3440px) {
:root { font-size: 18px; }
.et_pb_row { max-width: 1600px !important; }
}
@media (min-width: 3840px) {
:root { font-size: 19px; }
.et_pb_row { max-width: 1800px !important; }
}
Card Pattern
.et_pb_blurb.custom-card,
.et_pb_column.custom-card {
background: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
padding: 2rem;
transition: all 0.3s ease;
}
.et_pb_blurb.custom-card:hover,
.et_pb_column.custom-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}
Quote Block Pattern
.et_pb_text.custom-quote {
border-left: 4px solid #b2a065;
padding-left: 2rem;
font-family: var(--font-title);
font-size: 1.375rem;
font-style: italic;
}
Info Box Pattern
.custom-info-box {
background-color: #f5f5f5;
border-left: 4px solid #b2a065;
padding: 2rem;
border-radius: 0 8px 8px 0;
}
Design Token Template
:root {
/* Brand Colors */
--color-primary: #2ea3f2;
--color-primary-hover: #1a8fd4;
--color-secondary: #b2a065;
--color-secondary-hover: #9a8a57;
/* Dark Theme */
--color-dark-section: #1d1f22;
--color-dark-overlay: rgba(29, 31, 34, 0.95);
--color-gray-section: rgba(150, 150, 150, 0.47);
/* Text Colors */
--color-white: #ffffff;
--color-body-text: #222222;
--color-body-text-light: #666666;
--color-heading-text: #333333;
--color-heading-accent: #3f445e;
/* Backgrounds */
--color-light-gray: #f5f5f5;
--color-footer: #1d1f22;
/* Typography */
--font-body: 'Fira Sans', system-ui, sans-serif;
--font-title: 'Josefin Sans', sans-serif;
--font-heading: 'Playfair Display', Georgia, serif;
--font-button: 'Lato', Helvetica, Arial, sans-serif;
/* Sizing */
--max-width: 1400px;
--max-width-text: 60rem;
--radius-card: 8px;
}
Best Practices
- Always use !important when overriding Divi button and module styles
- Prefix all custom classes to avoid conflicts
- Use CSS Variables for maintainability (supported in Divi 5)
- Test on all 7 breakpoints before production
- Use body prefix for higher specificity:
body .et_pb_button - Use 60rem instead of 75ch for text width (ch not supported)
- Wrap Code Module CSS in
<style></style>tags - Theme Options CSS goes without tags
Reference Files
For complete examples, see:
${CLAUDE_PLUGIN_ROOT}/skills/divi5-css-patterns/examples/${CLAUDE_PLUGIN_ROOT}/skills/divi5-css-patterns/references/