/migrate-divi-to-breakdance

name: migrate-divi-to-breakdance
description: "Use when the user says 'migrate divi to breakdance', 'convert divi to breakdance', or 'rebuild divi pages in breakdance'. Parses Divi shortcodes, maps modules to Breakdance elements, and creates draft duplicates for review."
license: MIT
metadata:
  author: Respira for WordPress
  author_url: https://respira.press
  version: 2.2.0
  mcp-server: respira-wordpress
  category: migration

Migrate Divi to Breakdance

**Version:** 2.2.0 **Updated:** 2026-09-13 **Freshly updated:** v2.1.0 adds design-token awareness: conversion writes now register the colors and typography they carry as named design tokens in Breakdance's own global styles, and converted pages reference those tokens instead of carrying value copies. Reuse registered tokens instead of re-inlining raw values, and report the registration in the migration summary.

Converts Divi-built WordPress pages to Breakdance Builder. Parses Divi's shortcode-based content from post_content, maps each module to its Breakdance element equivalent, generates a migration plan for approval, and writes Breakdance content to the target pages. Use this skill whenever someone wants to move from Divi to Breakdance, switch builders from Divi to Breakdance, or rebuild Divi pages in Breakdance.

What This Skill Does

Divi and Breakdance take very different approaches to content storage — Divi uses nested shortcodes in `post_content`, while Breakdance uses a structured format in post meta. This skill bridges that gap by parsing the full Divi shortcode tree, understanding each module's intent, and recreating it as the appropriate Breakdance element. Breakdance was built by the Oxygen team with a focus on clean output and intuitive editing, making it a popular Divi replacement for users who want better performance without a steep learning curve.

**Handles:**

• et_pb_section → Breakdance Section element
• et_pb_row/et_pb_column → Breakdance Div elements with flex layout
• et_pb_text → Breakdance Text element
• et_pb_blurb → Breakdance Icon Box or container with children
• et_pb_image → Breakdance Image element
• et_pb_button → Breakdance Button element
• et_pb_video → Breakdance Video element
• et_pb_divider → Breakdance Separator element
• et_pb_accordion/et_pb_toggle → Breakdance Accordion element
• et_pb_tabs → Breakdance Tabs element
• et_pb_gallery → Breakdance Gallery element
• et_pb_slider → Breakdance Slider element
• et_pb_pricing_tables → Breakdance Pricing Table element
• et_pb_code → Breakdance Code element
• et_pb_counters → Breakdance Progress Bar element
• et_pb_map → Breakdance Map element
• Custom CSS → Breakdance custom CSS fields
• Column widths → Breakdance flex percentages

**Preserves:**

• All text content and inline formatting
• Image URLs, alt text, dimensions
• Typography settings (font, size, weight, line-height)
• Color values and gradients
• Spacing (margin, padding)
• Background images, overlays
• Border and shadow settings
• Button labels, URLs, targets
• CSS classes

What This Skill Does NOT Do

• **Specialty sections** — Divi's specialty layouts need manual setup in Breakdance.
• **Global modules** — Divi's `et_pb_layout` global modules are inlined during migration. Breakdance global blocks are separate.
• **Third-party Divi modules** — Plugins extending Divi are flagged for manual recreation.
• **Divi theme customizer** — Global design settings from the Divi customizer must be configured in Breakdance's design settings.
• **Dynamic content** — Divi's dynamic features need Breakdance's dynamic data system.
• **Contact forms** — et_pb_contact_form must be rebuilt with Breakdance's form element or a forms plugin.
• **Divi Library** — Layouts in et_pb_layout post type are not migrated automatically.
• **Motion effects and animations** — Scroll effects differ between builders.
• **Theme dependency** — If using Divi theme, switching to Breakdance means using a different base theme.

Requirements

• Respira for WordPress plugin installed and connected
• MCP connection active (desktop or WebMCP)
• Divi theme or Divi Builder plugin active (to read source content)
• Breakdance plugin installed and active (to write target content)
• Read access to scan Divi content
• Write access to create duplicates with Breakdance content

Trigger Phrase

• "migrate divi to breakdance"

Alternative Triggers

• "convert divi to breakdance"
• "switch from divi to breakdance"
• "rebuild divi pages in breakdance"
• "move from divi to breakdance"
• "divi to breakdance migration"
• "replace divi with breakdance"

Source Builder: Divi

Divi stores content as shortcodes in `post_content`:

[et_pb_section fb_built="1" _builder_version="4.x"]
  [et_pb_row]
    [et_pb_column type="4_4"]
      [et_pb_text]<p>Content</p>[/et_pb_text]
      [et_pb_image src="photo.jpg" alt="Photo"][/et_pb_image]
    [/et_pb_column]
  [/et_pb_row]
[/et_pb_section]

Key Divi specifics:

• **Hierarchy**: section → row → column → module (strict nesting)
• **Column types**: `4_4` (100%), `1_2` (50%), `1_3` (33%), `2_3` (66%), `1_4` (25%), `3_4` (75%)
• **Settings as attributes**: `background_color`, `custom_margin`, `custom_padding`
• **Content encoding**: HTML entities, percent-encoding in attribute values
• **Global modules**: `global_module` attribute referencing `et_pb_layout` post
• **Section types**: regular, fullwidth, specialty

Read Divi content via `respira_extract_builder_content` with `builder=divi`.

Target Builder: Breakdance

Breakdance stores content in post meta with a structured element format.

Key Breakdance specifics:

• Elements use types like `EssentialElements\\Heading`, `EssentialElements\\Text`, `EssentialElements\\Image`
• Section and Div elements for layout structure
• Clean CSS output with minimal wrapper markup
• Built-in form builder, WooCommerce support, popup system
• Responsive design through breakpoint-specific settings
• Created by the Oxygen team — combines Oxygen's cle