/divi5-compatibility

name: Divi 5 Compatibility
description: Use this skill when validating CSS for Divi 5 / Divi 5.13 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 5.12 backdrop-blur / invert / sepia Filters and AI Agents, the 5.13 LayoutStyle unit coverage, preset-class and migrated Free-Form CSS fixes, 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, recovering missing or deleted Divi 5 page content (WordPress Revisions vs the builder History panel), 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.13.1 (September 18, 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
• 5.12 — AI Agents (natural-language builder automation), backdrop blur / invert / sepia Filters, module presets now emit CSS classes + attributes on the frontend wrapper, WordPress 7.1 block-editor compatibility
• 5.13 — Maintenance release: expanded LayoutStyle unit coverage (display, gaps, flex), migrated Divi 4 Free-Form CSS now applies on the frontend, Contact Form **Show Labels** option, Slider swipe-controls bar, four security fixes. 5.13.1 refreshed Divi AI models
• **Announced next:** Components + Slots (a rework of Global Elements with per-instance detachable settings and free-form slots), more modules, AI improvements

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 propert