/migrate-elementor-to-breakdance

name: migrate-elementor-to-breakdance
description: "Use when the user says 'migrate elementor to breakdance', 'convert elementor to breakdance', or 'rebuild elementor pages in breakdance'. Maps Elementor widgets 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 Elementor 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 Elementor-built WordPress pages to Breakdance Builder. Reads Elementor's JSON widget tree from post meta, maps each widget 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 Elementor to Breakdance, switch builders from Elementor to Breakdance, or rebuild Elementor pages in Breakdance.

What This Skill Does

Breakdance is a newer builder created by the Oxygen team with a focus on clean output and familiar visual editing. Both Elementor and Breakdance are widget/element-based builders, making this a relatively smooth migration path. The main challenge is mapping Elementor's JSON widget tree (`_elementor_data`) to Breakdance's post meta format, translating settings names, and handling the structural differences in how each builder handles sections, columns, and responsive design. Both sit among the 17 page builders Respira reads and writes natively, so extraction and injection run through the same builder-aware tooling Respira uses everywhere else.

**Handles:**

• Section/Column layouts → Breakdance Section/Div elements
• Text Editor, Heading, Image, Video, Button → native Breakdance equivalents
• Icon, Icon Box, Image Box → Breakdance icon and media elements
• Tabs, Accordion, Toggle → Breakdance interactive elements
• Form widgets → Breakdance form element
• Spacer, Divider → Breakdance spacing and separator elements
• Google Maps → Breakdance map element
• Image Gallery → Breakdance gallery element
• Pricing Table → Breakdance pricing element
• Progress Bar, Counter → Breakdance equivalents
• Custom CSS → Breakdance custom CSS fields
• Responsive visibility → Breakdance breakpoint controls

**Preserves:**

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

What This Skill Does NOT Do

• **Third-party Elementor addons** — Widgets from Essential Addons, JetElements, Crocoblock, etc. are flagged for manual migration.
• **Elementor Pro dynamic tags** — ACF fields, custom loops, and dynamic content need Breakdance's dynamic data system configured separately.
• **Theme Builder templates** — Elementor headers, footers, archive templates are not page content and require Breakdance's own template system.
• **Popup content** — Elementor popups need to be rebuilt as Breakdance popups manually.
• **WooCommerce widgets** — Elementor's WooCommerce elements need Breakdance's WooCommerce builder.
• **Motion effects** — Parallax, entrance animations, and scroll effects have different implementations in Breakdance.
• **Global widgets** — Referenced by `templateID` in Elementor; these are resolved to inline content. Breakdance global blocks must be set up separately.

Requirements

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

Trigger Phrase

• "migrate elementor to breakdance"

Alternative Triggers

• "convert elementor to breakdance"
• "switch from elementor to breakdance"
• "rebuild elementor pages in breakdance"
• "move from elementor to breakdance"
• "elementor to breakdance migration"

Source Builder: Elementor

Elementor stores page content in the `_elementor_data` post meta field as a JSON string. The structure is a nested tree:

Document
  └─ Section (type: "section")
       ├─ settings: { structure, layout, content_width, ... }
       └─ elements: [
            Column (type: "column")
              ├─ settings: { _column_size, ... }
              └─ elements: [
                   Widget (type: "widget", widgetType: "heading")
                     └─ settings: { title, size, header_size, ... }
                 ]
          ]

Key Elementor specifics:

• **Widget types** are in the `widgetType` field (e.g., `heading`, `text-editor`, `image`, `button`)
• **Responsive settings** use suffixes: `margin`, `margin_tablet`, `margin_mobile`
• **CSS** is cached in `_elementor_css` post meta
• **Page settings** in `_elementor_page_settings`
• **Global widgets** reference a template via `templateID`

Read Elementor content via `respira_extract_builder_content` with `builder=elementor`.

Target Builder: Breakdance

Breakdance stores content in post meta. Elements follow a structured format with type, settings, and children.

Key Breakdance specifics:

• Elements have types like `EssentialElements\\Heading`, `EssentialElements\\Text`, `EssentialElements\\Image`
• Section/Div structure for layouts (similar conceptual model to Elementor sections/columns)
• Clean CSS output — Breakdance generates minimal, optimized CSS