Divi 5 Compatibility

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)

Advanced Units (Freeform/Advanced Input Mode)

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

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

Modern CSS Features (via Custom CSS)

CSS Keywords

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

Validation Rules

Rule 1: Button Specificity (Critical)

cssCopy code
/* 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

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

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

Rule 3: Code Module Wrapping

htmlCopy code
<!-- 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.

cssCopy code
/* 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

cssCopy code
/* 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:

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

Standard Media Queries

cssCopy code
/* 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:

cssCopy code
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:

cssCopy code
: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:

cssCopy code
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:

cssCopy code
.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:

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

Issue: Header/menu layout breaks after clearing Static CSS (5.6, field-verified 2026-06-12)

Symptom: A previously centered header menu (e.g., inline_centered_logo style) packs to the left on every page immediately after clearing the Static CSS cache. No custom CSS touches the menu. Cause: Regeneration re-emits the template's flex layout CSS using current defaults (justify-content: start). Modules configured before Divi exposed explicit Flex options (or left at "default") inherited centering implicitly; the regenerated CSS doesn't reproduce it. Diagnostic signature: .et_pb_menu_inner_container computes justify-content: start and .et_pb_menu__wrap computes flex: 0 1 auto while the stylesheet still contains flex: 1 1 auto for it. Fix: In the Theme Builder, set the menu module's Justify Content and Align Items explicitly — per breakpoint (e.g., Desktop: Center; Tablet/Phone: Space Between so the logo stays left and the hamburger stays right). Any setting change + Save forces a clean regeneration. Do NOT patch with custom CSS first — the builder-native fix survives future regenerations.

Issue: Custom CSS targeting et_pb_section_N_tb_header / _tb_footer silently stops matching (field-verified 2026-06-12)

Symptom: A rule scoped to a numbered Theme Builder template class (e.g., .et_pb_section_1_tb_footer) stops applying after editing/resaving any template — no error, the selector just matches nothing. Cause: Resaving a Theme Builder template can renumber its et_pb_section_N_tb_* classes (e.g., _1_ → _3_). Numbered template classes are exactly as fragile as page-level numbered selectors (.et_pb_text_0), but they look stable because they survive page edits — they only break on template saves, which makes the failure hard to trace. Fix: Scope to the stable Theme Builder layout wrappers instead: .et-l--header, .et-l--body, .et-l--footer (e.g., .et-l--footer a[href^="tel:"]). Treat et_pb_*_N_tb_* in custom CSS as a P0 finding, same as any numbered selector.

Plugin Conflict Reference

Cache Plugins

• WP Rocket + RUCSS: Divi auto-disables Dynamic CSS when RUCSS is active. Use CSS Safelist to preserve Divi selectors.
• LiteSpeed Cache: May show unstyled HTML initially. Whitelist admin-ajax.php in ModSecurity. (Pre-5.8 Divi caused LiteSpeed to purge entire entry sets on every edit — fixed in Divi 5.8.)
• Autoptimize: jQuery deferral can cause fatal errors with Divi.
• General rule: Disable Divi performance options (Static CSS, Dynamic CSS, JS deferral) during development. Enable after finalization.

Security Plugins

• Wordfence: Firewall can block page saves. Use Learning Mode during Divi updates.
• Multiple security plugins: Use only one — they conflict with each other.

WooCommerce

• Cart/checkout pages may lose formatting after updates.
• Fix: Disable Dynamic CSS in Divi Theme Options > Performance. Divi 5 offers native Woo Cart and Checkout modules.

Divi 4 to Divi 5 Migration

What Changes

• Shortcodes ([et_pb_section]) → JSON block format
• HTML structure changes — CSS selectors may break
• CSS ID & Classes field → Attributes panel (Advanced tab)
• Custom JS targeting Divi 4 DOM may fail
• Third-party D4 modules load in backward-compatibility mode (full D4 framework)

Migration Checklist

1. Back up the full site (database + files)
2. Test on staging environment first
3. Inspect new HTML structure in browser DevTools
4. Adapt custom CSS selectors for new class structure
5. Move CSS IDs/classes to new Attributes panel
6. Test all custom JavaScript hooks
7. Clear Static CSS cache after migration
8. Check third-party plugin compatibility tags

Backward Compatibility

• D4 modules auto-detected and loaded with D4 framework
• If a page has even one D4 module, the entire page loads D4 framework (performance hit)
• Legacy modules trigger AJAX reload when editing in Visual Builder

Debugging Techniques

Browser DevTools

1. Computed tab: Shows final applied values — identifies which style "won"
2. Styles tab: Shows cascaded styles with source locations. Struck-through = overridden.
3. In Visual Builder: Right-click is disabled. Hover over the admin bar to right-click and inspect.

Divi Safe Mode

• Location: Divi > Support Center > Safe Mode
• Disables third-party plugins, child themes, and custom code for your session only
• If the problem disappears, it's caused by a plugin/child theme/custom code

Static CSS Troubleshooting

• Clear: Divi > Theme Options > Builder > Advanced > Static CSS > Clear
• Keep disabled during development
• Per-page setting defaults to TRUE even if globally disabled

D5 Dev Tool

• github.com/elegantthemes/d5-dev-tool — debugging modal for the Visual Builder

Composable Settings Compatibility (Divi 5.2+ through 5.11)

Composable 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:

When CSS is still needed:

• Complex selectors (:has(), sibling combinators, attribute selectors)
• Pseudo-elements (::before, ::after) beyond what Free-Form CSS offers
• @media queries for preference queries (prefers-reduced-motion, prefers-color-scheme)
• Custom @keyframes animations
• Cross-element relationships
• Canvas/popup styling
• Custom-styled checkboxes/radios with visual UI distinct from the native input

Known Divi 5.x CSS Bug Fixes (Version History)

If a user reports one of these symptoms, check whether their Divi version predates the fix.

Fixed in 5.2

• Box shadow inherited hover states breaking due to empty string values overwriting presets
• Transform Scale handle drag corrupting calc() function values and CSS variable values
• Broken CSS on pages with loops if a paginated page was visited before the main loop page

Fixed in 5.3 (April 24, 2026 — 69 fixes total)

• Sticky/locked module rendering performance regressions
• Visual Builder loading speed (deferred assets + lazy-loading of editor chunks)
• Form field option inconsistencies across modules

Fixed in 5.5 (May 12, 2026 — 58 fixes total)

• Grid class parity for first_in_row, last_in_row, on_last_row selectors
• Flex/Grid layout row height application
• Border inheritance corrections
• CSS variable application for background images

Fixed in 5.6 (May 25, 2026 — 109 changes total)

• Decimal values in Section Divider Horizontal Repeat field (0.6x now accepted)
• Grid Auto Columns/Rows accept full CSS track values beyond single numeric sizes
• Global number and font variables render correctly on frontend
• Responsive padding calculations corrected for columns with child modules
• Background videos no longer load on devices where the module is removed

Fixed in 5.7 (June 10, 2026 — 72 fixes total)

• Border-radius clipping broken for complex values (e.g., clamp())
• Icon module background color stretching across the full column width in flex layouts
• Unit synchronization in Transform Scale fields
• Image module aspect ratio targeting for portrait videos
• Visual Builder save failures after extended idle periods (stale nonces)

Fixed in 5.8 (June 20, 2026 — 66 fixes total)

• False CSS linter errors for nested selectors without & in Free-Form CSS and CodeMirror CSS fields
• Incorrect heading font sizes on frontend + Visual Builder when Text modules use option group presets
• Migrated background gradients rendering with wrong length units (units now preserved)
• Contact Form 7 Styler button icon and rounded corners on hover
• Slider module control layering — arrows/navigation now stay above high-z-index content
• Cache bugs causing styles to intermittently disappear
• LiteSpeed Cache purging entire entry sets instead of just the edited page

Fixed in 5.9 (July 13, 2026 — 65 fixes total)

• Grid layout consolidation when switching a container from flex to grid
• Button line color/style unavailable in hover and sticky states
• Section visibility issues with animations
• Blurb image alignment with percentage-based widths
• CSS numeric field values lost in settings modals

Fixed in 5.10 (August 11, 2026 — 85 fixes total)

• Custom attributes declaring duplicate class/style names now merge instead of dropping entries
• Theme Builder layout custom CSS not outputting on search results pages
• Column sizing broken when row horizontal gap uses global variables
• Post Slider Dark/Light text color specificity across the breakpoint ladder
• Fluid breakpoint sizing in the Visual Builder corrected (desktop 1025px, tablet-wide 981px, tablet 861px, phone-wide 768px preview widths)

Fixed in 5.11 (August 15, 2026 — 18 fixes total)

• List items in Text module rich-text fields now inherit body text styles
• Circle Counter margin spacing in flex containers without stretch alignment
• Image module "Grow to Fill" shrinking instead of filling columns when lightbox is enabled
• Global Color circular references crashing the Visual Builder
• Desktop breakpoint zoom defaulting incorrectly when the widescreen breakpoint is enabled
• Theme Builder Shop page rendering with WooCommerce 11.0

Pattern

If a user is on a Divi version older than the fix for their issue, the answer is "update Divi." For users who can't update (compatibility constraints, third-party module dependencies), provide a workaround appropriate to their version.

Error Messages Reference

Compatibility Modes

Advisory Mode (Default)

• Reports issues as warnings
• Suggests fixes
• Allows proceeding with warnings

Strict Mode

• Reports issues as errors
• Requires fixes before proceeding
• Blocks incompatible CSS

Configure in .claude/divi5-toolkit.local.md:

yamlCopy code
validation_mode: advisory  # or "strict"

Reference Files

For complete details, see:

• ${CLAUDE_PLUGIN_ROOT}/skills/divi5-compatibility/references/unit-conversions.md — CSS unit support, conversion tables, fluid responsive patterns
• ${CLAUDE_PLUGIN_ROOT}/skills/divi5-performance/SKILL.md — Critical CSS, Dynamic CSS, Inline Stylesheets, cache plugin compatibility
• ${CLAUDE_PLUGIN_ROOT}/skills/divi5-performance/references/core-web-vitals.md — LCP/INP/CLS diagnostics with Divi-specific causes and fixes

Resources

• Elegant Themes Help Center
• Divi 5 Changelog
• D5 Extension Examples
• D5 Dev Tool
• WP Zone Divi CSS Guide
• Quiroz.co Divi Snippets