Help us improve
Share bugs, ideas, or general feedback.
From divi5-toolkit
Validates CSS for Divi 5/5.2 compatibility, checks unsupported units/features, troubleshoots CSS application issues and plugin conflicts (WP Rocket, LiteSpeed, Wordfence, WooCommerce), aids Divi 4 migration, and covers breakpoints/specificity fixes.
npx claudepluginhub cjsimon2/divi5-toolkit --plugin divi5-toolkitHow this skill is triggered — by the user, by Claude, or both
Slash command
/divi5-toolkit:divi5-compatibilityThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
**Divi 5 Version:** 5.2.0 (April 2026 — Divi 5.0 released February 26, 2026)
Provides CSS patterns and guidance for Divi 5: styling modules like buttons/sections/rows, Free-Form CSS with `selector` keyword, overriding `.et_pb_*` classes, design tokens, dark mode, animations, WooCommerce, accessibility.
Build and edit pages, sections, and templates on Divi 5 WordPress sites using MCP tools. Covers modules, design systems with presets, mega menus, theme builder templates, animations, and WebGL shader effects.
CSS conventions, layout systems, and modern patterns: predictable styles through low specificity and explicit cascade control. Invoke whenever task involves any interaction with CSS code — writing, reviewing, refactoring, debugging, or understanding stylesheets, SCSS, layout, or responsive design.
Share bugs, ideas, or general feedback.
Divi 5 Version: 5.2.0 (April 2026 — Divi 5.0 released February 26, 2026)
Architecture: React 18, no Shadow DOM, standard DOM with et_pb_* classes
Key 5.2 Addition: Composable Settings — toggle any design option on any sub-element
| 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 |
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.
| 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 |
| 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 |
auto, none, unset, inherit, fit-content — all supported in advanced unit fields.
/* 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/* May not work globally — wrong scope */
.my-section {
--my-color: #2ea3f2;
}
/* WILL WORK — :root scope */
:root {
--my-color: #2ea3f2;
}
<!-- INVALID — raw CSS in Code Module -->
.my-class { color: red; }
<!-- VALID — wrapped in style tags -->
<style>
.my-class { color: red; }
</style>
Theme Options Custom CSS must NOT have <style> tags.
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); }
/* FRAGILE — changes when modules are reordered */
.et_pb_text_0 { color: red; }
/* STABLE — use custom classes instead */
.my-intro-text { color: red; }
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.
/* 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.
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 */
}
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.
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);
}
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.
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.
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;
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;
}
Symptom: Hover effects ignored Cause: Divi's inline styles override Fix:
body .et_pb_button:hover {
background-color: #222222 !important;
}
admin-ajax.php in ModSecurity.[et_pb_section]) → JSON block formatComposable Settings let you enable any design option for any module sub-element directly in the builder. Before reaching for custom CSS, check if the styling can be achieved natively:
| CSS Pattern | Composable Alternative |
|---|---|
| Width/height on buttons | Enable Sizing options on button sub-element |
| Border on titles | Enable Border options on title sub-element |
| Animation on images | Enable Animation options on image sub-element |
| Transform on any sub-element | Enable Transform options via Compose Settings |
| Spacing on any sub-element | Enable Spacing options via Compose Settings |
When CSS is still needed:
:has(), sibling combinators, attribute selectors)::before, ::after) beyond what Free-Form CSS offers@media queries for preference queries (prefers-reduced-motion, prefers-color-scheme)@keyframes animationsThese issues were fixed in 5.2 — if you see them, the user may be on an older version:
calc() function values and CSS variable values| Error | Cause | Fix |
|---|---|---|
| "Property ignored" | Low specificity | Add !important or increase specificity |
| "Unknown property" | Typo or unsupported | Check property name |
| "Expected RBRACE" | Missing } or selectors in Module Element field | Use Free-Form CSS for full rulesets |
| "Unexpected token" | Syntax error | Check semicolons, braces, quotes |
| Styles not applying | Wrong CSS location or cache | Check format (Code Module needs <style>, Theme Options does not). Clear cache. |
| Transform values corrupted | Dragging Scale handles corrupts calc()/var() values | Re-enter values manually (fixed in 5.2) |
| Box shadow hover broken | Empty string values overwrite presets | Update to 5.2, or set explicit hover shadow |
| Loop page CSS missing | Pagination cache conflict | Clear Static CSS; fixed in 5.2 |
Configure in .claude/divi5-toolkit.local.md:
validation_mode: advisory # or "strict"
For complete details, see:
${CLAUDE_PLUGIN_ROOT}/skills/divi5-compatibility/references/unit-conversions.md — CSS unit support, conversion tables, fluid responsive patterns