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/

Divi 5 CSS Patterns