/divi5-compatibility

name: Divi 5 Compatibility
description: Use this skill when validating CSS for Divi 5 / Divi 5.11 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.7 Gradient Variables and text effects, the 5.9 Variable Fonts and CSS Grid Editor, the newer modules (Timeline, Breadcrumbs, SVG, Table of Contents, Instagram Feed, Tooltip, Post Filter, Charts, Gravity Forms, Payment Button, Imagely Gallery), 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.11.0 (August 15, 2026 — Divi 5.0 released February 26, 2026; weekly release cadence) **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
• 5.7 — Gradient picker overhaul, Gradient Variables (7th Design Variable type), gradient/image text fills, text-stroke
• 5.8 — Customizable Workspaces, Tooltip module
• 5.9 — Variable Fonts + new typography controls (drop caps, text columns, hyphenation), visual CSS Grid Editor
• 5.10 — Post Filter + Post Filter Item modules (front-end Loop Builder filtering), corrected fluid breakpoint sizing, row-granular lazy loading
• 5.11 — Charts, Gravity Forms, Imagely Gallery, Payment Button modules; flexbox `alignItems` CSS classes on Column/Section/Row/Group

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: