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.

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.