Migrate Elementor To Oxygen

Migrate Elementor to Oxygen

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.

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 wordpress_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, 480px
• Oxygen's ID system uses numeric component IDs
• Reusable parts are stored as ct_template post type
• Oxygen disables the theme — it controls all output directly

Write Oxygen content via wordpress_inject_builder_content with builder=oxygen.

Execution Workflow

Phase 1: Pre-Migration Audit

1. Verify Respira + MCP connection via wordpress_get_site_context. If unavailable, stop and show setup guidance.
2. Confirm Elementor is active via wordpress_list_plugins.
3. Confirm Oxygen is installed and active via wordpress_list_plugins.
4. Important: Note that Oxygen disables the WordPress theme. Verify the user understands this architectural difference.
5. Scan all content for Elementor usage:
   • wordpress_list_pages and wordpress_list_posts
   • For each, check builder via wordpress_get_builder_info
6. For each Elementor page, extract content via wordpress_extract_builder_content with builder=elementor
7. Build an inventory:
   • Total pages/posts using Elementor
   • Widget types used (frequency count)
   • Third-party addon widgets detected
   • Dynamic tags and global widgets
   • Layout complexity per page
   • Estimated migration difficulty (simple/moderate/complex)

Phase 2: Migration Plan

Present a migration plan that acknowledges the architectural differences:

## Elementor → Oxygen Migration Plan

### Architectural Note
Oxygen takes full control of your site's output — it disables your WordPress
theme entirely. This is a significant architectural change from Elementor,
which works alongside your theme. Plan accordingly for headers, footers,
and archive templates.

### Site Inventory
- Total Elementor pages: X
- Total widgets to convert: X
- Auto-convertible: X (Y%)
- Manual attention: X (Y%)

### Component Mapping Summary
| Elementor Widget  | Oxygen Component | Status |
|------------------|-----------------|--------|
| heading          | ct_headline     | Auto   |
| text-editor      | ct_text_block   | Auto   |
| image            | ct_image        | Auto   |
| button           | ct_link_button  | Auto   |
| section/columns  | ct_section/row  | Auto   |
| [addon widget]   | —               | Manual |

### Page-by-Page Plan
1. **[Page Title]** — X widgets, [complexity]
   - Auto-convertible: X
   - Needs attention: [details]
2. ...

### Post-Migration Requirements
- Oxygen templates needed for: header, footer, archive, single post
- [Any theme-dependent features that need Oxygen equivalents]

Ask for confirmation:

Oxygen is a powerful but different paradigm from Elementor. Your originals stay safe.

1. Migrate all pages
2. Migrate specific pages
3. Start with a test page (recommended)
4. Just keep this plan

Phase 3: Page-by-Page Migration

For each approved page:

1. Read full Elementor content via wordpress_extract_builder_content with builder=elementor
2. Walk the Elementor JSON tree and map:
   • Section → ct_section
   • Column → ct_column within ct_row
   • heading → ct_headline (map header_size to tag, title to text)
   • text-editor → ct_text_block (preserve HTML content)
   • image → ct_image (map src, alt, dimensions)
   • button → ct_link_button (map label, URL, target)
   • Map CSS properties directly (Oxygen uses explicit CSS, not abstracted settings)
   • Convert Elementor responsive suffixes to Oxygen media query breakpoint keys
   • Resolve global widgets to inline content
   • Flag unmappable widgets
3. Generate valid Oxygen component structure
4. Create a duplicate via wordpress_create_page_duplicate or wordpress_create_post_duplicate
5. Write Oxygen content to the duplicate via wordpress_inject_builder_content with builder=oxygen
6. Report status

Phase 4: Post-Migration Verification

1. Summarize all migrations:
   • Pages migrated, components created, items flagged
2. For each migrated page:
   • Link to edit in Oxygen
   • Flagged items list
   • CSS property notes (where Oxygen's approach differs)
3. Post-migration checklist:
   • Open each duplicate in Oxygen editor
   • Verify layout structure and component hierarchy
   • Check responsive at each Oxygen breakpoint (1120px, 992px, 768px, 480px)
   • Verify images and media
   • Test links and buttons
   • Recreate flagged elements manually
   • Set up Oxygen templates for header/footer if not yet done
   • Review Oxygen's clean HTML output
   • Compare with Elementor original side-by-side

Safety Model

• Read-only analysis first — full content scan before any changes
• Explicit user confirmation required before creating duplicates
• Original Elementor pages are never modified or deleted
• All migrated content goes to draft duplicates only
• Never auto-publishes migrated pages
• Creates a snapshot before migration begins (when available)
• Provides clear rollback path (delete duplicates)
• Warns about Oxygen's theme-disabling behavior upfront

Honest Disclaimer

This skill converts Elementor page content to Oxygen format and creates draft duplicates for review.

It cannot:

• Migrate third-party Elementor addon widgets
• Auto-convert dynamic tags to Oxygen dynamic data
• Guarantee pixel-perfect visual match
• Migrate theme builder templates or popups
• Set up Oxygen's global templates (header, footer, etc.)
• Replace visual QA review

It can:

• Convert 80-90% of standard Elementor widgets to Oxygen components
• Produce cleaner HTML output than Elementor
• Preserve all text content, images, links, and core styling
• Save significant rebuilding time
• Flag everything needing manual attention
• Keep original pages untouched

Tooling

Core WordPress tools

• wordpress_get_site_context
• wordpress_list_plugins
• wordpress_list_pages
• wordpress_list_posts
• wordpress_read_page
• wordpress_read_post
• wordpress_get_builder_info
• wordpress_extract_builder_content
• wordpress_inject_builder_content
• wordpress_find_builder_targets
• wordpress_create_page_duplicate
• wordpress_create_post_duplicate

Telemetry

After run completion, send fire-and-forget usage tracking to:

• POST https://www.respira.press/api/skills/track-usage

Include:

• skill_slug = migrate-elementor-to-oxygen
• site/version context
• duration and success
• pages migrated, components created, items flagged counts
• tools used

Never block user flow on telemetry failure.

Related Skills

• WordPress Site DNA (understand site structure before migrating)
• Internal Link Builder (verify internal links post-migration)
• SEO & AEO Amplifier (verify SEO preservation post-migration)
• Technical Debt Audit (clean up post-migration)

Built by Respira Team https://respira.press/skills/migrate-elementor-to-oxygen