/divi5-css-patterns

name: Divi 5 CSS Patterns
description: Use this skill when writing CSS for Divi 5 / Divi 5.11, styling Divi modules (buttons, sections, rows, blurbs, toggles, forms including the 5.3 Contact Form 7 Styler and 5.11 Gravity Forms module), the newer modules (Timeline, Breadcrumbs, SVG, Table of Contents, Instagram Feed, Tooltip, Post Filter, Charts, Payment Button, Imagely Gallery), working with Free-Form CSS and the `selector` keyword, overriding `.et_pb_*` classes, setting up design tokens or dark mode, using the 5.4 Sizing Variable Generator or Relative Colorscheme Generator, the 5.7 Gradient Variables and text effects (text-stroke, gradient/image text fills), the 5.9 Variable Fonts and CSS Grid Editor, applying the 5.5 Aspect Ratio / Framing settings, adding animations with reduced-motion, styling WooCommerce with Divi, the 5.3 pseudo-class editing modes (:checked, :focus, :active), Nested Option Presets, building accessible layouts, or developing a Divi child theme. Provides CSS patterns, class naming conventions, selector specificity guidance, Composable Settings alternatives, Canvas and Loop Builder patterns (including 5.10 front-end Loop Filters), and full example files for buttons, design tokens, animations, dark mode, WooCommerce, accessibility, forms, Loop Builder, and the 5.6–5.11 new modules.
user-invocable: false

Divi 5 CSS Development Patterns

Overview

**Divi 5** (released February 26, 2026, current version 5.11.0 as of August 15, 2026 — weekly release cadence) is a complete architecture overhaul:

• **React 18-based Visual Builder** — no Shadow DOM, standard DOM with `et_pb_*` classes
• **Flexbox-first layout** — sections, rows, columns use Flexbox by default
• **Native CSS Grid support** — convertible from Flexbox in builder; 5.6 added full CSS track values (`grid-auto-columns`, `grid-auto-rows`); 5.9 added a visual **CSS Grid Editor**
• **Design Variable Manager** — 7 variable types (Colors, Fonts, Numbers, Images, Text, Links, and Gradients from 5.7)
• **Preset System** — Option Group, Element, Stacked, and Nested presets. 5.3 added **Nested Option Presets** (presets within presets, e.g., CTA > Button > Border)
• **Block-based storage** — JSON format, no shortcodes
• **7 responsive breakpoints** — 3 active by default, 4 optional
• **Dynamic CSS** — 94% smaller stylesheets, per-page CSS generation. Per-module components combine into a unique per-page stylesheet.
• **Critical CSS + Inline Stylesheets** — auto-extracted above-the-fold CSS inlined; non-critical deferred. Together they eliminate render-blocking CSS.
• **Composable Settings (5.2)** — toggle any design option on any sub-element, reducing CSS needs
• **Canvas System** — local/global canvases for off-canvas menus, popups, staging areas
• **Canvas Portal Module** — inject canvas content at specific layout locations
• **Interaction Builder** — cross-canvas interactions with Click, Mouse, Viewport, Load triggers
• **Loop Builder** — native repeating content loops with CSS Grid for dynamic layouts
• **Page Manager** — create/edit/duplicate/delete pages without leaving the builder
• **Divi AI Agent** — AI tool sets integrated into the builder (5.2; 5.5 added canvas AI tools for natural-language workflows)

Divi 5.3 – 5.11 Additions (Use Builder First)

The skill auto-activates for any Divi CSS task, but many things that previously required custom CSS now have native equivalents. Reach for these first:

5.3 (April 24, 2026) — Form overhaul

• **Pseudo-class editing modes**: design tabs now expose `:checked`, `:focus`, `:active` directly. Style field focus rings, checked checkboxes, and active states in the builder — no custom CSS for these.
• **Harmonized field options** across all form-based modules (Contact Form, Email Optin, Login, Signup).
• **New checkbox and radio field groups** with preset support — style once, apply across forms.
• **Contact Form 7 Styler module** — renders + styles CF7 inside Divi with full design controls. Use this instead of writing CF7 CSS manually.
• **Nested Option Presets** — presets within presets. Common sub-options (e.g., `Call To Action > Button > Border`) now support presets.

5.4 — Variable Generators

• **Sizing Variable Generator** — automates fluid responsive sizing via `clamp()`. Use this instead of hand-writing clamp() for every type scale.
• **Relative Colorscheme Generator** — HSL-based color systems. Generates derivative shades from a single base color.

5.5 (May 12, 2026) — Image overhaul

• **Aspect Ratio settings** on every image element — eliminates CLS by reserving space before the image loads. **Always set this on image modules.**
• **Framing settings** — reposition cropped images within their aspect ratio (object-fit + object-position via builder).
• **Image Presets** — preset support across all modules with images.
• **SVG sanitization** for inline SVG (paves way for 5.6 SVG module).
• **Composable settings for image option groups** — set image-specific options on any module containing an image.

5.6 (May 25, 2026) — Five new modules

• **Timeline** — vertical/horizontal event chronologies. Pairs with Loop Builder.
• **Breadcrumbs** — navigation hierarchy. Great for Theme Builder templates. (Note: Home Link uses dedicated Home Link settings, NOT the general breadcrumb link styling.)
• **SVG** — inline SVG with native stroke and width settings.
• **Table of Contents** — auto-generates from page headings.
• **Instagram Feed** — image gallery sourced from Instagram.
• **Color Scale Generator** — systematic color derivative creation.
• **Color Harmony Generator** — tetradic, triadic, analogous color relationships.
• **Fixed**: decimal values in Section Divider Horizontal Repeat (0.6x); grid track values beyond single numerics; global number/font variables on frontend; responsive padding on columns with child modules.

5.7 (June 10, 2026) — Gradient overhaul + text effects

• **New gradient picker panel** consolidating all gradient options