How to switch from Elementor to the WordPress block editor (Gutenberg)
Neither Elementor nor WordPress has a converter that turns an Elementor page into equivalent blocks. With Elementor switched off, a page shows only a plain copy of its text and images. So the move is a rebuild, page by page, and it can be done gradually while the site stays live.
- By
- WP Ministry
- Published
In short
- Neither Elementor nor WordPress converts an Elementor layout into equivalent blocks. Plan a rebuild, page by page.
- Deactivating Elementor deletes nothing. The layouts stay in the database and come back if the plugin is switched on again.
- Before you start, list what Elementor does beyond page layout. That means the header and footer, forms, popups, fonts, custom CSS and tracking code.
- Set up the new theme, header and footer first. Then rebuild pages one at a time, the busiest first, while Elementor still draws the rest.
- Rebuild each page at its own address. No redirect is needed, and its SEO title and description stay attached.
- Record PageSpeed Insights results for the same pages before and after. Neither product's documentation promises a gain.
Neither Elementor nor WordPress has a converter that turns an Elementor page into equivalent blocks. Elementor keeps each layout in its own data, apart from the page content WordPress holds, and with the plugin switched off a page shows only a plain copy of its text and images. So moving to WordPress's own block editor, which many people still call Gutenberg, is a rebuild, page by page.
The rebuild can be gradual. The two editors work side by side on one site, so the site stays live while you replace one page at a time.
Whether to move at all
Three reasons to move stand on what the two products' documentation says.
- The block editor is part of WordPress. It has been the default editor since WordPress 5.0, in December 2018. There is no second product to update, license or keep in step with WordPress.
- Elementor Pro is a subscription the site comes to depend on. Elementor's help center says that without a renewal you can no longer update Elementor Pro, and warns that updating the free plugin while Pro stays behind can cause compatibility problems.
- A block page is ordinary page content. WordPress saves blocks as HTML in the page's content, with comments marking each block. Elementor's developer documentation says it saves a layout as JSON in a private custom field, and that its own code builds the page from that data. With a block theme, the header, footer and templates are edited in WordPress too.
Speed is the reason given most often, and the one with the least behind it. Neither product's documentation says a block page loads faster than an Elementor page. Elementor's listing on WordPress.org reports a PageSpeed Insights score that rose from 82 to 95 for one layout between versions 3.1 and 3.5, and its help center says a widget's files load only on pages that use it. After a move, one plugin fewer loads styles and scripts. Whether visitors notice is something to measure.
There are also reasons to stay.
- Elementor bundles things WordPress has no block for. WordPress's own list of blocks has no form, no popup and no slider. Elementor has all three, most of it in Pro. After a move, each one is a separate plugin to choose, set up and keep updated.
- Its Theme Builder shows a template by condition, and its dynamic tags pull post data and custom fields into a design. Block themes have templates too, but part of the equivalent is a developer's job.
- The site works, and the people who edit it know Elementor. A rebuild on its own changes nothing a visitor can see, and every page is made again by hand.
Do not bother if the site does its job, its important pages pass Core Web Vitals, the license is not a burden, and the site leans on Elementor's forms, popups or conditional templates. If the one complaint is speed, work through the usual causes of a slow WordPress site first. Elementor's own speed guide starts in the same places: hosting, images, external scripts and other plugins.
The move is easiest on a small site of text and image pages, where Elementor built only a handful of pages, or when a redesign is planned anyway.
What happens if you just deactivate Elementor
Nothing is deleted, and almost everything Elementor drew stops being shown.
Elementor's help center does not describe this, but its code does. Each time a page is saved, Elementor writes a stripped copy of the page's text and images into WordPress's own content field. With the plugin off, WordPress serves that copy inside the theme's ordinary page template. For a page built with the free plugin (Elementor 4.3 on WordPress 7.1), this is what is left.
| What | With Elementor deactivated |
|---|---|
| Headings, paragraphs and their links | Stay, as plain text in the theme's default styles |
| Images | Stay, with their alt text |
| Buttons | Become plain text links |
| Icons | Left as bare graphics, with none of their sizing or color |
| An accordion | Its titles and text, one under another |
| Columns, spacing, backgrounds, colors, fonts | Gone |
| Other shortcodes | Still run |
Elementor's own template shortcodes, such as [elementor-template id="123"] | Printed on the page as text |
| A page set to the "Elementor Canvas" layout | Gains the theme's header and footer, which that layout hid |
| The SEO title and description | Unchanged. An SEO plugin keeps them in its own fields on the page |
Whatever Elementor runs, as opposed to stores, stops with it. Most of this belongs to Elementor Pro.
- Theme Builder templates. The header, footer, single post, archive and 404 templates are no longer used, and the theme's own take their place. On Elementor's Hello theme that is very little: Elementor describes Hello as a blank canvas with only basic styling.
- Forms and popups. The code that receives a form's submission, or opens a popup, is part of the plugin.
- Site Settings. Global colors, global fonts, Theme Style and site-wide custom CSS are no longer applied.
- Custom fonts. The files stay in the uploads folder, where Elementor's documentation says it stores them, and are no longer loaded.
- Custom Code. Any snippet added there, such as an analytics tag, is no longer printed.
The layouts themselves are untouched. Switch Elementor back on and every page looks as it did.
Take an inventory first
Pages are the visible part. List everything else Elementor does before you plan the work. Elementor's menus have moved between versions, so look for each screen by name under "Elementor" and "Templates" in the admin menu.
| What to list | Where to look | Write down |
|---|---|---|
| Pages and posts built with Elementor | The Pages and Posts screens. "Elementor" appears after the title | The address, and how much traffic it gets |
| Header, footer, single post, archive, 404 and WooCommerce templates | "Theme Builder" | Each template's display conditions |
| Saved templates and global widgets | "Saved Templates" | Which pages use each one |
| Popups | "Popups" | Where each one shows, and what triggers it |
| Forms | Each Form widget, under "Actions After Submit" | The fields, who is emailed, any redirect, any mailing list or webhook |
| Form submissions | "Submissions" | Download them with "Export All to CSV" |
| Design settings | "Site Settings" in the Elementor editor. Custom CSS can also sit on a page or on one element | Global colors and fonts, and the CSS worth keeping |
| Custom fonts | "Custom Fonts" | The font files, weights and styles |
| Tracking and other snippets | "Custom Code" | Each snippet, and where it loads |
| Add-ons for Elementor | The Plugins screen, and Elementor's "System Info" screen, which lists plugins that declare compatibility with it | Each add-on widget in use, and where |
If your host gives you WP-CLI, three commands make the lists for you. None of them changes anything. The first lists every page, post and other public content type built with Elementor, drafts included.
wp post list --meta_key=_elementor_edit_mode --post_type=any --fields=ID,post_title,post_type,post_statusThat command leaves out Elementor's own template library, because any skips content types that are hidden from search. List the library separately.
wp post list --post_type=elementor_library --fields=ID,post_title,post_status,_elementor_template_typeThe last column says what each row is: a header, a footer, a popup, a saved page or section. The row of type kit is the "Default Kit", where Elementor keeps Site Settings.
The third command finds pages on the "Elementor Canvas" layout, which will gain a header and footer.
wp post list --post_type=any --meta_key=_wp_page_template --meta_value=elementor_canvas --fields=ID,post_title,post_type,post_statusChoose where you are going
The block editor edits page content under any theme. What replaces the Theme Builder depends on the kind of theme. WordPress's documentation draws the line this way.
| Block theme | Classic theme | |
|---|---|---|
| Header and footer | Template parts, edited with blocks in the Site Editor | Set by the theme's PHP files and its own options |
| Layout of posts, pages, archives, search and 404 | Templates, edited in the Site Editor | PHP templates. A change needs a child theme |
| Colors and type across the site | "Styles" | The Customizer, as far as the theme allows |
| The Site Editor | Yes | No |
A block theme is the closer match if you used the Theme Builder: you keep editing the header, footer and templates on screen. If your header and footer already come from a classic theme, and Elementor built only page content, you can keep the theme and rebuild the pages alone. A site on Hello needs a new theme either way.
Most of what you listed has a counterpart in WordPress itself.
| In Elementor | In WordPress |
|---|---|
| Header and footer templates | Header and footer template parts |
| Single post, archive, 404 and search templates | The "Single Posts", "All Archives", 404 and Search templates |
| Saved sections and pages | Patterns, which you can make from any group of blocks |
| Global widgets, where one edit changes every copy | Synced patterns, which do the same |
| Global colors and fonts, Theme Style | "Styles", in a block theme |
| Custom fonts | The Font Library, under Appearance, then Fonts, from WordPress 7.0 |
| Lists of posts | The Query Loop block |
| Accordions and tabs | The Accordion, Tabs and Details blocks |
| Custom CSS | WordPress's own "Additional CSS". See how to add custom CSS |
Rebuild gradually
Keep Elementor active throughout. It goes on drawing every page you have not reached yet.
Step 1: Make a staging copy and a backup
Do the theme work and your first few pages on a staging copy. Take a full backup of the live site before each step that touches it.
Step 2: Build the theme, header, footer and templates
On the staging copy, activate the new theme. Build the header and footer, set the templates for posts and archives, set colors and type, and save the sections you reuse as patterns.
Then look at several Elementor pages inside the new theme. If a header or footer from Elementor's Theme Builder still shows, remove its display conditions or set it to draft. Elementor's documentation says a template with no conditions, or one saved as a draft, is not displayed.
In a block theme, the Site Editor can export the theme with your templates and styles as a .zip file: open the menu beside "Styles" and choose "Export" under "Tools". Patterns you made are not in that file. Each one has its own "Export as JSON".
Step 3: Switch the live site to the new theme
Install the theme on the live site and activate it at a quiet hour. Retire Elementor's header and footer as you did on the copy. Elementor's listing says it works with any theme that follows WordPress's coding standards, so pages you have not rebuilt keep their layouts. Pages on "Elementor Canvas" go on hiding the header and footer until you rebuild them.
Step 4: Rebuild pages, the busiest first
Start with the pages that get the most visits. Build each page's new version in a new draft, where no visitor sees it, with the old page open beside it.
When the draft is ready, put it in the old page's place. Open the old page in the WordPress editor and press "Edit with WordPress". Elementor warns that the layout may break and need rebuilding. "Continue" saves the page at once in its plain form, so have the new version ready. The plain copy arrives as one Classic block. Delete it, paste the blocks from your draft ("Copy all blocks" in the editor's Options menu copies them), and save.
Rebuilt this way, the page keeps its address, its date, its place in the menus and its SEO fields. The old layout is still stored: "Edit with Elementor" on that page brings it back, in place of the block version, so keep the draft until you are sure.
A page that is mostly text has a shorter way. The Classic block's "Convert to blocks" option turns the plain copy into separate blocks. Check the result block by block.
Step 5: Check each page before the next
- The headings are in order. The editor's Document Overview has an "Outline" tab that shows them.
- Every image is there and has alt text.
- Each link and button goes where it did.
- Each form sends, and its mail arrives. If it does not, see WordPress not sending email.
- The page's "Template" setting names one of the theme's templates, not "Elementor Canvas" or "Elementor Full Width".
- The SEO title and description are still filled in. They are if you rebuilt in place. A page made as a new page starts with none.
- Structured data that came from a widget, such as an Accordion with "FAQ Schema" on, is replaced if you want to keep it. Run the address through Google's Rich Results Test before and after.
- The address is the one the page had. Then no redirect is needed, and links from other sites and from search still arrive.
If you would rather hand the rebuild over, our WordPress design and development service is for pages designed and built in WordPress, and you have the quote before work starts.
Replace what Elementor did beyond layout
Each of these needs a decision. This page names no plugins, because the right one depends on what the old feature did. How to choose a WordPress plugin covers how to judge one and try it safely.
| Elementor feature | Kind of replacement | Before you switch |
|---|---|---|
| Forms | A form plugin whose form goes on the page as a block or a shortcode | Recreate the fields, recipients, redirect and mailing list connection from your inventory. Export the old submissions |
| Popups | A popup plugin. Or drop the popup and put its message on the page | Copy the conditions and triggers |
| Sliders and carousels | A block plugin that adds one. Or a Gallery or Cover block, with no movement | Decide whether the slider earned its place |
| Dynamic content | In a block theme's templates, the blocks for a post's title, date, featured image and terms. A custom field can be bound to a heading, paragraph, image or button, which a developer sets up | List each dynamic tag and the field it reads |
| Tracking code from Custom Code | The service's own plugin, or a snippet in a child theme | Confirm the tag still fires after the switch |
Where no block does the job of a widget, one can be written. A custom block for the block editor is the kind of work our custom development service takes on.
Finish: remove Elementor
Step 1: Confirm nothing still uses it
Run the first inventory command again. It should list nothing. Confirm that the submissions are exported and that every Custom Code snippet, form and popup has its replacement.
Step 2: Deactivate, on the staging copy first
Deactivate the add-ons, Elementor Pro and Elementor. Then walk the site: each page in the menu, a post, an archive, a search, a made-up address for the 404 page, and each form. Repeat on the live site. Switching the plugins back on undoes it.
Step 3: Look for leftovers
A page that was missed shows its plain copy. An Elementor template shortcode that is still in a page is printed as text. This search finds those.
bashwp post list --s='[elementor-template' --post_type=any --fields=ID,post_title,post_type,post_statusStep 4: Delete the plugins
On the Plugins screen, "Delete" removes a deactivated plugin's files. Delete the Hello theme too if nothing uses it.
WordPress lets a plugin clean up its data when it is deleted. Elementor's free plugin removes none of your content or settings at that point: its uninstall routine only clears a scheduled task of its own. What stays in the database is each page's layout, the template library, Elementor's settings and at least one table of its own. A folder named
elementorstays in uploads.
That leftover data is why a reinstalled Elementor shows every design again. Elementor's help center documents no tool that removes it. Leave it until the new site has settled. Removing it after that is a database job for a developer, with a backup taken first.
Measure whether it helped
Measure before you start, or there is nothing to compare with.
Pick a few pages: the home page, the busiest landing page, a post. Run each through PageSpeed Insights and keep the mobile results. The report has two parts. Field data comes from real Chrome users over the previous 28 days, and a page with too few visits shows figures for the whole site instead, or none. Lab data comes from one simulated load, and Google's documentation says its score changes from run to run, so run each page a few times.
After the move, run the same pages again. The lab figures change at once. The field figures need four weeks before they reflect only the new pages. What LCP, INP and CLS measure explains how to read them.
Expect nothing in advance. A page's speed also depends on its hosting, its images and every other plugin, and the move changes none of those.
Common questions
Is there a plugin that converts Elementor pages to Gutenberg blocks?
Neither Elementor nor WordPress provides one. What WordPress can do is turn the plain copy of a page's text and images into simple blocks, with the Classic block's "Convert to blocks" option, and the design is then rebuilt by hand. If you try a converter from anyone else, run it on a staging copy and judge it by the pages it produces.
Will I lose my content if I deactivate Elementor?
No. The text and images stay on each page in plain form, and the layouts stay in the database. Switching Elementor back on restores every design. While it is off you lose the layouts, and with them the Theme Builder templates, forms, popups and site-wide styles.
Can I use Elementor and the block editor on the same site?
Yes. Elementor's own listing says the two work together and that you can decide which editor to use at each point. That is what makes a gradual move possible: rebuilt pages use blocks while Elementor still draws the rest.
Will switching hurt my search rankings?
It should not, if each page keeps its address, its text, its headings, and its SEO title and description. Nothing has moved, so there is nothing to redirect. The risk is in what gets dropped along the way: a section of text, an image's alt text, internal links or structured data. Check each page as you go.
What happens to my site if I just stop paying for Elementor Pro?
Elementor's documentation says the free plugin keeps working and can still be updated. You can no longer update Elementor Pro or add Pro features, and may have only limited access to the ones you have. It also warns that updating the free plugin without Pro can cause compatibility problems, so a lapsed license is not a place to stay for long.
- ResourceWebsite migration checklist: before, during and after the move
- ResourceWebsite redesign SEO checklist: what to record, map and check on a rebuilt site
- Cost guideWordPress migration cost: which job you are being quoted for, and what moves the price
- GuideHow to migrate a WordPress site to a new host without downtime
- GuideHow to migrate from Shopify to WooCommerce
- GuideHow to migrate from Squarespace to WordPress