Page Builders

Elementor Builder Reference

Technical documentation for using Respira with Elementor: JSON-based layouts, widget targeting, and safe editing workflows.

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

Widget	Type	Key Settings
Heading	`heading`	title, size, tag
Text Editor	`text-editor`	editor (HTML content)
Button	`button`	text, link, size
Image	`image`	image (url, id, alt)
Icon List	`icon-list`	icon_list (array)
Form	`form`	form_fields, email_to
Video	`video`	youtube_url, vimeo_url
Divider	`divider`	style, weight
Spacer	`spacer`	space
Icon Box	`icon-box`	title, description, icon

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"

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