Search “how to migrate from Elementor to block themes” and you get two kinds of results: marketing posts that say it’s easier than you think, and forum threads full of people who tried it and got stuck halfway through. Neither one tells you what actually happens when you open the Site Editor and start moving a real site over. This article covers what converts, what you rebuild by hand, how long that rebuild tends to take by site type, and a checklist you can follow while you do it. It does not cover no-code shortcuts or plugin converters that promise to turn your Elementor layout into blocks automatically, because none of them do that reliably on anything past a simple page. I build and sell WordPress themes for a living, so I’ve done this migration more than once, on other people’s sites and my own, and this is what I’ve learned from doing it rather than reading about it.
1. Why this migration isn’t a simple export/import
The core difference is structural. Elementor stores a page-builder representation of the page as JSON in WordPress post meta. That JSON contains the page hierarchy, widgets, settings, styles, and responsive values, which Elementor’s rendering system uses to generate the frontend output.
WordPress’s block editor takes a different approach. Block content is serialized into post_content as block markup: HTML combined with wp: comment delimiters and block attributes. WordPress parses that markup into blocks and renders it, with dynamic blocks generating their output server-side when necessary.
These are two different storage formats with no shared structure to map between them. A plugin that claims to “convert” Elementor pages to blocks has to guess at intent: it can turn a text widget into a paragraph block reasonably well, but it has no way to know that a nested Elementor section with three inner columns and a background overlay should become a group block with specific spacing and a cover block underneath. It just doesn’t have that information to work with. This is why the difficulty you’ll read about later in this article isn’t exaggerated. It’s a direct consequence of two incompatible data models, not a matter of the right tool not existing yet.
2. What converts cleanly
Some content moves over with light manual work rather than a full rebuild. If your site is mostly built from these, the migration is closer to a few afternoons than a few weeks.
- Static text and image pages with a straightforward top-to-bottom layout
- Standard blog post layouts (title, featured image, body text, maybe an author byline)
- Simple header and footer structures without mega-menus or sticky animation tricks
- Basic column layouts that don’t nest widgets inside other widgets
The common thread is simplicity. If a page is basically text and images in a predictable order, you can recreate it in the Site Editor by hand in a fraction of the time it took to build originally, because you’re not fighting Elementor’s settings panels or waiting on it to re-render every time you tweak a margin.
3. What needs to be rebuilt from scratch
This is the list that determines whether your migration takes a weekend or a month.
- WooCommerce product and shop templates with custom layouts (anything beyond the default archive and single product views)
- Elementor Pro widgets, including forms, popups, and conditional display logic
- Deeply nested sections and inner sections, especially anything more than two or three levels deep
- Custom CSS written against Elementor’s own class structure (
.elementor-element-*selectors don’t exist once Elementor is gone) - Anything built with third-party Elementor addons, such as Essential Addons or JetElements
None of this transfers. You’re not editing an old version of it into shape, you’re building it again using block editor tools and, in some cases, a block theme’s native template system instead of a plugin’s widget library. The custom CSS point trips people up the most: even CSS that looks generic often targets Elementor-specific class names, so it silently stops applying once those classes are gone and the page just looks wrong with no error to point to why.
4. Real-world migration timelines
These are hour ranges based on actual rebuilds, not estimates pulled from a sales page. Your mileage depends heavily on how much of the site falls into the “rebuild from scratch” category above.
- Simple marketing site (5-10 pages): 8-20 hours. Mostly driven by how many pages use Elementor Pro widgets versus plain text and image layouts.
- Content or blog-heavy site: 15-30 hours. Post templates convert fairly fast; the time sink is usually a handful of older posts with embedded Elementor shortcodes or custom layouts scattered through years of content.
- WooCommerce store: 30-80+ hours. Product count matters less than how customized the shop and product templates are. A store running default WooCommerce templates with Elementor only on the homepage migrates far faster than one where every product page has a custom Elementor layout.
- Directory or listing site: 25-60 hours. Driven by how many custom fields and filters are wired into Elementor’s dynamic content features, since those need to be rebuilt using block bindings or a custom template rather than Elementor’s dynamic tags.
The single biggest time driver across all four is widget count on custom-built pages, followed by the volume of Elementor-specific custom CSS. Product count and post count matter less than people expect, because once you’ve rebuilt one product template or one post layout, applying it to the rest is fast.
5. Template recovery strategies
Before touching anything, get a record of what exists. This section is the part most people skip and then regret.
- Export and archive your Elementor templates first. Elementor lets you export templates as JSON files. Do this for every page and template before you deactivate the plugin, even pages you think you won’t need again. It’s a small file and cheap insurance.
- Take full-page screenshots of every page you’ll migrate. Use a full-page capture tool, not just what fits in the viewport. This becomes your visual reference once Elementor’s editor is gone.
- Rebuild in the Site Editor using the old version as a spec, not a source. Don’t try to recreate every visual detail exactly. Use the screenshots to capture intent (this page needs a two-column layout with an image on the left) rather than pixel-matching spacing that Elementor calculated differently than a block theme will.
- Decide what to do with leftover
_elementor_datapost meta. Once a page no longer uses Elementor, that meta field is dead weight sitting in your database. You can leave it (it won’t break anything, but it adds bloat and can confuse future edits if Elementor is ever reactivated) or clean it up with a database query once you’re confident the migration is final. Leaving it is the safer default until you’re sure. - Keep a rollback path until the new build is verified. Work on a staging site or take a full database snapshot before you start. Migrations that look finished often reveal a broken form or a missing custom field a week later, and you want a way back that doesn’t involve rebuilding from screenshots twice.
6. Step-by-step migration checklist
- Export every Elementor template and page as JSON and store the files somewhere outside the site.
- Take full-page screenshots of every page and save them with clear filenames matching the page URLs.
- Set up a staging environment or take a full database backup.
- Install and activate your block theme on staging, not on the live site.
- Rebuild simple pages first (static text/image pages, standard headers and footers) to confirm the theme’s block patterns work as expected.
- Rebuild blog post templates and check them against a sample of five to ten real posts, not just one test post.
- Rebuild any WooCommerce templates, starting with the shop and single product templates before touching category-specific variations.
- Rebuild anything that used Elementor Pro widgets (forms, popups) using block editor equivalents or a dedicated plugin for that specific function.
- Audit and rewrite custom CSS, checking each rule against the new block markup’s class names.
- Test every page on mobile widths, since Elementor and block themes handle responsive breakpoints differently.
- Decide on and execute your
_elementor_datacleanup plan. - Push staging to production only after a full page-by-page comparison against your screenshots.
- Keep the staging site and database snapshot for at least a few weeks after launch.
7. When migrating isn’t worth it yet
Not every site should do this right now. If your WooCommerce store has heavy Elementor customization across dozens of product templates, the rebuild time can exceed what the performance or ownership benefits are worth this year. If you manage a site for a non-technical client who needs to approve every visual change and doesn’t have time to review a full rebuild, that’s a conversation to have before you start, not a surprise to hand them after. And if you’re working against a tight deadline, a partial migration done under pressure tends to leave broken pages live longer than a delayed, complete one would. In any of these cases, staying on Elementor for now and revisiting the migration when you have more runway is a reasonable call, not a failure to modernize.
Wrapping Up
The trade-off is straightforward once you’ve been through it: you get more control over your markup and generally faster page loads, in exchange for real rebuild hours that don’t shrink no matter how the migration is framed. Budget the time honestly, keep your export and rollback steps in place, and treat the old Elementor build as a reference, not something you’re trying to recreate exactly.
Dannci builds and sells WordPress themes through Themnific, where he works on the theme code, documentation, and site architecture directly rather than delegating it. He also maintains Dannci, a free-theme project, and has published theme profiles on ThemeForest. He writes about WordPress theme security, accessibility, and maintenance based on the code he ships, not general industry commentary.
Last modified:




