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:

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 :

Export the Elementor data

wp @site post meta get { post_id } _elementor_data

/tmp/elementor-backup- { post_id } .json Simple text replacement :

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:

wp @site elementor flush-css

If the

elementor

WP-CLI command isn't available:

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: 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 : 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 :

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

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: 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. 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: 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