/divi5-css-patterns

name: Divi 5 CSS Patterns
description: Use this skill when writing CSS for Divi 5 / Divi 5.6, styling Divi modules (buttons, sections, rows, blurbs, toggles, forms including the 5.3 Contact Form 7 Styler), the five 5.6 modules (Timeline, Breadcrumbs, SVG, Table of Contents, Instagram Feed), 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, 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, and full example files for buttons, design tokens, animations, dark mode, WooCommerce, accessibility, forms, Loop Builder, and the 5.6 new modules.
user-invocable: false

Divi 5 CSS Development Patterns

Overview

**Divi 5** (released February 26, 2026, current version 5.6.0 as of May 25, 2026) 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`)
• **Design Variable Manager** — 6 variable types (Colors, Fonts, Numbers, Images, Text, Links)
• **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.6 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.

CSS Integration Methods

Method 1: Theme Options (Global Styles)

**Location:** Divi > Theme Options > Custom CSS **Format:** Raw CSS without `<style>` tags **Priority:** Loads after child theme — higher cascade priority

:root {
  --custom-color: #2ea3f2;
}

Method 2: Page-Level Custom CSS

**Location:** Page Settings > Advanced Tab > Custom CSS **Scope:** Single page only

Method 3: Module Custom CSS (Advanced Tab)

**Location:** Any element > Advanced Tab