/migrate-elementor-to-oxygen

name: migrate-elementor-to-oxygen
description: "Use when the user says 'migrate elementor to oxygen', 'convert elementor to oxygen', or 'rebuild elementor pages in oxygen'. Maps Elementor widgets to Oxygen components 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 Oxygen

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

What This Skill Does

Oxygen is a fundamentally different kind of builder than Elementor — it outputs clean HTML/CSS without wrapper divs, gives direct access to CSS properties, and thinks in terms of components rather than widgets. This migration requires not just content transfer but a philosophical shift: Elementor's widget-based approach maps to Oxygen's component-based architecture where you have more control but less hand-holding. Both Elementor and Oxygen are 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 → Oxygen Section/Columns/Div components
• Text Editor, Heading → Oxygen Text and Heading components
• Image, Video, Button → native Oxygen equivalents
• Icon, Icon Box → Oxygen icon components
• Tabs, Accordion → Oxygen interactive components
• Spacer, Divider → CSS spacing or Oxygen separator
• Google Maps → Oxygen map component
• Code Block, Custom HTML → Oxygen Code Block
• Image Gallery → Oxygen Gallery component
• Custom CSS → Oxygen's stylesheet or custom CSS fields
• Responsive settings → Oxygen media query breakpoints

**Preserves:**

• All text content, headings, and inline formatting
• Image URLs, alt text, captions, and links
• Typography settings (mapped to Oxygen's CSS-based typography controls)
• Color values (hex, rgb, rgba)
• Spacing values (margin, padding)
• Background images and gradients
• Border and shadow CSS properties
• Link URLs and targets
• CSS classes

What This Skill Does NOT Do

• **Third-party Elementor addons** — Essential Addons, JetElements, Crocoblock widgets are flagged for manual migration. Oxygen has its own ecosystem of components.
• **Elementor Pro dynamic tags** — Oxygen has powerful dynamic data capabilities but with a completely different interface. Dynamic content is flagged for manual setup.
• **Theme Builder templates** — Elementor's template system is separate from Oxygen's template system. Templates need to be recreated in Oxygen.
• **Form widgets** — Elementor forms need Oxygen's form component or a third-party solution.
• **Popup content** — Must be rebuilt using Oxygen's modal/lightbox functionality.
• **WooCommerce widgets** — Oxygen has its own WooCommerce components that must be configured independently.
• **Motion effects and animations** — Oxygen uses CSS animations directly; Elementor's motion effects don't map 1:1.
• **Responsive precision** — Oxygen uses explicit media query breakpoints (1120px, 992px, 768px, 480px by default) which differ from Elementor's breakpoints.

Requirements

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

Trigger Phrase

• "migrate elementor to oxygen"

Alternative Triggers

• "convert elementor to oxygen"
• "switch from elementor to oxygen"
• "rebuild elementor in oxygen"
• "move from elementor to oxygen"
• "elementor to oxygen 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
• **Responsive settings** use suffixes: `_tablet`, `_mobile`
• **CSS** cached in `_elementor_css` post meta
• **Page settings** in `_elementor_page_settings`
• **Global widgets** reference templates via `templateID`

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

Target Builder: Oxygen

Oxygen stores content in the `ct_builder_shortcodes` post meta field. Despite the name, modern Oxygen uses a JSON-based structure internally.

Key Oxygen specifics:

• Components include: `ct_section`, `ct_row`, `ct_column`, `ct_div_block`, `ct_headline`, `ct_text_block`, `ct_image`, `ct_link_button`
• Oxygen outputs clean HTML — minimal wrapper divs, direct CSS properties
• CSS is stored per-component with explicit property names (not shorthand)
• Responsive design uses media query breakpoints: default, 1120px, 992px, 768px, 4