Elementor MCP

Elementor MCP Skill (Universal)

Controls any WordPress site's Elementor page builder via its MCP server. Reads connection config from the project's .mcp.json automatically — works on any WordPress project.

Setup for a New WordPress Project

Add a .mcp.json in the project root:

{
  "mcpServers": {
    "elementor-mcp": {
      "type": "http",
      "url": "https://YOURSITE.com/wp-json/mcp/elementor-mcp-server",
      "headers": {
        "Authorization": "Basic BASE64_ENCODED_CREDENTIALS"
      }
    }
  }
}

Generate credentials: In WordPress, go to Users > Your Profile > Application Passwords. Create one, then base64-encode username:password.

Add .mcp.json to .gitignore (contains auth credentials).

How to Call

The SKILL_DIR placeholder below refers to wherever you installed this skill (e.g. ~/.claude/skills/elementor-mcp).

python SKILL_DIR/scripts/elementor-mcp.py --tool TOOL_NAME --params 'JSON' --pretty

Always use --pretty for readable output.

The script auto-detects the .mcp.json by searching the current directory and parents. To target a specific project:

python SKILL_DIR/scripts/elementor-mcp.py --project-dir /path/to/project --tool ...

If multiple MCP servers exist in .mcp.json, specify which one:

python SKILL_DIR/scripts/elementor-mcp.py --server elementor-mcp --tool ...

Quick Reference

List all tools

python SKILL_DIR/scripts/elementor-mcp.py --list

Tool Categories & Usage

1. DISCOVERY (read-only)

Example - List all pages:

python SKILL_DIR/scripts/elementor-mcp.py --tool elementor-mcp-list-pages --pretty

Example - Get page structure:

python SKILL_DIR/scripts/elementor-mcp.py --tool elementor-mcp-get-page-structure --params '{"post_id": 123}' --pretty

2. PAGE MANAGEMENT

Example - Create a draft page:

python SKILL_DIR/scripts/elementor-mcp.py --tool elementor-mcp-create-page --params '{"title": "New Landing Page", "status": "draft"}' --pretty

3. BUILD FULL PAGE (single call)

The most powerful tool - builds a complete page from a declarative structure:

python SKILL_DIR/scripts/elementor-mcp.py --tool elementor-mcp-build-page --params '{
  "title": "Landing Page",
  "status": "draft",
  "structure": [
    {
      "type": "container",
      "settings": {"flex_direction": "column", "padding": {"top": "60", "bottom": "60", "left": "20", "right": "20", "unit": "px"}},
      "children": [
        {"type": "widget", "widget_type": "heading", "settings": {"title": "Welcome", "header_size": "h1", "align": "center"}},
        {"type": "widget", "widget_type": "text-editor", "settings": {"editor": "<p>Your content here</p>", "align": "center"}}
      ]
    }
  ]
}' --pretty

4. CONTAINERS (layout)

Container settings: flex_direction, flex_wrap, justify_content, align_items, gap, content_width, padding, margin, background_*, border_*, min_height, container_type (flex/grid)

Example - Add a flex row container:

python SKILL_DIR/scripts/elementor-mcp.py --tool elementor-mcp-add-container --params '{"post_id": 123, "settings": {"flex_direction": "row", "justify_content": "space-between", "gap": {"size": 20, "unit": "px"}}}' --pretty

5. COMMON WIDGETS

Heading

--tool elementor-mcp-add-heading --params '{
  "post_id": 123, "parent_id": "abc123",
  "title": "Hello World", "header_size": "h2", "align": "center",
  "title_color": "#333333",
  "typography_typography": "custom", "typography_font_size": {"size": 36, "unit": "px"}
}'

Text Editor (rich text)

--tool elementor-mcp-add-text-editor --params '{
  "post_id": 123, "parent_id": "abc123",
  "editor": "<p>Rich <strong>HTML</strong> content</p>",
  "align": "center", "text_color": "#666666"
}'

Image

--tool elementor-mcp-add-image --params '{
  "post_id": 123, "parent_id": "abc123",
  "image": {"url": "https://example.com/photo.jpg"},
  "image_size": "large", "align": "center"
}'

Button

--tool elementor-mcp-add-button --params '{
  "post_id": 123, "parent_id": "abc123",
  "text": "Get Started", "link": {"url": "/contact"},
  "size": "lg", "align": "center",
  "button_text_color": "#FFFFFF", "background_color": "#2563EB"
}'

Icon Box

--tool elementor-mcp-add-icon-box --params '{
  "post_id": 123, "parent_id": "abc123",
  "title_text": "Fast Delivery",
  "description_text": "We deliver within 24 hours",
  "selected_icon": {"value": "fas fa-truck", "library": "fa-solid"}
}'

Form (Pro)

--tool elementor-mcp-add-form --params '{
  "post_id": 123, "parent_id": "abc123",
  "form_name": "Contact Form",
  "form_fields": [
    {"field_type": "text", "field_label": "Name", "required": "true"},
    {"field_type": "email", "field_label": "Email", "required": "true"},
    {"field_type": "textarea", "field_label": "Message"}
  ],
  "button_text": "Send",
  "submit_actions": ["email"],
  "email_to": "you@example.com"
}'

6. MORE WIDGETS (all follow same pattern: post_id + parent_id + settings)

7. PRO WIDGETS

8. WOOCOMMERCE WIDGETS

9. ELEMENT OPERATIONS

10. TEMPLATES & THEME BUILDER

# Save element as template
--tool elementor-mcp-save-as-template --params '{"post_id": 123, "title": "My Header", "template_type": "container"}'

# Apply template to page
--tool elementor-mcp-apply-template --params '{"post_id": 123, "template_id": 456}'

# Create theme template (header/footer/single/archive)
--tool elementor-mcp-create-theme-template --params '{"title": "Site Header", "template_type": "header"}'

# Set display conditions
--tool elementor-mcp-set-template-conditions --params '{"post_id": 789, "conditions": [["include", "general"]]}'

# Set dynamic tag on element
--tool elementor-mcp-set-dynamic-tag --params '{"post_id": 123, "element_id": "abc", "setting_key": "title", "tag_name": "post-title"}'

11. POPUPS

# Create popup
--tool elementor-mcp-create-popup --params '{"title": "Welcome Popup"}'

# Configure popup triggers/conditions
--tool elementor-mcp-set-popup-settings --params '{"post_id": 123, "triggers": {"on_page_load": true}, "conditions": [["include", "general"]]}'

12. GLOBAL DESIGN

# Update global colors
--tool elementor-mcp-update-global-colors --params '{"colors": [{"_id": "primary", "title": "Primary", "color": "#2563EB"}]}'

# Update global typography
--tool elementor-mcp-update-global-typography --params '{"typography": [{"_id": "primary", "title": "Primary", "typography_font_family": "Inter"}]}'

13. IMAGES & MEDIA

# Search free images (Openverse/CC)
--tool elementor-mcp-search-images --params '{"query": "mountain landscape", "page_size": 5}'

# Download image to Media Library
--tool elementor-mcp-sideload-image --params '{"url": "https://example.com/photo.jpg", "title": "Mountain", "alt_text": "Mountain landscape"}'

# Search + add image in one step
--tool elementor-mcp-add-stock-image --params '{"post_id": 123, "parent_id": "abc", "query": "modern office"}'

# Upload SVG icon
--tool elementor-mcp-upload-svg-icon --params '{"svg_content": "<svg>...</svg>", "title": "Custom Icon"}'

14. CUSTOM CODE

# Add JS to a page
--tool elementor-mcp-add-custom-js --params '{"post_id": 123, "parent_id": "abc", "js": "console.log(\"hello\");", "wrap_dom_ready": true}'

# Add CSS to element or page
--tool elementor-mcp-add-custom-css --params '{"post_id": 123, "element_id": "abc", "css": "selector { color: red; }"}'

# Add site-wide code snippet
--tool elementor-mcp-add-code-snippet --params '{"title": "GA4 Tracking", "code": "<script>...</script>", "location": "head", "status": "publish"}'

Workflow Patterns

Pattern 1: Inspect before editing

1. list-pages to find the page
2. get-page-structure to see elements
3. get-element-settings to inspect specific element
4. update-element or update-widget to modify

Pattern 2: Build a new page

1. Use build-page for complete pages in a single call
2. Or: create-page -> add-container -> add widgets step by step

Pattern 3: Discover widget options

1. get-widget-schema --params '{"widget_type": "heading"}' to see all available settings
2. Then use those settings in add-heading or add-widget

Pattern 4: Typography (applies to all widgets with text)

Set typography_typography to "custom" first, then set individual properties:

{
  "typography_typography": "custom",
  "typography_font_family": "Inter",
  "typography_font_size": {"size": 18, "unit": "px"},
  "typography_font_weight": "600",
  "typography_line_height": {"size": 1.6, "unit": "em"}
}

Pattern 5: Responsive sizing

Objects with size+unit format:

{"size": 20, "unit": "px"}

Pattern 6: Links

{"url": "https://example.com", "is_external": "true", "nofollow": "false"}

Pattern 7: Icons (Font Awesome)

{"value": "fas fa-check", "library": "fa-solid"}

Libraries: fa-solid, fa-regular, fa-brands