Visual COMMUNITY

DIVI WordPress Editing

Edit, optimize, and migrate DIVI sites: layouts, modules, templates, child themes, performance, and DIVI 5 migration.

Level ●● Intermediate
Saves Saves hours to days depending on the project
Version v2.0
Updated 2026-06-11
Available in: claude-codecowork

Who it is for

WordPress developers, WordPress agencies, in-house webmasters

Use cases

  • Trimming a WordPress site built with DIVI for performance
  • Preparing a DIVI 4 to 5 migration
  • Building your own DIVI modules

Say this to activate the skill

"DIVI""Divi Builder""Edit WordPress page builder"

Install

mkdir -p ~/.claude/skills/anthropic-divi-edit && curl -fsSL https://collectivebrain.de/en/skills/anthropic-divi-edit/SKILL.md -o ~/.claude/skills/anthropic-divi-edit/SKILL.md

The command drops this page's SKILL.md straight into the right directory. No terminal? Download the file below and upload it in Claude.ai under Settings, Capabilities. Need help with setup? How to install skills →

SKILL.md

---
name: anthropic-divi-edit
description: Edits, optimizes, and migrates WordPress sites built with Divi Builder. Activate for Divi layouts, modules, child themes, performance tuning, or Divi 5 migration.
---

Precise editing of Divi sites: change layouts, modules, and templates without breaking existing structures.

## When this skill activates
- A Divi page needs changes: copy, sections, modules, or Theme Builder templates.
- A Divi site loads slowly and should be sped up with built-in options plus a child theme.
- A Divi 4 to 5 migration is planned, or custom Divi modules need to be built.

## Workflow
1. Clarify context: Divi version, access path (WP admin, WP-CLI, SFTP, DB), and the goal. Offer staging for live sites.
2. Back up: run wp db export, or at minimum save the affected post_content.
3. Read the structure: Divi 4 layouts live as nested shortcodes in post_content ([et_pb_section] > [et_pb_row] > [et_pb_column] > modules). Copy attributes from the existing tree, never guess them.
4. Edit surgically: change only the targeted attributes or text, keep the rest byte-identical. Carry responsive variants (_tablet, _phone) and _last_edited flags along consistently.
5. Styling order: module design settings, then the custom CSS field, then the child theme style.css with .et_pb_ selectors. Parent theme files are off limits.
6. Performance: enable Dynamic CSS, Critical CSS, and Defer jQuery in the theme options, trim Google Fonts, then clear the et-cache folder.
7. Custom modules: scaffold with create-divi-extension, extend ET_Builder_Module, define fields via get_fields(), test in the Visual Builder.
8. Divi 5 migration: check third-party modules for compatibility, run the conversion on staging, compare every page visually.
9. Verify: load the frontend uncached, check the browser console, test tablet and phone breakpoints.

## Output format
Per task: changed pages with post IDs, a diff or before/after note per change, steps performed, cache status, and a rollback note with the backup path.

## Quality rules
- No edit without a backup or a saved copy of the post_content.
- Never reconstruct shortcode syntax from memory; copy from existing content and adjust minimally.
- Keep responsive attributes and _last_edited in sync, otherwise the builder overwrites desktop values.
- Apply CSS only via the child theme or custom CSS fields, never in the parent theme.
- Clear et-cache after every change and verify uncached.
- Run migrations and bulk edits on staging only, never directly live.
- No extra plugins when Divi's built-in options are enough.

Share this skill

About this skill

DIVI WordPress Editing comes from Community and is part of a community plugin.

Sister brand for AI automation & workflow building: WhiteFox Automations · strategy & consulting stay with Collective Brain, built solutions come from WhiteFox.