Elementor Builder Reference

Technical documentation for using Respira with Elementor.

About Elementor

Elementor is the leading WordPress page builder with over 16 million active installations. It provides a drag-and-drop interface for building pages using widgets, sections, and containers.

Respira supports classic Elementor and Elementor v4 (Atomic). On v4, Respira writes around 20 element types (9 widgets plus 11 layout containers) with per-breakpoint and per-state styling. Types it does not yet support return a clear 422 error naming the unsupported type instead of dropping the element silently.

Data Structure

Elementor stores page layouts as structured JSON in WordPress post meta (_elementor_data). Each page contains a hierarchical tree of elements:

[
  {
    "id": "abc123",
    "elType": "section",
    "settings": { "layout": "boxed" },
    "elements": [
      {
        "id": "def456",
        "elType": "column",
        "settings": { "width": "50" },
        "elements": [
          {
            "id": "ghi789",
            "elType": "widget",
            "widgetType": "heading",
            "settings": {
              "title": "Welcome to Our Site",
              "_element_id": "hero-heading"
            }
          }
        ]
      }
    ]
  }
]

Module Identification

By Custom ID (Recommended)

Set in Elementor: Widget → Advanced → CSS ID. Then target with:

{ "admin_label": "hero-heading" }

By Navigator Label

Use Elementor's Navigator panel (right-click → Navigator) to name widgets:

{ "admin_label": "Hero CTA Button" }

By Path

{ "path": "sections[0].columns[0].widgets[1]" }

By Type

{ "type": "button", "match_content": "Get Started" }

Common Widgets

Example Prompts for Elementor

Content Updates:

• "Update the heading widget labeled 'Hero Heading' to say 'Start Here'"
• "Change all button colors on the pricing page to #FF5733"
• "Replace the hero section image with /wp-content/uploads/new-hero.jpg"

Structure Queries:

• "Show me all sections on page 42"
• "List all buttons and their text on the homepage"
• "What widgets are in the first section?"

Bulk Updates:

• "Find all buttons with 'Learn More' and change text to 'Get Started'"
• "Update all heading widgets to use H2 instead of H3"
• "Change the footer email address across all pages"

Global Widgets

Respira detects Elementor Global Widgets. Updates to global widgets propagate everywhere they're used.

• "List all global widgets" → Shows global widget library
• "Update the global header phone number" → Changes it site-wide

Template Kits & Theme Builder

Elementor Pro's Theme Builder templates (headers, footers, single post templates) are editable through Respira:

• "Update the header template button to link to /contact"
• "Change the footer copyright year to 2025"

Limitations

• Visual-only settings: Hover states, entrance animations, and responsive visibility may need the Elementor editor
• Custom CSS: Per-widget custom CSS is preserved but complex styling changes may require the builder
• Dynamic tags: Elementor dynamic content tokens are preserved but not directly editable
• Third-party widgets: Support varies by add-on; core Elementor widgets have full support

When to Use This Tool

• Quick content updates - Change headlines, button text, or links without opening the builder
• Bulk edits - Update the same text or link across multiple pages
• SEO workflows - Fix heading structure or add missing alt text
• Client handoffs - Make content changes after design is locked

See Also

• wordpress_extract_builder_content - View page structure
• wordpress_update_module - Update specific widgets
• wordpress_inject_builder_content - Replace entire structure
• Page Builder Overview - Compare all supported builders

v5.2.0 Elemental — New Capabilities

Dynamic Schemas

Respira reads the Elementor control registry at runtime and generates JSON Schemas for every widget installed on your site. This means AI agents know the exact settings, types, and valid values — including third-party widgets.

The schema generator maps Elementor control types to JSON Schema:

• TEXT, TEXTAREA → string
• NUMBER, SLIDER → number (with min/max)
• SELECT, CHOOSE → string (enum)
• COLOR → string (format: color)
• MEDIA → object {url, id}
• REPEATER → array
• GROUP → object (recursive)

Schemas are cached for 12 hours and invalidated when Elementor's version changes.

Settings Validator

Before saving, Respira validates widget settings against the dynamic schema. If a setting name is close but not exact, you get a "did you mean?" suggestion:

Unknown setting 'titel' for heading widget. Did you mean 'title'?

Element-Level Operations

Instead of downloading the entire page JSON, AI agents can now target individual widgets:

• find_element — locate by ID, type, CSS class, or text content
• update_element — change settings on a single widget
• move_element — reposition within the page tree
• duplicate_element — clone with new ID
• remove_element — delete from page

HTML-to-Elementor Conversion

The convert_html_to_builder tool maps CSS properties directly to Elementor widget settings:

• Background colors, gradients → background_color, background_image
• Typography (font, size, weight) → typography_* settings
• Spacing (padding, margin) → padding/margin settings
• Borders, shadows → border_, box_shadow_ settings
• Media queries → tablet/mobile responsive breakpoints

CSS custom properties (design tokens) can be converted to Elementor Global Colors and Fonts when preserve_tokens: true is set.

Support Level

Elementor has Full Intelligence support — the highest tier, with dynamic schemas, element operations, HTML conversion, and settings validation.

Recent capabilities (plugin v7.5.x)

• Elementor v4 (Atomic) writes. Respira writes around 20 v4 element types (9 widgets plus 11 layout containers) with per-breakpoint and per-state styling. Applied styles are wired to the element so they actually render.
• Clear errors on unsupported types. A v4 element type Respira does not support yet returns a 422 error that names the type, instead of dropping it silently.
• Digit-leading style ids render. A style id that starts with a digit (for example 1probedigit) is sanitized to a valid letter-leading class, so Elementor generates a rule the browser matches and the element carries its style.
• Repeaters can shrink. update_element can now remove entries from a repeater, not only add or change them.
• _elementor_data decode fixed and build_page no longer drops v4 children, so a full-page build keeps every element. Per-page v4 auto-detect was also corrected so v4 pages are recognized as v4.