Written by Tomáš Jendek, co-founder of Webgate.
Elementor is introducing one thing that would considerably change how companies construct WordPress web sites: an official MCP connection for instruments resembling Codex, Claude Code and Cursor.
As a substitute of producing HTML someplace outdoors WordPress after which rebuilding it manually, an AI coding agent can now work instantly with an Elementor web site and create actual, editable Elementor buildings.
We now have been testing the brand new Elementor MCP on one thing barely extra attention-grabbing than a demo atmosphere: our current manufacturing company web site.
The web site already accommodates years of current Elementor V3 parts, international types and manufacturing content material. Our query was easy: Can we introduce an AI-first Elementor growth workflow with out rebuilding the web site or breaking the present V3 setup?
Up to now, the reply appears very promising.
Our setup
Our present workflow combines:
- WordPress
- Elementor Professional
- current Elementor V3 pages and parts
- Elementor V4 / Atomic Parts
- Elementor MCP
- Codex
- Claude Code
- Figma
- screenshots and visible references
- browser-based visible QA
- the Elementor visible editor for ultimate changes
The essential half is that this isn’t a substitute challenge. We’re not rebuilding webgate.digital in Elementor V4. As a substitute, we’re steadily introducing Atomic Parts and MCP-based growth into an current Elementor V3 web site.
That makes the check a lot nearer to what an company would face with an actual shopper web site.
The primary manufacturing use case
The web page itself can be fittingly about our AI-native method to web site growth. We wished to construct it utilizing a mixture of current Webgate design patterns and completely new sections. As a substitute of beginning with an empty Elementor canvas and manually assembling each container, we labored principally by way of Codex and Claude Code.
The workflow seemed roughly like this: Temporary → current web site context → screenshots / Figma → prompts → Elementor MCP → visible QA → refinement
Some components reuse current Elementor V3 buildings from the web site. Different sections had been created as new V4 Atomic buildings by way of MCP. Each approaches stay on the identical manufacturing web site. That was one of many issues we particularly wished to check.
V3 and V4 can coexist
Considered one of our greatest questions earlier than testing MCP was whether or not introducing Atomic Parts would power us into an all-or-nothing migration.
Up to now, that has not been vital. We are able to hold current V3 sections and widgets whereas creating new sections utilizing V4 Atomic Parts.
That is essential for companies and complicated manufacturing web sites. A typical manufacturing Elementor web site might comprise a whole bunch of pages constructed over a number of years. Rebuilding every little thing merely to undertake a brand new growth workflow would hardly ever make business sense.
A way more sensible migration path is:
- hold secure V3 buildings the place there isn’t a cause to the touch them
- construct new sections and touchdown pages with Atomic Parts
- change older buildings steadily after they want redesigning
- ultimately improve the share of the location operating on the brand new system
That’s primarily the method we’re taking with Webgate.
Elementor itself at present describes V4 because the Atomic Editor whereas sustaining V3 performance alongside it. Elementor 4.Three additionally expands MCP help and Atomic capabilities moderately than requiring a right away migration of current pages.
What Elementor MCP truly does
MCP stands for Mannequin Context Protocol. The essential half will not be the acronym.
It means instruments resembling Codex or Claude Code can work together instantly with Elementor as a substitute of solely supplying you with directions or producing code that you simply manually copy some other place.
Elementor MCP exposes Elementor capabilities by way of the WordPress AI Talents system.
A linked agent can at present work with issues resembling:
- creating pages and layouts
- modifying current layouts
- creating and making use of courses and variables
- working with responsive settings
- working with parts
- connecting dynamic knowledge
- managing Theme Builder templates
- creating popups
- working with Elementor buildings instantly
The consequence continues to be Elementor. You’ll be able to open the generated web page within the Elementor editor and proceed modifying it usually.
Elementor additionally saves MCP-generated work as a draft moderately than instantly publishing it. That final level issues.
For us, the worth will not be AI producing a web site autonomously.
The worth is dramatically lowering the quantity of mechanical work required to translate a design resolution into Elementor construction.
A easy Elementor MCP setup
Go to Elementor → Elementor MCP. From the MCP display screen you’ll be able to select the shopper you need to join.
Elementor at present helps setup flows for instruments together with:
- Claude Code
- Claude Desktop
- Codex
- Cursor
- Different MCP-compatible shoppers
Elementor generates a setup immediate that accommodates the connection data required by the AI device.
Below the hood, the connection makes use of a WordPress Utility Password. Elementor can create this mechanically in the course of the setup stream.
As soon as linked, a easy first check is one thing like:
“Create a brand new draft web page and add an Atomic hero part with a headline, paragraph and two CTA buttons. Use the present web site design system.”
Then open the web page in Elementor and examine what was generated.
Our most helpful MCP use instances to date
The attention-grabbing half will not be asking AI to “construct me a web site”. It’s giving an agent exact growth duties. That distinction makes an enormous distinction.
Right here is an instance of the prompts used to construct our touchdown web page:
1. Constructing a brand new part from a short
For instance:
“Create a providers part with six service playing cards. Comply with the visible language of the present web site, use Atomic Parts and reuse our current variables.”
This removes a variety of repetitive format work. The developer can focus rather more on construction and design selections as a substitute of clicking by way of dozens of controls.
2. Constructing from screenshots
Screenshots are surprisingly helpful.
We are able to present the agent an current Webgate part or one other visible reference and ask it to create a structurally comparable part utilizing native Elementor parts.
The screenshot supplies visible intent.
MCP handles the precise Elementor implementation.
3. Figma-to-Elementor implementation
That is in all probability one of many extra attention-grabbing long-term workflows. The AI device can have entry to the Figma context and Elementor on the identical time.
That creates a workflow nearer to: Figma body → agent interpretation → native Elementor construction
moderately than: Figma → developer manually reconstructs each worth inside Elementor
Elementor particularly highlights this sort of workflow: an AI shopper can eat context from programs resembling Figma, Drive or Notion after which use that context whereas constructing in Elementor.
Human evaluate continues to be essential, significantly round responsive habits, spacing, typography and design-system consistency. However the quantity of mechanical implementation work may be considerably diminished.
4. Reusing current V3 buildings
Not each part must be rebuilt with Atomic Parts. Generally the quickest method is solely to reuse one thing that already works. On our touchdown web page, we combined current V3 modules with newly generated Atomic sections. That’s at present one in all our favourite elements of the workflow.
AI doesn’t power us into a brand new structure in all places. We are able to select the suitable implementation for every a part of the web page.
5. Iterating on construction
MCP turns into much more helpful after the primary model exists. As a substitute of manually restructuring containers, we are able to ask:
“Change this part from three equal columns to an uneven 40/60 format.”
Or:
“Transfer the visible above the content material on cell and hold the desktop format unchanged.”
Or:
“Exchange these six particular person blocks with one reusable part.”
This begins feeling a lot nearer to working with code than working with a conventional web page builder.
6. Content material and replica iteration
As a result of Claude or Codex already has the web page context, content material modifications can occur along with structural modifications.
For instance:
“Shorten all six service descriptions to a most of two sentences and make the part simpler to scan.”
The agent can replace each the content material and the underlying Elementor construction throughout the identical workflow.
7. Repetitive landing-page manufacturing
This may increasingly in the end be the highest-value use case for advertising groups.
As soon as a design system and web page patterns exist, producing one other marketing campaign web page ought to require much less guide meeting.
The method turns into nearer to giving the agent a specification:
- use this hero sample
- use this brand part
- add these six advantages
- use this CTA part
- apply the web site’s variables
- implement the equipped copy
- create pill and cell variations
A developer nonetheless evaluations the consequence. However the place to begin may be dramatically additional forward.
Elementor MCP is the arms
MCP is used when the AI wants to really work with Elementor, it provides the agent structured entry to the system.
For instance:
- examine Elementor construction
- create a web page
- add parts
- restructure containers
- change content material
- apply courses
- use design variables
- create or modify parts
The browser is the eyes
Browser entry is healthier for understanding the rendered consequence.
We use it to:
- open the stay web page
- examine how the design truly appears
- evaluate implementation in opposition to a screenshot or Figma design
- establish spacing or alignment issues
- examine desktop and cell habits
- confirm interactions
- run visible QA
This creates a helpful loop:
MCP → render → browser inspection → new directions → MCP
For instance:
“Open the web page and evaluate the hero in opposition to this reference. The headline is just too slender, there may be an excessive amount of whitespace above the CTA and the picture ought to begin roughly 80px increased. Replace the Elementor part.”
The browser helps the agent perceive the issue. MCP permits it to make the precise change.
We’d not deal with a browser extension as a substitute for Elementor MCP.
They remedy totally different components of the workflow.
Why we nonetheless use the Elementor visible editor
The attention-grabbing final result of this experiment is that AI has not made Elementor’s visible editor much less helpful. It might truly make it extra helpful.
AI is superb at:
- producing the primary implementation
- constructing construction
- repetitive configuration
- restructuring sections
- making use of systematic modifications
- translating clear directions into implementation
People are nonetheless sooner at many micro-decisions.
Transferring one thing by a number of pixels, testing a visible steadiness or shortly adjusting a responsive breakpoint can typically be simpler instantly in Elementor than writing one other immediate.
That results in the workflow we at present discover most attention-grabbing:
AI-first growth + visible modifying.
Use Codex or Claude for the heavy implementation work.
Use Elementor for ultimate visible tweaking.
Then return to the agent when one other structural change is required.
It doesn’t must be AI versus a visible builder. The mix could also be considerably higher than both workflow alone.
What shocked us
Earlier than testing the MCP, our assumption was that AI-powered Elementor growth would principally be attention-grabbing for producing fully new web sites.
After utilizing it on our manufacturing web site, we see the larger alternative elsewhere. It’s in current web sites.
An company can probably take a web site that has been operating for 5 years and begin utilizing AI brokers for the following touchdown web page with out rebuilding the earlier 200 pages.
The place the workflow nonetheless wants human supervision
We’d not at present give an agent unrestricted entry to a manufacturing web site and inform it to revamp every little thing. Our workflow nonetheless contains human evaluate.
Particularly for:
- data structure
- UX selections
- visible hierarchy
- accessibility
- responsive behaviour
- design-system consistency
- browser testing
- efficiency
- ultimate publishing
The distinction is the place the developer spends time.
Much less time assembling containers. Extra time reviewing and bettering the consequence. That may be a rather more attention-grabbing use of senior growth time.
The place we predict that is going
Our plan at Webgate is easy.
We need to steadily use Elementor MCP for:
- new touchdown pages
- marketing campaign pages
- web page redesigns
- structural web site enhancements
- Atomic part growth
- repetitive site-wide modifications
- ultimately extra advanced WordPress growth workflows
Elementor can be positioning MCP as a broader entry level into the WordPress ecosystem by way of WordPress AI Talents. With extra tooling resembling Angie, the identical agentic workflow can prolong past web page layouts into areas resembling customized widgets, WordPress administration and content material administration.
For companies, that’s probably extra important than AI web page technology itself.
We’re transferring towards a workflow the place the developer describes an meant final result, the agent performs a lot of the implementation, and the developer evaluations, exams and improves it.
The visible editor stays obtainable at any time when direct manipulation is solely sooner.
That mixture feels much less like changing Elementor growth and extra like giving Elementor builders a a lot sooner interface to the platform.
