You want to change one line on your Home page. Just one. So you open Elementor, wait for the editor to load, hunt for the right widget in a stack of nested containers, change the text, switch to mobile view because the new line wraps badly, fix the font size, click Update, and clear the cache. Ten minutes for a five-second edit.
That is the job AI is actually good at. Not dreaming up a brand-new page, but making the small, boring, precise changes you put off because Elementor makes them fiddly. This guide shows how to let Claude edit your existing Elementor pages, what to ask for, and where the limits are.
Generating a page vs. editing one
Search for “AI Elementor page builder” and most of what you find does one thing: you describe a page and it builds a new one. That is handy on day one. It is far less useful on day ninety, when the page is live, you have tuned the spacing and the client likes it, and all you want is a new price in the second pricing card.
Rebuilding a page to change one price is like repainting a house to fix a light switch. What you want is an AI that can:
- read the layout you already have,
- find the exact widget you mean,
- change only that widget’s settings,
- and leave everything else alone.
That is what editing with Claude through MCP does.
How Claude edits an Elementor page
Under the hood, an Elementor page is a tree: containers or sections, columns, and widgets, each with an ID and a list of settings like title, text, link or background_color. When Claude is connected to your site with an MCP plugin, it can work with that tree directly:
- It reads the layout. Claude asks for the page’s structure and gets back every widget in order, with its ID, type and text.
- It finds what you meant. You said “the button under the hero heading”, so it looks for the button widget right after that heading.
- It changes one element. It sends only the settings that need to change, say the button text and link, for that one widget ID.
- Elementor keeps a revision. The change is saved like any edit you make yourself, so you can roll back from the Elementor history panel.
Because nothing else is rewritten, your spacing, custom CSS, motion effects and responsive settings stay exactly as they were.
Getting set up (two minutes)
You need three things: Elementor (free or Pro), a Claude account, and a plugin that gives Claude access to your site. With MCPress it goes like this:
- Install and activate MCPress, then copy the MCP address from its dashboard.
- In Claude, open Settings > Connectors, add a custom connector and paste the address.
- Press Connect, log in to WordPress and press Allow.
If you use Claude Code or want every detail, the full walkthrough is in How to Connect Claude to WordPress.
Things you can ask Claude to do in Elementor
Here is the kind of work that goes well. You can type these almost word for word.
Text and buttons
- “On the Home page, change the hero heading to ‘Fresh coffee, slow mornings’.”
- “Change the ‘Book now’ button on the Services page to ‘Get a quote’ and link it to /contact/.”
- “Rewrite the About page intro so it sounds warmer. Keep it under 60 words.”
Prices, numbers and details
- “On the Pricing page, change the Basic plan from ₹399 to ₹499.”
- “Update the opening hours in the contact section: Saturday is now 10 to 4.”
Look and feel
- “Make the main button on the Home page orange, #FF8A00.”
- “Swap the hero image on the Home page for this one” (and paste an image link).
- “Change the site’s primary global color to #3B30E0.” This updates every widget that uses that global color at once.
Mobile fixes
This is where AI quietly saves the most time, because Elementor keeps separate settings for desktop, tablet and mobile.
- “The hero heading is too big on phones. Set its mobile font size to 32px and leave desktop as it is.”
- “On mobile, reduce the top padding of the first section to 40px.”
Structure
- “Add an FAQ section above the footer on the Services page with these five questions.”
- “Move the testimonials section so it comes right after the features.”
- “Duplicate the Pricing page as a draft called Pricing (Diwali offer).”
How to ask so you get what you meant
Claude is good at finding things, but it cannot read your mind. A few habits make the difference between “done, perfect” and “wait, not that one”.
- Name the page. “On the Pricing page” beats “on the site”.
- Point at the element by what it says. Widget IDs mean nothing to you, and they don’t have to. “The heading that says Our Story” is enough.
- Say what should stay the same. “Change the text only, keep the style” removes any guesswork.
- Ask for a plan on bigger jobs. “Tell me what you’d change before you do it” gives you a list to approve first.
- One page at a time. For a redesign, go section by section and check each one. You’ll catch problems while they’re small.
A real-looking example
Here is roughly how a short session goes:
You: On the Home page, the second feature card says “Free delivery over ₹999”. Change it to ₹799, and make that card’s icon green.
Claude: Found it. The second card is an icon box with the title “Free delivery over ₹999”. I changed the title to “Free delivery over ₹799” and set the icon color to green (#2BD38A). Nothing else on the page was touched. Elementor saved a revision if you want to undo.
No editor, no navigator panel, no hunting. Open the page, check it, move on.
Where it falls short (honestly)
It is not magic, and it helps to know the edges before you hit them.
- It reads settings, not pixels. Claude knows a heading is 48px. It does not see that it looks cramped next to your logo, unless you tell it or share a screenshot.
- Taste is still your job. “Make it look more premium” is vague for a person and vague for an AI. Specific asks work better: bigger spacing, fewer colors, a serif heading.
- Third-party addon widgets vary. Core Elementor widgets are predictable. Some addon packs store settings in unusual ways, so check those changes a bit more closely.
- Caching can hide changes. If an edit doesn’t show, clear your cache plugin and CDN. In Elementor, Tools > Regenerate CSS also helps.
- Headers and footers. With MCPress, the free plan edits the body of your pages. Header and footer templates need Pro.
Keeping your live site safe
Letting an AI touch a live page sounds scary the first time. A few simple habits take the fear out of it:
- Try it on a copy first. Ask Claude to duplicate the page as a draft, make the changes there, and only then repeat them on the real page.
- Use Elementor revisions. Every save the AI makes is a revision you can restore from the History panel.
- Start in read-only mode. Let Claude look around and describe your pages before you allow changes.
- Use approval mode and undo for client sites. With MCPress Pro, changes can wait for your approval, and the activity log lets you take any change back in one click.
FAQ
Does this work with Elementor free?
Yes. It works with Elementor free and Elementor Pro.
Will it mess up my design?
It changes only the widget settings it needs to. Your layout, spacing and custom CSS stay as they are, and every change is saved as a revision.
Can Claude build a brand-new Elementor page too?
Yes, it can add sections and widgets or put a page together from your saved templates. It just shines most on the everyday edits to pages you already have.
Do I need to open the Elementor editor at all?
Not for the change itself. It is still worth opening the page afterwards to check it looks right on desktop and mobile.
The bottom line
You don’t need AI to design your site for you. You need it to stop small edits from eating your afternoon. Connect Claude once, describe the change the way you’d tell a colleague, and check the result. That’s it.
MCPress is free for one site. Download it here, and if you get stuck, the docs walk through every step.