Your company’s website is built with Elementor, and your marketing team needs to update content, add sections, or create new landing pages. Elementor MCP lets you connect Codex or Claude and carry out supported edits by describing what you need.
Use the website’s existing pages and styles as a reference. The result stays editable in Elementor, so you can also open the editor and make adjustments yourself.
1. Enable Elementor MCP in WordPress
- Log in to your website’s WordPress dashboard.
- Go to Elementor → Elementor MCP. In some menu layouts, it is under Elementor → Editor → Elementor MCP.
- Click Enable MCP access.
- Select the application you want to use: Codex or Claude Desktop.
- Select the acknowledgment about creating an application password.
- Click Generate Prompt, then Copy prompt.
If the MCP option is missing, ask your website administrator to check the Elementor version and your account access. You can also follow Elementor’s illustrated connection guide.
Wordfence tip: If Wordfence blocks application passwords, open Wordfence → All Options → Brute Force Protection. Under Additional Options, uncheck Disable WordPress application passwords and click Save Changes. Then return to Elementor and generate the connection prompt.
Keep this option unchecked while using MCP; turning it back on also blocks existing application passwords. If it is already unchecked, no change is needed. See Wordfence’s explanation of this setting.
The generated prompt contains access credentials. Use it for the connection setup and keep it out of shared documents and screenshots.
2. Connect Codex or Claude
Open the application you selected and paste the generated setup prompt. Follow its instructions to add the MCP connection. If it returns configuration to save, complete that step, then restart the application if requested.
Use the prompt for the correct app: Claude Desktop and Claude Code are separate options. You only need one connected application for this workflow.
Check the connection with this first message. Replace the website and page URLs with your own:
Use Elementor MCP to inspect [website URL].
Read the saved Elementor structure of [existing page URL].
Tell me its page title, main sections, and which parts you can edit.
Do not make any changes yet.The response should describe the actual page in Elementor. If it only gives general advice, the connection still needs checking.
Support varies by element and installed version, particularly on older pages. If a widget is unsupported, edit it directly in Elementor or ask your website developer for help.
3. Give It a Specific Task
Start with a new campaign page. Give the AI your copy, images, destination link, and an existing page to follow. This helps it reuse the website’s existing design.
Create a draft landing page for [campaign name].
Use [existing page URL] as the design reference.
Use the attached copy and images.
Include a hero, three benefits, and a button linking to [URL].
Reuse the website’s existing fonts, colors, and button styles.
Build with native Elementor elements that I can edit later.
Keep changes on this new page; leave shared styles, the header,
and the footer unchanged.
Keep the page unpublished and give me the editor and preview links.
If anything is missing or unsupported, tell me.Then give feedback as you would to a colleague: “Move the benefits above the image,” “Use this shorter heading,” or “The button is too wide on mobile.” Keep each request tied to the page you are working on.
If you already have a design prepared in Claude, the guide to turning a Claude design into an Elementor website covers that workflow in more detail.
4. Open the Result in Elementor
Follow the editor link, or find the page under Pages → Edit with Elementor. Check the copy, images, links, and mobile layout. Open the preview and try the buttons. If the page includes a form, test a real submission too.
You can continue with AI or make the final adjustments in Elementor. Let the AI finish saving before editing manually, and ask it to read the current page again when you return to the conversation.
Publish when the page is ready and has passed your team’s usual review. MCP can include publishing tools, so say explicitly when work should remain a draft. Elementor’s editing guide explains the preview and publishing controls.
What You Can Work on Next
Once the connection works, try other tasks on pages and elements it supports:
- Update campaign copy, images, and button links.
- Add an FAQ, benefits section, or call to action.
- Prepare another landing page using an existing layout as a reference.
- Adjust spacing and layout for mobile screens.
For repeated changes across several pages, follow the bulk Elementor updates guide. It shows how to define the pages, give a working example, and check the results.
Involve your website developer when a task affects shared templates, tracking, or integrations. Your marketing team can handle routine page work while keeping the result editable in Elementor. For more on this workflow, read why WordPress and Elementor still matter in the AI era.
