Migrate Elementor to Oxygen

Version: 2.1.0 Updated: 2026-08-04 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 16 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 elementordata 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 elementorcss post meta
Page settings in elementorpage_settings
Global widgets reference templates via templateID

Read Elementor content via respiraextractbuilder_content with builder=elementor.

Target Builder: Oxygen

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

Key Oxygen specifics:

Components include: ctsection, ctrow, ctcolumn, ctdivblock, ctheadline, cttextblock, ctimage, ctlink_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 respirainjectbuilder_content with builder=oxygen.

Execution Workflow

Phase 1: Pre-Migration Audit

Verify Respira + MCP connection via respiragetsite_context. If unavailable, stop and show setup guidance.
Confirm Elementor is active via respiralistplugins.
Confirm Oxygen is installed and active via respiralistplugins.
Important: Note that Oxygen disables the WordPress theme. Verify the user understands this architectural difference.
Inventory and scope the source pages with respirafindbuildertargets (builder=elementor) — a fast, ranked list of every Elementor-built page/post before you touch anything. Fall back to respiralistpages / respiralistposts + respiragetbuilderinfo to confirm builder per item where needed.
For each Elementor page, extract content via respiraextractbuilder_content with builder=elementor
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:

Read full Elementor content via respiraextractbuilder_content with builder=elementor
Walk the Elementor JSON tree and map:

- Section → ctsection - Column → ctcolumn within ctrow - heading → ctheadline (map headersize to tag, title to text) - text-editor → cttextblock (preserve HTML content) - image → ctimage (map src, alt, dimensions) - button → ctlinkbutton (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

Generate valid Oxygen component structure
Create a duplicate via respiracreatepageduplicate or respiracreatepostduplicate
Before writing, take a snapshot with respiragetsnapshot so the duplicate's pre-write state can be restored if anything goes wrong
Write Oxygen content to the duplicate via respirainjectbuilder_content with builder=oxygen
Surgical fix pass — if the injected page has validation issues (collapsed column widths, broken parent refs, a misconverted component), do not re-inject the whole page. Locate the specific element with respirafindelement and correct it with respiraupdateelement. For repeated fixes across many components or several pages, batch them with respirabatchupdate
Report status

Phase 4: Post-Migration Verification

Summarize all migrations:

- Design tokens registered in Oxygen's global styles (token names and counts) - Pages migrated, components created, items flagged

For each migrated page:

- Link to edit in Oxygen - Flagged items list - CSS property notes (where Oxygen's approach differs)

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

Design Tokens

Conversion writes now register the colors and typography they carry as named design tokens in Oxygen's own global styles, and the converted pages reference those tokens instead of carrying value copies. When fixing or extending a migrated page, reuse the registered tokens (respiralistdesign_tokens shows them) rather than re-inlining raw hex values or font stacks. And say so when you finish: the migration summary should name the tokens that were registered and note that migrated pages reference them.

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
Takes a respiragetsnapshot of each duplicate before any write, so its pre-write state can be restored
Two explicit rollback paths: restore the snapshot with respirarestoresnapshot, or delete the draft duplicates entirely with respiradeletepage / respiradeletepost
Surgical fixes (respirafindelement + respiraupdateelement, or respirabatchupdate) replace whole-page re-injection, so corrections stay scoped and reversible
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

respiragetsite_context
respiralistplugins
respiralistpages
respiralistposts
respirareadpage
respirareadpost
respiragetbuilder_info
respiraextractbuilder_content
respirainjectbuilder_content
respirafindbuilder_targets
respiracreatepage_duplicate
respiracreatepost_duplicate

Safety and precision tools

respiragetsnapshot
respirarestoresnapshot
respirafindelement
respiraupdateelement
respirabatchupdate
respiradeletepage
respiradeletepost

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

migrate-elementor-to-oxygen

Installation

Similar popular skills

Also in this package

Agent compatibility

Repository health

Skill metadata

Package contents

History

SKILL.md