# Divi 5 Mastery Series — Distilled Knowledge

Source: Elegant Themes 16-part "Divi 5 mastery" blog series (parts 1–13 fetched
2026-06-11; parts 14–16 fetched 2026-06-12 — series complete).
Purpose: working reference for PressConduit's AI building behavior and the specimen
library. Rules in our own words; no ET content shipped verbatim.

---

## 1. The design-system stack (Parts 3–4) — THE BIG ONE

Divi 5 has a native three-layer design system. This is the machinery our
"tokens" plan should ride on:

```
Design Variables  (atoms: colors, fonts, numbers, text, images, links)
      ↓ referenced by
Presets           (molecules: Option Group Presets + Element Presets)
      ↓ applied to
Modules / pages   (organisms)
```

### Design Variables (Variable Manager, Builder Bar)
- Types: **Color** (incl. relative/derived colors with opacity), **Font**,
  **Number** (px/rem/em + clamp()/calc()), **Image**, **Text**, **Link**.
- ET's recommended starter system: ~21 colors (5 base + 3 utility + 13 relative
  variants), 13 typography vars (H1–H6 + H1 Big + Eyebrow + body sizes, fluid
  via clamp()), 7 spacing vars (XSmall→Large + fluid + grid gap), 10
  border/corner vars (separate per context: structure/fields/buttons,
  images/containers/buttons radii), 3 button vars, 4 layout width vars
  (Row Max Width + 900/700/510px), logo dark/light image vars, business-info
  text vars (name, address, phone, email, hours, CTA labels).
- Naming: broad brand values ("Primary Color") + functional roles
  ("Border – Fields Dark", "Rounded Corners – Buttons"). Separate variables
  per context so they can diverge later.
- Change a variable once → propagates everywhere it's referenced.
- **Text variables** hold repeating business content (phone, CTA wording) —
  i.e., even copy can be tokenized.

### Presets
- **Option Group Presets (OGPs)**: one option group (typography, spacing,
  border, button). Build these FIRST.
- **Element Presets**: whole-module styling; can nest OGPs.
- **Stacking**: multiple presets can be applied to one element
  (e.g., "Dark Text" + "Dense" + "Small Text").
- Star icon = set as default preset for new modules of that type.
- **Export/Import**: Preset Manager → Import & Export Presets → JSON.
  **Gotcha: referenced Design Variables must already exist on the destination
  site or imported presets break.** (Same landmine class as the
  graphs-and-charts freebie pack.)
- Editing a preset is global — preview against sample content first.

### Implications for PressConduit (decided 2026-06-11)
- **Upgrade the library token plan from global colors (gcid) to Design
  Variables.** Recipes reference variables; PressConduit ships/creates the
  starter variable set on the customer site at setup; the AI fills in brand
  values (colors, fonts, logo, phone, CTA text) → the entire library restyles.
- The scissors lint: a variable reference = travel-SAFE (provided the install
  flow guarantees the variable set exists); raw hex stays a warning.
- Needs new Conduit tooling: read/write Design Variables (likely stored in
  `et_global_data` near global_colors — verify). Add to backlog.

---

## 2. Build patterns by section type (Parts 5, 9) — recipe blueprints

ET's own canonical structures — directly usable as build plans for the
specimens still missing from the freebie packs (pricing, testimonials,
contact, FAQ):

- **Hero**: 1-col flex section, three rows — (heading + button Group
  [direction Row, gap 10px]) / image / 3-col statements row with top-border
  columns, padding-top 30px.
- **Feature grid**: heading row + CSS Grid row — 3 cols desktop → 2 tablet →
  1 phone. Column vertical gap 12px.
- **Split features**: 2-col flex (image | content); content column = stacked
  Groups (Heading + Text [+ Button]), each Group direction Column, rowGap 10px.
- **Testimonials**: heading row + 3-col grid; per card: Icon + Text (quote) +
  Blurb (author photo/name); columns use an outlined preset; style the first
  card, then **Extend Attributes** scoped to the parent row to propagate.
- **Pricing**: 3-col grid; each card = nested Groups — Header Group (icon/
  tier/description), Inner Group (rowGap 10px, Icon List of benefits), Footer
  Group (price Heading + Button). Middle card gets the dark/featured presets.
  Tablet: collapse to 1 col, 30px gap. *(Matches our composed-card decision —
  ET also composes; nobody uses the native pricing-tables module.)*
- **FAQ**: offset 2/5 + 3/5 row — left Heading + Text, right Accordion.
  First item "Open: On".
- **Contact page**: heading row / offset 2-3 row (Contact Form 2/3 | three
  Groups of Heading+Text details 1/3) / Map row (0% saturate, wheel zoom off,
  rounded). Phone/email values as Text with tel: / mailto: links.
- **Footer**: 3-equal-col flex row + 1-col copyright row. Semantic wrapper:
  Advanced → HTML → Element Type → `<footer>`. Copyright year via Dynamic
  Content "Current Date" format `Y`. Logo binds to "Logo Light" image
  variable; address/phone/email bind to text variables.
- **Header (Theme Builder global)**: 1-col row, width 100% / maxWidth None,
  Justify Center; inner Group direction Row, Justify Space Between, wrap, Grow
  to Fill; logo = Image module with Dynamic Content "Site Logo", maxHeight
  50px; Section zIndex 999 + Sticky: Stick to Top. Hide CTA/social on small
  screens via Interactions (Breakpoint Enter → Hide Element).
- **Email signup section**: 2-col (Heading | Email Optin), right column
  justify Center.

Cross-page workflow: build first instance → Duplicate Row → swap content.
Hide TB header/footer while building pages. Name everything (Layers panel).

---

## 3. Flexbox reference (Part 10)

- Lives at **Design → Layout** on section/row/column/group/module.
  Layout Style: Block | Flex | Grid.
- Direction: Row / Row Reverse / Column / Column Reverse.
- **Justify Content** = main axis; **Align Items** = cross axis (so in Column
  direction, Justify = vertical). Stretch fills cross axis — equal-height cards.
- Wrapping: No Wrap / Wrap / Wrap Reverse. **Align Content only matters when
  wrapped onto multiple lines.**
- Gaps: Horizontal & Vertical Gap at container level — px/%/rem/vw or a
  Design Variable. **Use gaps before reaching for per-module margins** (the
  skeleton tool's one-strategy rule, confirmed by ET).
- Child sizing (flex-grow / flex-shrink / flex-basis) lives on the CHILD at
  **Design → Sizing** ("Grow to Fill" = flexGrow).
- Patterns: header = Space Between; equal cards = Align Stretch (+ Space
  Between inside cards for bottom-aligned buttons).
- Per-breakpoint: any layout setting can differ per breakpoint; Structure
  Templates change row arrangement per breakpoint; **Display Order** field
  reorders columns responsively (negative = earlier).

## 4. CSS Grid reference (Part 11)

- Enable via Layout Style → Grid on section/row/column/group.
- Parent (Layout group): Number of Columns/Rows, Grid Auto Rows, column
  widths/row heights, H/V Gap, Grid Direction, Grid Density (backfill),
  Justify/Align Items, Justify/Align Content, Collapse Empty Columns.
- Child (Sizing group): Column/Row Span, Column/Row Start/End, Align/Justify
  Self.
- **Grid Offset Rules**: nth-child patterns on the parent (e.g. `4n+2` spans
  2 columns) — masonry/asymmetric layouts that keep working as children are
  added. Structure Templates ship Multi-Row / Masonry / Sidebar starting points.
- Grid columns ≠ Divi Columns (layout tracks vs structural columns).
- Use Grid for 2-D layouts (feature grids 3→2→1, masonry); Flex for 1-D.

## 5. Responsive system (Parts 2, 12)

- **Seven breakpoints**: Phone, Phone Wide, Tablet, Tablet Wide, Desktop,
  Widescreen, Ultra Wide — default three on; enable the rest via Page Bar
  ellipsis. Settings inherit downward unless overridden.
- Workflow: desktop base → tablet structure → phone spacing/stacking/touch
  targets → extra breakpoints only where needed.
- Tools: canvas edge-drag scaling, exact-width field, Responsive State Picker
  (also Hover/Focus/Active/Sticky states), Responsive Editor (edit all
  breakpoints at once), X-Ray, Wireframe.
- Fluid sizing: clamp() in Number variables → typography/spacing scale without
  breakpoint overrides.
- Form fields: Column Class → Fullwidth on Phone.

## 6. Canvases & Interactions (Parts 2, 13)

- **Canvas** = detached workspace rendered on the page: popups, slide-ins,
  mega menus, notification bars, cookie banners. Global (site-wide) or Local
  (per page). Created via Add Canvas in Builder Bar; set z-index (e.g. notice
  999, popup 1000) + append location.
- **Interactions** (Advanced → Interactions): Triggers = Click / Load /
  Viewport Enter / Exit Intent / Breakpoint Enter. Effects = Show / Hide /
  Toggle / Add Cookie / Remove Cookie. Target by Admin Label.
- Close button = Click → Hide Element → target canvas section; pair with Add
  Cookie + a Display Condition ("Cookie Value Does Not Equal hide-popup=true")
  for don't-show-again.
- Fixed positioning via Advanced → Position → Fixed → Offset Origin; size with
  CSS functions (min(250px, 40%)).
- Library angle: popup / announcement-bar / cookie-banner recipes = strong
  v1.2 candidates (high perceived value, fiddly to hand-build).

## 7. Interface facts worth knowing (Part 2)

- Builder Bar: Layers, Inspector (bulk-edit colors/fonts/spacing across
  elements), Variable Manager, Preset Manager, Page Manager, Command Center
  (keyboard insert).
- **Extend Attributes**: copy styles/content/presets to similar elements,
  scoped to Group/column/row/section/page — ET's own "propagate the first
  card" mechanic.
- Copy/Paste Attributes via right-click (all / styles only / content only /
  presets).
- Advanced tab: custom HTML attributes + aria-labels, semantic element swap
  (div → article/nav/footer), before/after HTML wrappers.
- Advanced Units: clamp()/calc()/min()/max() accepted in spacing/sizing fields.
- Export/Import layout JSON includes Global Canvases.
- Theme Builder (Part 8): templates per area (All Posts, Category, Author,
  Search, 404); Default Website Template holds global header/footer; dynamic
  content (title, featured image, author, date) with Before/After text.

## 8. Site prep checklist (Part 1) — feeds the AI onboarding flow

Brand: primary + secondary + neutrals (near-black text, near-white bg, 1–2
grays); 2 fonts max; logo SVG/transparent PNG tested on light+dark.
Content: headline + subheading, 3–4 value props, 2–3 about paragraphs,
service descriptions w/ pricing, consistent CTA wording, contact details.
Performance: enable Dynamic CSS, Dynamic Module Framework, Critical CSS.
*(This list ≈ the intake questions PressConduit's AI should ask a new
customer before generating a site — it maps 1:1 onto the Design Variable
starter set.)*

---

## 9. Loop Builder (Part 14) — dynamic listings without the Blog module

The replacement for "style what the Blog module gives you": design ONE item
with ordinary Divi elements, attach a query, Divi repeats it per result.

- **Enable**: Row settings → Content → **Loop** option group → toggle
  "Loop Element". (Lives on the row, not a dedicated module.)
- **Query options**: post type (posts, products, terms, users, menus, CPTs,
  custom-field data), posts-per-page, order asc/desc. Query Type
  **"Posts for Current Page"** = the archive-context mode — inside a Theme
  Builder template it auto-resolves to the viewed category/tag/author/search.
- **Binding**: hover any field → "Insert Dynamic Content" → Loop fields:
  Loop Featured Image, Loop Post Title, Loop Post Terms, Loop Author
  (Before-text "by"), Loop Publish Date (custom format, e.g. `M, Y`),
  Loop Excerpt, **Loop Link → bind to a Button's Link URL**.
- **Pagination**: separate 1-col row below, Pagination module, Content →
  **Target Loop** picks which loop row it pages.
- **Responsive**: Structure Templates per breakpoint (2-col card → stacked on
  tablet); Responsive Editor for per-breakpoint values.
- ET's card recipe: 2-col row 0px gap + rounded-border preset; image col 2/5;
  content col 3/5 w/ spacing + bg from variables, stacked Text(terms) /
  Heading(title) / Group(author+date) / Text(excerpt) / Button.
- Build the item from Design Variables + presets BEFORE looping it; titles as
  H2/H3; alt text comes from the media library.
- **Library angle**: a `post-grid` / `card-loop` specimen is v1.1 material —
  loop rows are pure block attrs, so the scissors should capture them fine.
  Blog/archive/shop pages stop being "use divi/blog and accept the look".

## 10. Power-user workflow (Part 15) — how ET says to run a build

- **Wireframe first to discover presets**: only elements that repeat get a
  preset (heading roles: hero title / section title / card title / post title /
  eyebrow; plus text, buttons, links, rows, columns, groups). Create presets
  when the design calls for them, not preemptively — small preset libraries
  beat sprawling ones.
- **Style by reference, never by value** — the chain restated: Design
  Variables → Option Group Presets → Element Presets → modules. Two generator
  tools assist: **Color Palette Generator** (relative color system from
  primary/secondary) and **Sizing Variable Generator** (fluid clamp() sizes/
  spacing/gaps/widths/radii). *(These generators ≈ what PressConduit's
  onboarding should drive programmatically.)*
- **Extend Attributes**: extend design attributes only, leave content — the
  "make all cards match" mechanic (scoped to row/section/page).
- **Navigation**: Page Manager (switch pages without leaving VB), **Command
  Center = Cmd/Ctrl+K** (search/action bar), Layers view for deep nests.
- **Reading your own work**: **Modified Filter** collapses a settings panel to
  changed values; blue **modified-indicator dots** mark direct edits —
  GOTCHA: they show direct edits, NOT styles inherited from presets. Use the
  **Inspector** for cross-element pattern checks (off-brand colors, stray
  values, mismatched presets).
- **Portability**: export Design Variables + Presets as the reusable design
  system; import into a new project, update variable values, everything
  referencing them adapts. *(= exactly the PressConduit library mechanism,
  done manually.)*

## 11. Audit → polish → launch (Part 16) — feeds a `divi_preflight` tool

Pre-launch audit (fresh eyes, incognito + logged out, real devices):
1. Every page type: home, inner, blog, archive/single/search/404 templates —
   typography + color consistency should be enforced via variables/presets;
   fix globally at the variable/preset level, module-level only for one-offs.
2. Header/footer: sticky behavior on every page, nav overlap, footer stacking.
3. Interactive: canvases (popups/slide-ins/notices), hovers, loop layouts,
   every link, every form, opt-ins, pagination.
4. Content: proofread, kill placeholders, broken links; business info should
   live in Text/Link Variables so it's consistent by construction.
5. Responsive: all active breakpoints via Responsive Editor; overlaps, hidden
   content, readability, awkward stacking.
6. Layers panel for structure scan; Inspector for style scan.

Performance (Divi → Theme Options → General → Performance): Dynamic Module
Framework, Dynamic Icons, **Critical CSS** (Threshold Height: Medium start),
Defer jQuery + jQuery Migrate, Defer Gutenberg Block CSS — then RE-TEST forms/
menus/sliders/popups/integrations. Images: resize to largest displayed size
(hero ≤1920px), WebP for photos, Aspect Ratio + Image Framing for grid/loop
consistency.

Accessibility/SEO: WAVE / axe / Lighthouse pass — contrast, alt text, keyboard
nav, labeled fields, accessible names. Semantic element swap (nav/section/
article/aside) by purpose. One H1, H2 majors, H3 supporting. Unique meta
titles/descriptions (Yoast/Rank Math/AIOSEO), sitemap at /sitemap_index.xml,
robots.txt not blocking.

Launch sequence (8 steps): un-discourage indexing (Settings → Reading) →
publish all pages + TB templates (check assignments) → flush permalinks
(Settings → Permalinks → Save) → clear ALL caches (Divi static CSS, plugin,
server, CDN, browser) → final logged-out incognito test → submit sitemap in
Search Console → announce → monitor 24–48h (analytics, forms, logs, uptime,
Search Console).

**Conduit angle**: most of this checklist is mechanizable — we already have
divi_clear_static_css, wp_flush_rewrite, wp_page_rendered_html, options
read/write (blog_public, permalinks). A `site_preflight` tool that runs the
checkable items and reports the human-judgment ones is a natural Conduit
feature.

---

## 9. Blog-sweep additions (fetched 2026-06-12, beyond the 16-part series)

### Color Palette Generator (post: "Turn One Brand Color Into An Entire Palette") — PRODUCT GOLD
- Divi 5 has a BUILT-IN palette generator: Variable Manager → Colors group →
  "Generate Color Palette Variables". One primary hex → full variable palette.
- Palette types: Analogous / Complementary (recommended starters) / Split
  Complementary / Triadic / Tetradic. Configurable counts + intensity sliders
  for shades, tints, tones, alpha variants. Naming prefixes: shade-/tint-/tone-,
  alpha- suffix.
- Roles: tints = backgrounds/cards; shades = text/borders/buttons/hover;
  tones = muted UI; alpha = overlays; secondary = accent.
- **Relative colors**: generated variables stay mathematically linked (HSL) to
  the primary — change the primary, the whole palette follows.
- Rebrand/reuse workflow: regenerate with the same type/counts and matching
  variable names → presets/modules update automatically.
- Skip the generator when a brand has multiple locked colors (use Color
  Scales / Color Harmony generators instead).
- **PressConduit implication: the onboarding "fill the paint cans" step is
  native.** Ask the customer for ONE brand color; either drive the generator
  or replicate its relative-color math via our variables/colors tools. Keep
  our 4 hand-named tokens (pcd-*) as the recipe-facing layer; map generated
  palette → those roles.

### Flexbox header build (post: "How To Build A Flexbox Header")
- Two reference structures: (1) three-row stacked header — section rowGap 0 /
  padding 0; outer row direction Column; nested row 1 = logo+nav Group (Row,
  Start, Center, 2% gap) + social; nested row 2 = contact blurbs ×3 + CTA,
  Justify Space Between. (2) single-row: 2-col offset; col 1 logo+nav, col 2
  icons/CTA (Row, Center, 8px gap).
- Menu two ways: simple = Menu module; flexible = **Link module with Loop
  Element enabled** (Query Type: Menu; dynamic tags "Loop Menu Text"/"Loop
  Menu Link") — full per-item design control.
- Logo = Image module + **Site Logo dynamic tag** (binds to Theme Options).
- **Mobile menu = detached global Canvas** ("Mobile Menu", zIndex 999, fixed
  top-left, height 100vh, column direction) + Interactions: hamburger Click →
  Show canvas; close icon Click → Hide. Hide desktop nav/social/CTA strip at
  mobile breakpoints via visibility.
- Accessibility: label hamburger/close icons; nav wrapper semantic element
  `nav`.

### Forms (3 posts: centralized styling / field options / focus states)
- Form fields styled via option groups on the module Design tab: **Input /
  Checkbox / Radio / Button**, each with Label + Placeholder subgroups.
- **States**: default, hover, **focus**, **checked** — via the state selector
  on the option group. Focus recipe: tint background + ≥2px high-contrast
  border; never color-shift alone (WCAG visible focus indicators).
- Centralize: style once → Option Group Presets (inputs/checkboxes/radios) →
  nest in Element Presets (whole Contact Form) → set defaults (star icon) so
  new forms inherit. Same option groups cover Contact Form, Email Optin, and
  the **dedicated Contact Form 7 module** (CF7 styled natively in VB).
- Gotchas: repeated one-off overrides should become presets; placeholder color
  must stay readable on changed backgrounds; composable settings must be
  manually enabled for advanced sub-element controls; ARIA sparingly
  (aria-required only when no native required; aria-invalid post-validation).
- **Contact-recipe implication**: the contact specimen should ship with
  focus/checked states styled and the form option groups fully explicit —
  that's the part site-mined examples never have.

### Sweep backlog (indexed, not yet distilled)
- "Everything About Divi 5's Sizing System" (Jun 1) — for the starter
  number-variable set.
- "Nested Option Presets" (May 20) + "Combining Composable Settings + Nested
  Option Presets" (Jun 11) + "Enable Composable Settings by Default" (May 10).
- "Horizontal Blog Loop" (May 16) — Loop Builder; v1.1 post-grid specimen.
- Release notes 5.5 / 5.6 / 5.7; "Five New Modules" (timeline, breadcrumbs,
  TOC, SVG, Instagram); "Gradient Editor + Gradient Variables"; "Aspect Ratio
  + Image Framing + Image Presets"; "Workspaces" (builder UI only).
- **Gap check (3 pages of blog)**: NO freebie packs exist for pricing,
  testimonials, contact, headers, or footers — those recipes stay
  build-from-scratch per the Part 5/9 blueprints.

### Full-screen overlay menu (post: "Build a Full-Screen Menu with Interactions") — HAS DOWNLOAD
- Detached global Canvas "Full-Screen Menu": Section 100vh, Position Fixed,
  Offset Origin Center, zIndex 999999; two single-column rows (close-icon row +
  menu row). Section Justify Content Space Around; column Align Items Center.
- Menu = Link module in a Group with Loop Builder (Query Type Menu; dynamic
  "Loop Menu Text" + loop item URL) — same loop-menu pattern as the flexbox
  header tutorial.
- Interactions: hamburger Click → Show Element → target the menu Section;
  close icon Click → Hide Element → target "Root Container". Menu hidden by
  default via Advanced → Visibility on all breakpoints.
- Companion to the mobile-menu Canvas already noted (§ blog-sweep). v1.1
  header/menu recipe material; JSON download is a vetting candidate but
  Canvas+Interactions overlays may trip the lint (code-module / interaction
  reliance) — run divi_capture before trusting it.

---

## 10. Full blog sweep — "everything we could build" catalog (pages 1–7, Mar–Jun 2026)

### A. FREEBIE PACKS (downloadable → vet with divi_capture → adapt)
HAVE (downloaded + vetted): photo-bg-heroes (6, clean), gutterless (11, clean),
icon-list (5, clean), bordered-layout (5, clean), grid-styles (4, clean),
svg-sections (5, all code-module escape hatches), graphs-and-charts (17, 16 broken/missing-presets).
NOT YET DOWNLOADED (new finds):
- **7 Inline Element Designs** (Apr 22) — inline badges/pills/buttons. Useful small parts.
- **4 Color Adjustment Designs/Sections** (Apr 6) — duotone/overlay treatments.
- **4 Nested Sliders** (Mar 24) — the first SLIDER freebie; candidate for a slider recipe (v1.1).

### B. TUTORIAL-BUILD recipes (no/with download → build once → capture). Grouped:
HEADER / NAV family (build the header/menu recipe set from these):
- Part 6 Custom Header & Navigation; Flexbox Header; Full-Screen Menu (has dl);
  Custom Sidebar Navigation; Mega Menus (Dropdown module); Custom Menus (Link+Dropdown);
  Dynamic Navigation / Menu Loops.
FOOTER: Part 7 Custom Footer.
WOOCOMMERCE (store bundle — needs Woo on the test site):
- Cart page; Checkout page; **Woo Category page** (new). All build-once, no downloads.
INTERACTIVE / EFFECTS (v1.2 "wow" candidates, mostly Canvas/Interactions):
- Popups (3 ways) + Part 13 off-canvas; Image Hover Reveal; Tilt Image Effect;
  Text Mask; Image Hotspots; Group Carousel image cards; Card Carousel;
  Interactive Product Cards (Loop Builder); Looping Semantic Lists.
PAGE-SECTION blueprints (already feeding v1 recipes): Part 5 homepage, Part 9 inner pages.

### C. Mapping to the cookbook
v1 (8) status: hero✅ feature-grid✅ final-cta✅ stats-band✅ testimonials✅ pricing✅
faq⏳ contact⏳ (the two parent/child ones left).
Natural v1.1 set (every new site needs these): **header, footer** (blueprints ready),
split-feature, email-signup/optin.
v1.2 (high perceived value, fiddly): popup/announcement-bar, slider (nested-sliders dl),
group-carousel, woo cart+checkout+category bundle.
NOTE: most INTERACTIVE tutorials lean on Canvas + Interactions (and sometimes code modules)
— expect lint friction; vet each with divi_capture before trusting as a portable specimen.

---

## 11. Tabs + Nested Elements (post fetched 2026-06-16) — D5 differentiator

Post: "Tabs + Nested Elements for Divi 5 (Free Download)". HAS DOWNLOAD (.zip, 5 files = 4 styled tab designs + 1 all-in-one import). Native modules, no code modules → vetting candidate (snip with scissors when downloaded).

**The key capability:** Divi 5 tabs can hold FULL nested modules inside each tab panel — images, cards, buttons, headings, text, multi-column content — not just a blob of HTML. This is a real D4→D5 difference: D4 `et_pb_tab` content is inline HTML only; D5 `divi/tab` accepts nested child modules (rows/columns/modules inside the panel).

**Why it matters for the cookbook:**
- Directly fixes the "tabs look plain/thin" weakness seen in the rubadub kitchen-sink review. A D5 tabs recipe can be rich (e.g. each tab = image + heading + bullet list + button in a 2-col layout) instead of a thin text strip.
- Tab styling is all native settings: label + active-label styling, typography, spacing, border, background, border-radius, box-shadow, responsive — fits the module-settings-before-CSS rule.
- Candidate for a v1.1/v1.2 D5 "tabs" / "tabbed-feature" specimen. Download + vet the 4 designs, adapt the strongest into a tokenized specimen.

**D4 note:** the D4 tabs section in the kitchen-sink page can only hold HTML text per tab (no nested modules) — so D4 tabs stay simpler than D5 by design.

---

## 12. July 2026 blog sweep (fetched 2026-07-09) — new native modules + layout systems

Fresh ET posts since the last sweep. All Divi 5. Flagged by what PressConduit needs
to do about each: **[catalog]** already in `assets/divi5-catalog.json`; **[specimen]**
needs a captured recipe; **[migration]** needs a D4→D5 mapping; **[authoring]** the AI
should know it exists when building.

### Tooltip module — `divi/tooltip` (post 2026-07-08) — [catalog ✓] [specimen] [authoring]
- Already in the shipped catalog (verified: `divi/tooltip`, `d4Shortcode: null` → D5-only, no D4 equivalent, so **no migration mapping needed**).
- **Nestable content container**: accepts rich text AND nested child modules, and supports Loop Builder — treat like Tab/Group when authoring, not a plain text field.
- Trigger: `hover` | `click` | `always`. Movement: `anchored` (default) vs `follow cursor`.
- Placement via position grid (above/below/left/right + alignment); fine-tune with **Skid** (shift along the edge) and **Distance** (gap). Optional arrow with color/placement/position/size. **Open Delay** / **Close Delay** to stop twitch.
- Defaults from catalog: `trigger:hover`, `positionMode:anchored`, `placement:"outside top center"`, `distance:8px`, `showArrow:off`, black bg, 3px radius, zIndex 99999.
- Action: candidate v1.2 specimen ("hint tooltip on a pricing feature / icon"). Author from catalog defaults; no site-mined example exists.

### Breadcrumbs module — `divi/breadcrumbs` (post 2026-07-05) — [catalog? verify] [authoring]
- Outputs a clickable hierarchy trail from post/page parent-child + categories + archives. **NOT WooCommerce** (that's the separate Woo Breadcrumbs module).
- Content tab: **Home Text** (default "Home", editable → "Blog"/"Resources") + **Home URL**. Separator options `/` `>` `|` `→`, styled independently.
- Design groups: Breadcrumb Link / Home Link / Separator / wrapper — each styleable; composable settings supported.
- SEO caveat worth surfacing to users: the module is **visible navigation only** — it does NOT emit BreadcrumbList schema. Yoast/Rank Math still own structured data. (Good honest-messaging note for a docs/FAQ answer.)
- Part of ET's "Five New Modules" batch (timeline, breadcrumbs, TOC, SVG, Instagram) already logged in §9 backlog — now distilled for breadcrumbs. Action: confirm `divi/breadcrumbs` + timeline/TOC/SVG/Instagram are in the catalog JSON; add any missing so the AI can author them.

### Contact Form 7 module (post 2026-06-28) — [authoring] [specimen]
- Dedicated **CF7 module** styles a Contact Form 7 form natively in the VB via the same Input/Checkbox/Radio/Button option groups as the native forms (default/hover/**focus**/**checked** states). See §"Forms" notes — the contact specimen should ship focus+checked states explicit, which site-mined CF7 embeds never have.

### CSS Grid Editor (post 2026-07-09) — [authoring] [migration-implication]
- Applies to **containers** ("Build Custom Grid" when adding a container, or apply grid styling to any element). Drag to set column/row sizes, H/V gap, span items across rows/cols via corner anchors, reposition by drag, edit visual offset rules. Ships premade structure templates.
- **Key architecture:** grid layout lives entirely on the container via pseudoclasses targeting child items — **child modules are grid-agnostic** and untouched. So it composes cleanly with the Loop Builder (add/delete/duplicate/loop children and they reflow).
- Migration implication: this is the native path for D4 layouts that faked grids with specialty sections / equal-height column hacks — a faithful D4→D5 migration of a "card grid" should prefer a native grid container over stacked rows where it preserves the look. Note for the migration guide, not an auto-rewrite (faithful-not-redesign rule still holds).

### Refinements already partly covered (log only, no new specimen)
- **Flexbox series Parts 1–3** (2026-07-01/02/04): core Flexbox controls in the VB, equal-height cards with aligned buttons (Part 2 = the card-row recipe), wrap vs no-wrap structure templates. Reinforces the existing "flex the row, not CSS" guidance.
- **Aspect Ratio** (2026-07-06): consistent proportions for images/containers — already in §"Aspect Ratio + Image Framing" backlog; relevant to grid/loop card specimens.
- **Variable Generator scale types** (2026-06-29) + **fluid responsive sizing system** (2026-07-03): Fluid vs Fixed-Responsive vs Fixed-Single font scales via `clamp()`. Feeds the number-variable starter set (§1). No new module.
- **Global Typography System** free download (2026-06-30): candidate token-set import to vet with `divi_capture`.

### Net actions for PressConduit
1. Catalog coverage — **verified complete 2026-07-09**, nothing to add. `assets/divi5-catalog.json` already ships `divi/tooltip`, `divi/breadcrumbs`, `divi/timeline` (+`divi/timeline-item`), `divi/table-of-contents`, `divi/svg`, `divi/instagram-feed`, and `divi/contact-form-7`. So the AI can already author all of these from the catalog; the gap is only at the specimen/authoring-knowledge layer, not the schema layer.
2. Add a one-line migration-guide note: prefer native CSS-grid containers for D4 card-grid layouts (faithful reproduction only).
3. Backlog specimens: Tooltip hint, Breadcrumbs trail, CF7 contact (focus/checked states explicit).
