Divi 5 Compatibility

Divi 5 Compatibility Reference

Divi 5 Version: 5.6.0 (May 25, 2026 — Divi 5.0 released February 26, 2026) Architecture: React 18, no Shadow DOM, standard DOM with et_pb_* classes Key recent additions:

• 5.2 — Composable Settings (toggle any design option on any sub-element)
• 5.3 — Pseudo-class editing (:checked, :focus, :active), Contact Form 7 Styler, Nested Option Presets
• 5.4 — Sizing Variable Generator, Relative Colorscheme Generator
• 5.5 — Aspect Ratio + Framing on all images, Image Presets, SVG sanitization
• 5.6 — Five new modules (Timeline, Breadcrumbs, SVG, Table of Contents, Instagram Feed), Color Scale + Color Harmony Generators

CSS Feature Support

Unit Picker Dropdown (Builder Fields)

| Unit | Status | Notes | |------|--------|-------| | px | Supported | Standard absolute unit | | % | Supported | Percentage | | em | Supported | Relative to parent font | | rem | Supported | Relative to root font | | vw | Supported | Viewport width | | vh | Supported | Viewport height | | in, mm, cm, pt, pc | Supported | Print/absolute units |

Advanced Units (Freeform/Advanced Input Mode)

All valid CSS units work in advanced input mode and in custom CSS fields:

| Unit | Status | Notes | |------|--------|-------| | ch | Works in custom CSS | Not in dropdown; works in freeform/advanced/child theme | | ex | Works in custom CSS | Not in dropdown; works in freeform/advanced/child theme | | dvh, svh, lvh | Works in custom CSS | Dynamic/small/large viewport units | | vmin, vmax | Works in custom CSS | Viewport min/max |

Key insight: Since Divi 5 renders standard HTML without Shadow DOM, any CSS feature the browser supports will work in custom CSS, Code Modules, Free-Form CSS, or child theme stylesheets. The unit picker dropdown is limited, but custom CSS is not.

CSS Functions

| Function | Status | Notes | |----------|--------|-------| | calc() | Fully supported | Works in builder fields and custom CSS | | clamp() | Fully supported | Great for fluid responsive values | | min() | Fully supported | Works in builder fields | | max() | Fully supported | Works in builder fields | | var() | Fully supported | CSS custom properties |

Modern CSS Features (via Custom CSS)

| Feature | Status | Notes | |---------|--------|-------| | CSS Variables | Supported | Must be in :root for global scope | | Flexbox | Native | First-class builder support | | CSS Grid | Native | Convertible from flexbox in builder | | Container queries (@container) | Works | Via custom CSS/child theme (not in builder UI) | | :has() selector | Works | Via custom CSS/child theme | | CSS nesting | Works | Browser-native feature, via custom CSS | | Cascade layers (@layer) | Works | Via custom CSS/child theme | | @media queries | Works | Standard responsive tool |

CSS Keywords

auto, none, unset, inherit, fit-content — all supported in advanced unit fields.

Validation Rules

Rule 1: Button Specificity (Critical)

/* WILL NOT WORK — Divi overrides this */
.et_pb_button {
  background-color: #000000;
}

/* WILL WORK — proper override */
body .et_pb_button {
  background-color: #000000 !important;
}

Required for buttons:

• body prefix for specificity
• !important on all properties

Rule 2: CSS Variable Scope

/* May not work globally — wrong scope */
.my-section {
  --my-color: #2ea3f2;
}

/* WILL WORK — :root scope */
:root {
  --my-color: #2ea3f2;
}

Rule 3: Code Module Wrapping

<!-- INVALID — raw CSS in Code Module -->
.my-class { color: red; }

<!-- VALID — wrapped in style tags -->
<style>
.my-class { color: red; }
</style>

Rule 4: Theme Options Format

Theme Options Custom CSS must NOT have <style> tags.

Rule 5: Module Advanced Tab CSS Fields

The Module Element CSS fields (Title, Body, Button, Main Element, Before, After) accept property declarations only — no selectors or braces. Use Free-Form CSS for full rulesets.

/* Module Element field (properties only): */
color: red;
font-size: 1.2rem;

/* Free-Form CSS (full rulesets with selector keyword): */
selector h4 { color: red; line-height: 1.5; }
selector:hover { transform: scale(1.02); }

Rule 6: Numbered Classes Are Fragile

/* FRAGILE — changes when modules are reordered */
.et_pb_text_0 { color: red; }

/* STABLE — use custom classes instead */
.my-intro-text { color: red; }

Responsive Breakpoints

Divi 5 ships with 7 breakpoints, but only 3 are active by default:

| Breakpoint | Default Width | Active by Default | Query Type | |------------|---------------|-------------------|------------| | Phone | 767px | Yes | max-width | | Phone Wide | 860px | No (enable in builder) | max-width | | Tablet | 980px | Yes | max-width | | Tablet Wide | 1024px | No (enable in builder) | max-width | | Desktop | (base) | Yes (cannot be disabled) | N/A | | Widescreen | 1280px | No (enable in builder) | min-width | | Ultra Wide | 2560px | No (enable in builder) | min-width |

All breakpoint widths are customizable. Custom breakpoints configured via Sitewide Responsive Breakpoints modal in the Visual Builder.

Standard Media Queries

/* Phone (default active) */
@media (max-width: 767px) { }

/* Tablet (default active) */
@media (max-width: 980px) { }

/* Widescreen (must enable) */
@media (min-width: 1280px) { }

/* Ultra Wide (must enable) */
@media (min-width: 2560px) { }

Note: The visibility toggle only supports the original 3 breakpoints (desktop, tablet, phone). Use CSS for visibility on custom breakpoints.

Common Issues & Fixes

Issue: Button styles not applying

Symptom: Custom button colors/styles ignored Cause: Low specificity, missing !important Fix:

body .et_pb_button {
  background-color: #000000 !important;
  border-radius: 0 !important;
  /* ALL properties need !important */
}

Issue: Custom CSS overridden by Divi

Symptom: Styles appear struck-through in DevTools Cause: Divi's cached-inline-styles CSS loads after child theme stylesheets Fix: Move CSS to Theme Options Custom CSS panel (loads later in cascade), increase selector specificity, or use !important.

Issue: CSS Variables not working

Symptom: Variables undefined or not applying Cause: Wrong scope or Divi 5.1 unit picker bug (fixed) Fix:

:root {
  --my-color: #2ea3f2;
}
.element {
  color: var(--my-color);
}

Issue: Visual Builder vs Frontend differences

Symptom: Styles look different in builder vs live site Cause: Builder renders in an iframe with different CSS context Fix: Always test on the frontend. Use Safe Mode (Divi > Support Center) to isolate.

Issue: Styles lost after Divi update

Symptom: Custom CSS disappears or breaks after updating Cause: Static CSS cache is stale Fix: Clear at Divi > Theme Options > Builder > Advanced > Static CSS File Generation > Clear. Disable Static CSS during active development.

Issue: Font not loading

Symptom: Fallback font displays instead Cause: Websafe fonts incorrectly generating Google Fonts API requests (fixed in 5.1) Fix: Ensure font is loaded via Google Fonts or @font-face. Use exact name with fallbacks:

font-family: 'Fira Sans', system-ui, sans-serif !important;

Issue: Layout breaking on mobile

Symptom: Elements stack or overflow incorrectly Cause: Divi 5 uses Flexbox by default; custom CSS may conflict Fix: Work with Divi's Flexbox controls in the builder, or override completely:

.et_pb_row {
  display: flex !important;
  flex-direction: row !important;
  gap: 2rem !important;
}

Issue: Hover states not working

Symptom: Hover effects ignored Cause: Divi's inline styles override Fix:

body .et_pb_button:hover {
  background-color: #222222 !important;
}

Issue: Header/menu layout breaks after clearing Static CSS (5