WordPress Elementor

Edit Elementor pages and manage templates on existing WordPress sites. Produces updated page content via browser automation (for visual/structural changes) or WP-CLI (for safe text replacements).

Prerequisites

Working WP-CLI connection or admin access (use wordpress-setup skill)
Elementor installed and active:
```
wp @site plugin status elementor
```

Workflow

Step 1: Identify the Page

Find the page to edit:

bash

# List Elementor pages (pages with _elementor_data meta)
wp @site post list --post_type=page --meta_key=_elementor_edit_mode --meta_value=builder \
  --fields=ID,post_title,post_name,post_status

# Get the Elementor edit URL
# Format: https://example.com/wp-admin/post.php?post={ID}&action=elementor

Step 2: Choose Editing Method

Change Type	Method	Risk
Text content updates	WP-CLI search-replace	Low (with backup)
Image URL swaps	WP-CLI meta update	Low (with backup)
Widget styling	Browser automation	None
Add/remove sections	Browser automation	None
Layout changes	Browser automation	None
Template application	Browser automation	None

Rule of thumb: If you're only changing text or URLs within existing widgets, WP-CLI is faster. For anything structural, use the visual editor via browser.

Step 3a: Text Updates via WP-CLI (Safe Method)

Always back up first:

bash

# Export the Elementor data
wp @site post meta get {post_id} _elementor_data > /tmp/elementor-backup-{post_id}.json

Simple text replacement:

bash

# Dry run — check what would change
wp @site search-replace "Old Heading Text" "New Heading Text" wp_postmeta \
  --include-columns=meta_value \
  --dry-run --precise

# Execute (after confirming dry run looks correct)
wp @site search-replace "Old Heading Text" "New Heading Text" wp_postmeta \
  --include-columns=meta_value --precise

After updating, clear Elementor's CSS cache:

bash

wp @site elementor flush-css

If the

elementor

WP-CLI command isn't available:

bash

wp @site option delete _elementor_global_css
wp @site post meta delete-all _elementor_css

Step 3b: Visual Editing via Browser Automation

For structural changes, use browser automation to interact with Elementor's visual editor.

Open the editor:

Navigate to

https://example.com/wp-admin/post.php?post={ID}&action=elementor

Wait for the editor to fully load (Elementor loading screen disappears)
The page appears in the main panel with the widget sidebar on the left

Common editing tasks:

Edit text widget: Click on the text element in the preview → edit inline or in the sidebar
Edit heading: Click the heading → update text in the sidebar panel
Change image: Click image widget → click the image in sidebar → select new from media library
Edit button: Click button → update text, URL, and styling in sidebar
Save: Click the green "Update" button (or Ctrl+S)

Use playwright-cli for independent sessions:

bash

playwright-cli -s=wp-editor open "https://example.com/wp-admin/"
# Login first, then navigate to Elementor editor
playwright-cli -s=wp-editor navigate "https://example.com/wp-admin/post.php?post={ID}&action=elementor"

Or Chrome MCP if using the user's logged-in session.

See

references/elementor-workflows.md

for detailed browser automation steps.

Step 4: Manage Templates

List saved templates:

bash

wp @site post list --post_type=elementor_library --fields=ID,post_title,post_status

Apply a template to a new page:

Create the page:

wp @site post create --post_type=page --post_title="New Page" --post_status=draft

Open in Elementor via browser
Click the folder icon (Add Template)
Select from "My Templates" tab
Click "Insert"
Customise and save

Duplicate an existing page:

bash

# Get source page's Elementor data
SOURCE_DATA=$(wp @site post meta get {source_id} _elementor_data)
SOURCE_CSS=$(wp @site post meta get {source_id} _elementor_page_settings)

# Create new page
NEW_ID=$(wp @site post create --post_type=page --post_title="Duplicated Page" --post_status=draft --porcelain)

# Copy Elementor data
wp @site post meta update $NEW_ID _elementor_data "$SOURCE_DATA"
wp @site post meta update $NEW_ID _elementor_edit_mode "builder"
wp @site post meta update $NEW_ID _elementor_page_settings "$SOURCE_CSS"

# Regenerate CSS
wp @site elementor flush-css

Step 5: Verify

bash

# Check the page status
wp @site post get {post_id} --fields=ID,post_title,post_status,guid

# Get live URL
wp @site post get {post_id} --field=guid

Take a screenshot to confirm visual changes:

bash

playwright-cli -s=verify open "https://example.com/{page-slug}/"
playwright-cli -s=verify screenshot --filename=page-verify.png
playwright-cli -s=verify close

Critical Patterns

Elementor Data Format

Elementor stores page content as JSON in

_elementor_data

postmeta. The structure is:

Section → Column → Widget

Each element has an

id

elType

widgetType

, and

settings

object. Direct manipulation of this JSON is possible but fragile — always back up first and prefer

search-replace

over manual JSON editing.

CSS Cache

After any WP-CLI change to Elementor data, you must flush the CSS cache. Elementor pre-generates CSS from widget settings. Stale cache = visual changes don't appear.

bash

wp @site elementor flush-css
# OR if elementor CLI not available:
wp @site option delete _elementor_global_css
wp @site post meta delete-all _elementor_css

Elementor Pro vs Free

Feature	Free	Pro
Basic widgets	Yes	Yes
Theme Builder	No	Yes
Custom fonts	No	Yes
Form widget	No	Yes
WooCommerce widgets	No	Yes
Dynamic content	No	Yes

Theme Builder templates (header, footer, archive) are stored as

elementor_library

post type with specific meta indicating their display conditions.

Common Elementor WP-CLI Commands

If the Elementor CLI extension is available:

bash

wp @site elementor flush-css          # Clear CSS cache
wp @site elementor library sync       # Sync with template library
wp @site elementor update db          # Update database after version change

Reference Files

```
references/elementor-workflows.md
```
— Browser automation steps, template management, safe editing patterns

wordpress-elementor

NPX Install

Tags

SKILL.md Content

WordPress Elementor

Prerequisites

Workflow

Step 1: Identify the Page

Step 2: Choose Editing Method

Step 3a: Text Updates via WP-CLI (Safe Method)

Step 3b: Visual Editing via Browser Automation

Step 4: Manage Templates

Step 5: Verify

Critical Patterns

Elementor Data Format

CSS Cache

Elementor Pro vs Free

Common Elementor WP-CLI Commands

Reference Files