/migrate-elementor-to-bricks

name: migrate-elementor-to-bricks
description: "Use when the user says 'migrate elementor to bricks', 'convert elementor to bricks', or 'move my site from elementor to bricks'. Reads the Elementor JSON widget data, maps each widget to its Bricks equivalent, and creates draft duplicates with clean Bricks JSON."
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 Bricks

**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 Bricks' 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 Bricks Builder. Reads Elementor's JSON widget tree from post meta, maps each widget to its closest Bricks element equivalent, generates a migration plan for approval, and writes clean Bricks JSON to the target pages. Use this skill whenever someone wants to move from Elementor to Bricks, rebuild Elementor pages in Bricks, or switch page builders from Elementor to Bricks.

What This Skill Does

Elementor and Bricks are both visual page builders, but they store content in fundamentally different formats — Elementor uses a nested JSON widget tree in `_elementor_data`, while Bricks uses a flat-ish JSON array in `_bricks_page_content_2`. This skill bridges that gap by reading every Elementor widget, understanding its purpose, and recreating it as the appropriate Bricks element. Both Elementor and Bricks are among the 17 page builders Respira reads and writes natively, so the extraction and injection run through the same builder-aware tooling Respira uses everywhere else.

**Handles:**

• Section/Column layouts → Bricks Section/Container elements
• Text Editor, Heading, Image, Video, Button widgets → native Bricks equivalents
• Icon, Icon Box, Image Box, Star Rating → Bricks icon and media elements
• Tabs, Accordion, Toggle → Bricks interactive elements
• Form widgets → Bricks form elements (where available)
• Spacer, Divider, Google Maps → utility element equivalents
• Custom CSS from Elementor's Advanced tab → Bricks custom CSS fields
• Responsive visibility settings → Bricks breakpoint visibility
• Motion effects and entrance animations → Bricks interaction settings (where supported)
• Inner Section nesting → Bricks nested container structure
• Global widget references → resolved to inline content (Bricks templates noted for manual setup)

**Preserves:**

• Content text, images, links, and media references
• Typography settings (font family, size, weight, line-height, letter-spacing)
• Color values (hex, rgb, rgba, CSS variables)
• Spacing (margin, padding) and sizing
• Background images, overlays, gradients
• Border and border-radius settings
• Box shadow values
• Link targets and rel attributes
• CSS classes and IDs

What This Skill Does NOT Do

• **Third-party Elementor addons** — Widgets from Essential Addons, JetElements, Crocoblock, PowerPack, etc. are flagged for manual migration. The skill cannot map proprietary addon widgets to Bricks equivalents automatically.
• **Elementor Pro dynamic tags** — Dynamic content (ACF fields, custom field displays, loop templates) require Bricks' own dynamic data system, which has different capabilities. These are flagged, not auto-converted.
• **Theme Builder templates** — Elementor's header/footer/archive/single templates use a different storage mechanism. This skill migrates page content, not theme builder templates.
• **Popup/modal content** — Elementor popups are stored separately and are not included in page migration.
• **WooCommerce widgets** — Elementor Pro's product grid, cart, checkout widgets need Bricks' WooCommerce elements configured separately.
• **Pixel-perfect recreation** — Bricks uses a different rendering engine. Spacing and alignment will be close but may need manual fine-tuning.

Requirements

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

Trigger Phrase

• "migrate elementor to bricks"

Alternative Triggers

• "convert elementor to bricks"
• "switch from elementor to bricks"
• "rebuild elementor pages in bricks"
• "move my site from elementor to bricks"
• "elementor to bricks 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 — not needed for migration but useful for verification
• **Page settings** in `_elementor_page_settings` (page layout, hide title, etc.)
• **Global widgets** reference a template via `templateID` — must be resolved before mapping

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

Target Builder: Bricks

Bricks stores content in `_bricks_page_content_2` as a JSON array. Each e