Divi 5 CSS Patterns

Divi 5 CSS Development Patterns

Overview

Divi 5 (released February 26, 2026, current version 5.6.0 as of May 25, 2026) is a complete architecture overhaul:

• React 18-based Visual Builder — no Shadow DOM, standard DOM with et_pb_* classes
• Flexbox-first layout — sections, rows, columns use Flexbox by default
• Native CSS Grid support — convertible from Flexbox in builder; 5.6 added full CSS track values (grid-auto-columns, grid-auto-rows)
• Design Variable Manager — 6 variable types (Colors, Fonts, Numbers, Images, Text, Links)
• Preset System — Option Group, Element, Stacked, and Nested presets. 5.3 added Nested Option Presets (presets within presets, e.g., CTA > Button > Border)
• Block-based storage — JSON format, no shortcodes
• 7 responsive breakpoints — 3 active by default, 4 optional
• Dynamic CSS — 94% smaller stylesheets, per-page CSS generation. Per-module components combine into a unique per-page stylesheet.
• Critical CSS + Inline Stylesheets — auto-extracted above-the-fold CSS inlined; non-critical deferred. Together they eliminate render-blocking CSS.
• Composable Settings (5.2) — toggle any design option on any sub-element, reducing CSS needs
• Canvas System — local/global canvases for off-canvas menus, popups, staging areas
• Canvas Portal Module — inject canvas content at specific layout locations
• Interaction Builder — cross-canvas interactions with Click, Mouse, Viewport, Load triggers
• Loop Builder — native repeating content loops with CSS Grid for dynamic layouts
• Page Manager — create/edit/duplicate/delete pages without leaving the builder
• Divi AI Agent — AI tool sets integrated into the builder (5.2; 5.5 added canvas AI tools for natural-language workflows)

Divi 5.3 – 5.6 Additions (Use Builder First)

The skill auto-activates for any Divi CSS task, but many things that previously required custom CSS now have native equivalents. Reach for these first:

5.3 (April 24, 2026) — Form overhaul

• Pseudo-class editing modes: design tabs now expose :checked, :focus, :active directly. Style field focus rings, checked checkboxes, and active states in the builder — no custom CSS for these.
• Harmonized field options across all form-based modules (Contact Form, Email Optin, Login, Signup).
• New checkbox and radio field groups with preset support — style once, apply across forms.
• Contact Form 7 Styler module — renders + styles CF7 inside Divi with full design controls. Use this instead of writing CF7 CSS manually.
• Nested Option Presets — presets within presets. Common sub-options (e.g., Call To Action > Button > Border) now support presets.

5.4 — Variable Generators

• Sizing Variable Generator — automates fluid responsive sizing via clamp(). Use this instead of hand-writing clamp() for every type scale.
• Relative Colorscheme Generator — HSL-based color systems. Generates derivative shades from a single base color.

5.5 (May 12, 2026) — Image overhaul

• Aspect Ratio settings on every image element — eliminates CLS by reserving space before the image loads. Always set this on image modules.
• Framing settings — reposition cropped images within their aspect ratio (object-fit + object-position via builder).
• Image Presets — preset support across all modules with images.
• SVG sanitization for inline SVG (paves way for 5.6 SVG module).
• Composable settings for image option groups — set image-specific options on any module containing an image.

5.6 (May 25, 2026) — Five new modules

• Timeline — vertical/horizontal event chronologies. Pairs with Loop Builder.
• Breadcrumbs — navigation hierarchy. Great for Theme Builder templates. (Note: Home Link uses dedicated Home Link settings, NOT the general breadcrumb link styling.)
• SVG — inline SVG with native stroke and width settings.
• Table of Contents — auto-generates from page headings.
• Instagram Feed — image gallery sourced from Instagram.
• Color Scale Generator — systematic color derivative creation.
• Color Harmony Generator — tetradic, triadic, analogous color relationships.
• Fixed: decimal values in Section Divider Horizontal Repeat (0.6x); grid track values beyond single numerics; global number/font variables on frontend; responsive padding on columns with child modules.

CSS Integration Methods

Method 1: Theme Options (Global Styles)

Location: Divi > Theme Options > Custom CSS Format: Raw CSS without <style> tags Priority: Loads after child theme — higher cascade priority

:root {
  --custom-color: #2ea3f2;
}

Method 2: Page-Level Custom CSS

Location: Page Settings > Advanced Tab > Custom CSS Scope: Single page only

Method 3: Module Custom CSS (Advanced Tab)

Location: Any element > Advanced Tab > Custom CSS Organized into:

• Module Elements (Title, Body, Button, etc.) — accepts property declarations only, no selectors
• Before / Main Element / After — pseudo-element targeting
• Free-Form CSS — full rulesets with the selector keyword

Method 4: Free-Form CSS (New in Divi 5)

Uses the selector keyword as a placeholder for the current element:

selector h4 { color: red; line-height: 1.5; }
selector { display: grid; grid-template-columns: repeat(2, 1fr); }
selector:hover { transform: scale(1.02); }

Multiple CSS blocks can be added per module. This is the most powerful per-element styling method.

Method 5: 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 6: Custom HTML Wrappers (New in Divi 5)

Location: Advanced Tab > HTML option group

• HTML Before and HTML After fields
• Inject wrapper divs, data attributes, or helper markup around any element
• Available on every element (sections, rows, columns, modules)
• Often replaces Code Modules for structural wrapper needs

Method 7: Semantic Elements (New in Divi 5)

Location: Advanced Tab > HTML option group > Element Type dropdown Change any element's HTML tag: section, nav, header, article, aside, footer, main, button, etc.

Method 8: Child Theme (Production)

Location: child-theme/style.css Note: Divi's cached-inline-styles loads after child theme. Use !important or Theme Options CSS for higher priority.

Method 9: Attributes Panel (Replaces CSS ID & Classes)

Location: Advanced Tab > Attributes

• The old "CSS ID & Classes" toggle is gone in Divi 5
• Supports: id, class, aria-label, data-*, rel, title, and any HTML attribute
• Existing D4 IDs/classes auto-migrate to this panel

Adding Custom Classes in Divi 5

1. Select the module
2. Go to Advanced Tab > Attributes
3. Click Add Attribute
4. Set Name to class
5. Set Value to your class name(s)

Selector Specificity for Divi Overrides

Divi applies many styles inline or with !important. 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', Helvetica, Arial, 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

.et_pb_section.custom-dark-secti