/divi5-compatibility

name: Divi 5 Compatibility
description: Use this skill when validating CSS for Divi 5 / Divi 5.6 compatibility, checking unsupported features or units, troubleshooting Divi CSS that isn't applying, debugging plugin conflicts (WP Rocket, LiteSpeed, Wordfence, WooCommerce, Perfmatters), migrating from Divi 4 to Divi 5, understanding breakpoints, applying the 5.5 Aspect Ratio + Framing settings to prevent CLS, using the 5.3 pseudo-class editing modes (:checked / :focus / :active) instead of custom CSS, the 5.4 Sizing Variable Generator and Relative Colorscheme Generator, the 5.6 new modules (Timeline, Breadcrumbs, SVG, Table of Contents, Instagram Feed), Nested Option Presets, Critical CSS / Dynamic CSS / Inline Stylesheets, or fixing "styles not working" / "button override not working" / "static CSS cache" issues. Provides compatibility rules, validation patterns, specificity fixes, composable settings alternatives, version-specific bug fix history, and a full error-message reference.
user-invocable: false

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 |