How to Move an Elementor Site to Gutenberg

There is no button that turns an Elementor site into Gutenberg blocks. Elementor keeps every layout in its own data format, and the block editor reads standard block markup, so each page is rebuilt. This guide shows how your AI agent, connected to WordPress through Fabrement, rebuilds an Elementor site as native Gutenberg blocks, keeps the design, the addresses and the SEO, and lets you switch Elementor off at the end. The steps follow our own rebuild of a 20-page Elementor site.

Key takeaways

There is no Elementor to Gutenberg converter that keeps the design, because Elementor stores layouts in its own format. Your AI agent rebuilds each section as a native Gutenberg block with editable fields, on one design system.
Rebuild on a copy of the same site, not on a fresh WordPress. Your pages, posts, media and SEO data are already in its database, and the live Elementor site stays untouched as the design reference.
Keep every address. The agent copies SEO titles and descriptions word for word and adds a redirect for any address that has to change.
Forms, popups and scripts are a step of their own. Forms move to Contact Form 7 or WPForms, popups to Fabrement’s modal component, and tracking scripts move across.
Switch Elementor off last, after every page is checked on desktop and mobile.

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.

Requirements

What	Needed
The Elementor site	Administrator access, and a staging copy of the site. Most hosts create one in a click.
A backup	A full backup of files and database before anything changes.
WordPress	WordPress 6.9 or newer with HTTPS, and Fabrement installed and signed in on the staging copy.
PHP	PHP 8.0 or newer for the plugin. Use 8.2 or newer: older branches no longer get security fixes.
AI agent	Claude, ChatGPT, Codex or Cursor, connected to the site over MCP. Step by step: Claude, ChatGPT, Codex, Cursor.
AI plan	Enough usage for long sessions. Our 20-page rebuild took 10 hours of work over 3 days.

The steps

1. Back up, and rebuild on a staging copy

Make a full backup, then create a staging copy of the site and install Fabrement there. The copy matters: it already holds your pages, posts, media, menus and SEO data, so the agent rebuilds with your own content instead of reading it back from the published pages. The live Elementor site keeps running for visitors and serves as the design reference the agent compares against.

2. Connect the agent and let it audit first

Connect your agent from Fabrement → MCP Connection. Before it changes anything, ask it to read the site and list what it found: every page with its address, SEO title and description, the Elementor templates for the header, footer and popups, every form, the add-on packs and plugins, and the tracking scripts. Then ask what it understood. A good audit is the list you check the finished site against.

3. Start from a clean theme and a design system

Elementor sites usually run on a theme made for Elementor, plus add-on packs that load their own styles and scripts. On the staging copy, the agent switches to a theme with no styles or scripts of its own, such as Fabrement Base, which installs from the plugin’s screens. Nothing from the old setup then leaks into the new pages. The agent builds a design system from the live site: colours, fonts, type sizes and buttons, so every block it writes follows them.

4. Give the agent the brief

Start a new session with your connected agent. An example request:

This WordPress site is a staging copy of https://your-site.com, built with Elementor. Rebuild it as native Gutenberg blocks, without Elementor.

The design stays the same: every section, every button and how it behaves, and all spacing, on desktop and mobile. Build a design system from the site's colours, fonts and buttons, one header and footer, and a native block for each section with fields the team can edit. Use the pages, posts and media already in this WordPress.

Keep every address. Copy every SEO title and description word for word, and add a redirect for any address that has to change. Rebuild the forms, the popups and the 404 page, and move the tracking scripts.

Before you start, check the live website and tell me what you understood. Build the homepage first and wait for my review, then the rest. Finish with a report: what you built, your decisions, and what could not be carried over and why.

5. Homepage first, then the rest

Review the homepage against the live site section by section before the agent goes on. This is where the details show up that an agent can miss and a person spots at once: a menu hover that behaves differently, a submenu, a spacing rule the old theme set for the whole page. Once the homepage matches, the same rules carry over to every other page, and the agent builds the rest the same way, coming back with the decisions it needs from you.

6. Replace what Elementor ran for you

Elementor Pro and its add-ons do more than lay out pages. Ask the agent for a list of every one of these features the site uses, then replace them one by one:

Forms. Elementor forms are rebuilt with Contact Form 7 or WPForms, styled to match the site. Check where each form sends its messages.
Popups. Popups, drawers and bottom sheets become Fabrement’s modal component, opened from a link, a button or a menu item.
Theme Builder templates. The header, footer and templates for posts and archives become Fabrement headers, footers and templates on the same design system.
Dynamic content and loops. Repeating content such as projects, team members or services becomes its own post type with fields and a filterable archive.
Scripts and the 404 page. Analytics, chat and cookie banner scripts move across on the same accounts, and the 404 page is rebuilt in the site’s design.

7. Review, switch, then turn Elementor off

Read the agent’s report first. Compare the old and new page lists so no page goes missing, check every SEO title, and look at every page on desktop and mobile next to the live one. Check the share texts too: pages that relied on WordPress’s automatic excerpts lose them, because blocks produce none, so set them by hand. Then move the staging copy to live, deactivate Elementor and its add-ons, and check the site again. Keep the backup, and watch Google Search Console for addresses that return 404 in the weeks after the switch.

After the move: run the site with your AI agent

Once Elementor is gone, the same MCP connection keeps working. You manage the site by asking your AI agent in plain language: pages built from the blocks you already have, texts and images, menus, SEO titles and descriptions, redirects, and new sections from a screenshot. Every block change can be rolled back, and the team can edit the same blocks in the WordPress editor whenever they prefer.

Free plugin

Fabrement: the workplace for your AI agent

A free plugin for WordPress 6.9 or newer. Once your AI is connected, your agent can do all of this on your site.

Download Plugin

What comes over, and what needs a decision

The design comes over as native Gutenberg blocks with real fields, a header, a footer and templates, on one design system. Pages and posts keep their addresses, their SEO titles and descriptions, and their media. What needs a decision is anything an add-on pack did that no block replaces on its own: a special widget, an animation, a membership area. The agent’s report lists them. A WooCommerce store built with Elementor is a separate job, because Fabrement does not manage WooCommerce yet.

Two Elementor sites we moved show both paths: Lumick kept its design, and Cowboy Productions moved to a new one. How the two editors compare in general is on Elementor vs Gutenberg, and why native blocks beat another page builder is on our Elementor alternative page.

FAQ

Frequently asked questions

Is there an Elementor to Gutenberg converter?

Not one that keeps the design. Elementor stores layouts in its own data format, so nothing converts line by line reliably. Your AI agent rebuilds each section as a native Gutenberg block with real fields and fills it with your existing content.

Will I lose my Google rankings?

Not if the addresses stay the same. The agent keeps your page addresses, copies the SEO titles and descriptions word for word, and adds a redirect for any address that changes.

What happens to my pages when I deactivate Elementor?

Pages built with Elementor lose their layout without it. That is why Elementor is switched off only at the end, after every page has been rebuilt as blocks and checked.

Can I do it on the live site?

You can, but a staging copy is safer. The live site keeps running for visitors while the agent works, and you switch only when every page has been checked.

How long does it take?

Our 20-page Elementor rebuild took 10 hours of work over 3 days, with the same design and the same SEO. Most of the time went into checking details, not writing code.

What does it cost?

The plugin is free. The agent runs on your own AI plan, and after the move you no longer pay for Elementor Pro or its add-ons.

Sources

The steps come from our own rebuilds of two Elementor sites, Lumick and Cowboy Productions. Fabrement facts come from our own AGENTS.md (plugin version 1.6.0). If a step has changed, tell us and we will correct it.