Elementor vs Gutenberg
Elementor and Gutenberg are the two most common ways to build pages in WordPress, so they get compared. The difference between Elementor and Gutenberg is the kind of tool each one is: Elementor is a plugin that adds its own visual page builder on top of WordPress, and Gutenberg is the block editor built into WordPress itself, so “Elementor vs the block editor” is the same question. This page compares them on what matters after launch too: speed, cost, what you keep if you switch, and AI.
The short answer
Elementor is a page builder plugin with a free version and paid Pro plans. You design on a drag-and-drop canvas with a live preview and detailed controls for every element and screen size. Its Pro plans add a theme builder, forms, popups and dynamic content, and its pages are stored in Elementor’s own format.
Gutenberg is the WordPress block editor, part of WordPress since 2018 and free. You build pages from blocks, and with a block theme the Site Editor builds headers, footers and templates the same way. Pages are stored as standard block markup in WordPress itself, and custom designs usually need custom blocks.
Key takeaways
- Design control without code is Elementor’s strength. Gutenberg’s core blocks are simpler, and a custom design usually means custom blocks.
- Weight. Gutenberg adds no builder layer to the page. Elementor loads its own front-end code and markup; its version 4 editor (2026) makes that output leaner.
- Lock-in. Gutenberg content is standard WordPress. Elementor layouts live in Elementor’s own data, so switching away means rebuilding the pages.
- Cost. Gutenberg is free. Elementor has a free version; the features most business sites use are in Pro plans, paid yearly per site.
- AI. Both can now be built by an AI agent over MCP: Elementor with its own Elementor MCP, Gutenberg with plugins that let an agent write native blocks.
Hand this to your AI first: fabrement.com/AGENTS.md. One link, and your agent knows what Fabrement can do on your site and how to connect to it.
Side by side
How to read the table: Yes is a stated feature. Partly, not the main workflow means it is possible, but not what the tool is built for. No means the tool does not offer it.
| Elementor | Gutenberg (block editor) | |
|---|---|---|
| What it is | A page builder plugin with its own visual editor | The editor built into WordPress |
| Made by | Elementor Ltd | The WordPress open-source project |
| Price | Free version; Pro from about $60 a year for one site; AI and extra tools in Elementor One plans | Free, part of WordPress |
| How you edit | Drag and drop on a live canvas | Blocks in the editor; the Site Editor for templates with a block theme |
| Design control without code | Yes: detailed styling, positioning and motion for every element | Partly, not the main workflow: core blocks and global styles; custom designs usually need custom blocks |
| Different layout per screen size | Yes: styles per device for every element | Partly, not the main workflow: show or hide blocks per device since WordPress 7.0; finer control depends on the theme or block |
| Headers, footers, templates | Yes: Theme Builder in Pro | Yes: Site Editor with a block theme |
| Forms | Yes: Form Builder in Pro (saved submissions on higher plans) | No: needs a form plugin such as Contact Form 7 or WPForms |
| Popups | Yes: Popup Builder on Advanced plans and up | No: needs a plugin |
| Custom fields and post types in layouts | Yes: dynamic content on Advanced plans and up | Partly, not the main workflow: Query Loop and block bindings; richer layouts need custom blocks |
| What loads on the page | Elementor’s own front-end code and wrapper markup; leaner with the version 4 editor | Only the styles of the blocks on the page (block themes); no builder layer |
| Where the design is stored | Elementor’s own data on each page; without the plugin, pages lose their layout | Standard block markup in the post content; readable in any block theme |
| AI agent over MCP | Yes: Elementor MCP for Claude, Codex and Cursor builds Elementor structure | Partly, not the main workflow: core exposes abilities through the Abilities API and the official MCP Adapter; building blocks needs a plugin such as Fabrement |
Who each one suits. Elementor suits designers and site owners who want to place and style everything visually, on one page at a time, and are fine paying yearly for Pro features. Gutenberg suits sites that should stay light and standard: content that outlives any plugin, a team that edits in plain WordPress, and developers who build custom blocks for the design.
What changed recently. With an AI agent connected over MCP, editing a layout becomes part of your conversation with the agent, not a session of dragging and dropping. Elementor has its own MCP integration for that. To let an agent work with Gutenberg blocks, you need a plugin such as Fabrement, our own. So the old trade-off, visual control in Elementor against clean standard code in Gutenberg, matters less once the agent does the editing.
Speed: what actually differs
Gutenberg pages carry no builder: a block’s markup is plain HTML, and block themes load only the styles of the blocks on the page. Elementor adds its own layer of wrapper markup and front-end code, and its version 4 editor, released in 2026, was built to make that output leaner. Either can be fast or slow in practice. What decides it is how much a page loads: a Gutenberg site with a heavy theme and twenty plugins will be slower than a careful Elementor build. Judge by real-visitor data, the Core Web Vitals in Google Search Console, not by one speed-test score.
Can you use Elementor and Gutenberg together?
Yes, many sites do: posts in the block editor, landing pages in Elementor. The cost is two systems to keep consistent, two places where styles live, and pages that only render with Elementor active. If you are moving away from Elementor, nothing converts on its own: each section is rebuilt. Our Lumick case study shows it on a 20-page Elementor site, rebuilt with the same design and SEO in 10 hours of work; the Cowboy Productions case study does the same with a new design, and our guide How to Move an Elementor Site to Gutenberg covers the steps. The whole Lumick rebuild is in this video:
Gutenberg with Fabrement vs Elementor Pro: what’s built in
The common objection to Gutenberg is that it has no popups, no form builder and no dynamic content, which is what Elementor Pro and its add-ons provide. Fabrement is our plugin that lets your AI agent build those as native Gutenberg blocks: custom blocks with real fields on one design system, from a sentence, a screenshot, a Figma frame or HTML, edited later in the block editor or by asking the agent. Here is what each gives you without extra plugins.
| Elementor Pro | Gutenberg with Fabrement | |
|---|---|---|
| Popups | Yes: Popup Builder on Advanced plans and up | Yes: a ready modal component since version 1.6.0, for popups, drawers, bottom sheets and fullscreen panels, opened from any link or button |
| Forms | Yes: its own Form Builder | Yes: the agent builds forms with Contact Form 7 and places WPForms forms, styled to match the site |
| Custom post types and fields | Partly, not the main workflow: shows them on Advanced plans; creating them needs ACF or an add-on such as JetEngine | Yes: the agent creates post types, taxonomies and fields |
| Filterable lists and archives | Partly, not the main workflow: a taxonomy filter for Loop Grid; filters by fields and with counts need an add-on | Yes: filters by fields, categories, dates or authors, with counts, sorting and search |
| Redirects | No: needs a separate plugin | Yes: built in, and a redirect follows its page when the address changes |
| Headers, footers, templates | Yes: Theme Builder | Yes: headers, footers and templates on one design system |
| Built and changed by an AI agent over MCP | Yes: Elementor MCP (editing existing layouts needs Angie and atomic layouts) | Yes: every block, page, template, post type and SEO field |
| If the plugin is turned off | Pages lose their Elementor layout | Fabrement blocks stop rendering; posts, pages and media stay. The block code is yours, so a developer can move it into the theme by hand |
| Price | From about $60 a year for one site; popups and dynamic content on higher plans | Plugin free; the agent runs on your own AI plan |
On forms the difference is where they live: Elementor has a form builder of its own, while Fabrement builds them with Contact Form 7 or WPForms, which stay installed as their own plugins. Both depend on their plugin to render the design, so neither is free of lock-in. The difference is the way out: Fabrement blocks are plain PHP, CSS and JavaScript that a developer can move into the theme, while Elementor layouts are Elementor’s own data and need Elementor to render. More on how Fabrement builds a WordPress site.
Frequently asked questions
Is Gutenberg faster than Elementor?
Is Elementor free?
Can I switch from Elementor to Gutenberg?
Can I use Elementor and Gutenberg together?
Can an AI agent build with both?
Sources
Elementor facts were checked on 23 October 2026 against its pricing page (plan features) and its Elementor MCP page; the Pro starting price is from third-party plan roundups, because Elementor’s page shows prices only after a region check. Gutenberg facts come from the WordPress project and the WordPress 7.0 release coverage. Fabrement facts come from our own AGENTS.md (plugin version 1.6.0). If anything here is out of date, tell us and we will correct it.
Related articles
10Web AI Website Builder vs Fabrement
10Web builds your site with its own AI agents on its own hosting. Fabrement lets your own AI agent build native Gutenberg…
WPVibe vs Fabrement
WPVibe gives an AI agent hands on the WordPress site you already have. Fabrement builds the whole site, from Figma to forms,…
How to Move a Lovable Site to WordPress
Move a Lovable design to WordPress as native Gutenberg blocks with your AI agent: getting the code out of Lovable, keeping an…