Migrating from Elementor to native Gutenberg & ACF blocks

Elementor gets you live fast, but the trade-off shows up later: shortcode-style markup bloat, slower Core Web Vitals, lock-in, and licence costs that scale with every site. More agencies are moving clients onto native Gutenberg blocks backed by ACF — leaner output, full control of markup, and no dependency on a third-party builder. This guide covers why teams leave, what breaks in naive migrations, and the workflow that actually works.

Why teams leave Elementor

• arrow_rightPerformance: native blocks output clean HTML and far less inline CSS/JS.
• arrow_rightOwnership: ACF blocks are your code, your markup — no builder runtime to ship.
• arrow_rightEditor consistency: content editors work in one editor (Gutenberg), not two.
• arrow_rightCost: no per-site builder licences across a portfolio of client sites.
• arrow_rightMaintenance: fewer plugin conflicts and update-related breakages on client sites.

Why the naive approach fails

Copying the rendered HTML out of Elementor and pasting it into a Classic block keeps all the wrapper divs and inline styles you were trying to escape. You end up with un-editable markup that is not a real block at all. The goal is to map each Elementor section to a semantic ACF block — a hero becomes your hero block, a testimonials widget becomes your testimonial block — with the content placed in the correct fields.

How Elementor stores content

Elementor widgets to ACF blocks

A clean migration path

1. 1Register your target ACF block library on the new build and export the field groups as JSON.
2. 2Crawl the live Elementor pages so the rendered content (post-builder) is what gets classified.
3. 3Let each section map to its matching ACF block; anything ambiguous falls back to an editable text block, so you never lose content.
4. 4Review confidence scores, fix the few that need it, and import as drafts.
5. 5Rebuild Theme Builder templates on the new theme.
6. 6QA, load redirects, preserve SEO, deactivate Elementor on staging.

Pre-migration checklist

1. 1Full site backup before any changes.
2. 2Elementor Pro features inventory: Theme Builder, popups, forms, WooCommerce widgets.
3. 3URL map for slug changes.
4. 4ACF block library registered and tested on staging.
5. 5Client expectation set: design QA required, not pixel-perfect match.
6. 6Lighthouse baseline on key pages for before/after comparison.

Elementor Pro considerations

Elementor Pro adds Theme Builder, popups, forms, and dynamic tags. None of these migrate via page-body import alone. Theme Builder templates need rebuilding. Popups need inventory and recreation. Forms need new handlers. Dynamic tags need converting to ACF block template logic or native WordPress queries.

Common mistakes

• arrow_rightUsing Elementor's export/import tool — moves Elementor data, not ACF blocks.
• arrow_rightPasting HTML into Classic blocks — preserves builder bloat.
• arrow_rightParsing _elementor_data JSON manually — fragile and misses rendered content.
• arrow_rightDeactivating Elementor before crawl — pages render empty.
• arrow_rightIgnoring Elementor popups — they are not in page crawls.
• arrow_rightNo fallback block — ambiguous sections dropped instead of preserved.
• arrow_rightSkipping performance benchmark — client does not see the value of the rebuild.

Performance and SEO

Elementor is a common cause of poor Core Web Vitals. Rebuilding on ACF blocks typically improves LCP and TBT significantly on the same hosting. Document the before/after. Preserve SEO with redirects, metadata, and heading structure — see page builder performance problems and rebuild without losing SEO. Integrate Yoast on the new build.

The result is a site built entirely from your own blocks — no Elementor plugin required to render it, and content your editors can actually maintain. AIRA automates the crawl, classification, and bundle generation. Same approach as Divi and WPBakery migrations.

Scaling Elementor migration across a portfolio

If you manage multiple Elementor clients, standardise the destination block library first. The same hero block, card grid, and testimonial repeater work whether the source is Elementor, Divi, or WPBakery. Register the library once, export JSON once, and reuse the spec across migrations. Agencies running three or more builder exits per quarter typically see the ROI on block library standardisation within the second migration.

Elementor-specific review priorities

1. 1Nested columns — classifier may merge or split incorrectly.
2. 2Global widgets — verify consistency across all pages using the same widget.
3. 3Template overrides — pages using Elementor canvas template may have no theme header/footer.
4. 4Motion effects and custom CSS — cosmetic; do not try to replicate, confirm content migrated.
5. 5Responsive visibility settings — hidden mobile sections may be skipped by crawler; check manually.
6. 6Icon boxes with custom SVG — sideload icons or map to theme icon set.

Timeline expectations

For a 40-page Elementor site with a standard block library already built: one day for crawl and bundle generation, one to two days for review and import, one day for homepage and landing page QA, half a day for redirect and SEO setup. Add block development time if the library does not exist yet — typically two to three days for a standard set of eight to twelve blocks.

Post-migration Elementor removal

1. 1Confirm no pages depend on Elementor — including WooCommerce and archive templates.
2. 2Deactivate Elementor and Elementor Pro on staging.
3. 3Verify all pages render from ACF blocks only.
4. 4Remove both plugins from production after cutover.
5. 5Cancel Elementor licence — document savings in client handover.
6. 6Search for orphaned Elementor CSS in uploads — optional cleanup.

Elementor Kit and site settings

Elementor Site Settings control global colours, typography, buttons, and form styling. These do not migrate — they are builder config. Map the design tokens to your new theme's theme.json or SCSS variables. Clients sometimes ask where the old global font went. It was in Elementor Kit, not in page content. Document the mapping: old Elementor primary colour → new theme --color-primary.

Handling Elementor Loop Grid and Loop Carousel

Elementor Pro loop widgets render dynamic post grids. The classifier sees the rendered cards but not the query. Document post type, taxonomy filters, post count, and sort order for each loop. Rebuild in your ACF posts grid block or archive template. This is manual work on every builder — not specific to Elementor — but Elementor Pro's loop builder is common on marketing sites.

AIRA workflow for Elementor sites

Upload your ACF JSON export. Submit the Elementor site sitemap. AIRA crawls rendered pages, classifies sections, and produces a bundle with confidence scores. Review in the browser, fix low-confidence blocks, download bundle.json, import via ACF Migrate plugin as drafts. One credit per page at commit. Import is free. Full workflow in how to migrate into ACF blocks and import bundle guide.

Elementor migration cost comparison

Manual Elementor-to-ACF migration on a 40-page site typically takes 80–120 hours of developer or content-editor time. Automated classification plus review reduces that to 8–16 hours. At agency rates, that is thousands of pounds in saved margin per project. The block library development cost is amortised across every subsequent migration when you standardise. See AIRA vs manual migration for a full comparison.

What editors gain after Elementor

Editors trade Elementor's visual drag-and-drop for labelled ACF fields in Gutenberg. The learning curve is real but short. The long-term gain: no accidental layout breaks, no z-index wars, no 'I dragged a column and the whole page broke.' Content editors edit content; developers own layout. That separation is what most agencies want after years of Elementor support tickets.

Elementor and e-commerce pages

WooCommerce product pages, cart, and checkout built with Elementor widgets need separate audit. Standard WooCommerce templates often perform better than Elementor-built shop pages. Consider rebuilding shop templates on native WooCommerce templates or ACF blocks while migrating marketing pages. Product descriptions in Elementor tabs may need manual mapping if the classifier cannot split tab content into distinct fields.

Pre-launch Elementor deactivation test

On staging, after all pages are imported and QA'd: deactivate Elementor and Elementor Pro. Load every migrated page, the blog, archives, and WooCommerce flows. If anything breaks, it depends on Elementor — find and fix before production cutover. This test takes 30 minutes and prevents launch-day emergencies.

Elementor is the most common builder on agency rebuild briefs — the workflow is well-tested. Register blocks, export JSON, crawl, review, import, QA, remove Elementor. The investment is in block development and homepage review, not in inventing a migration approach from scratch.

Pair this migration with ACF JSON export discipline and import bundle QA habits. Elementor exits are routine for teams that have standardised the block library — the builder changes; the pipeline does not.

If you are quoting an Elementor exit this quarter, build the block library first, run a pilot crawl on the homepage, and validate the bundle import on staging before committing to a fixed-price content migration line item. One homepage pilot de-risks the entire project and gives you real review-time data for the statement of work.

See AIRA vs manual migration if you need numbers for the proposal — Elementor sites are where automated mapping saves the most developer time on typical agency rebuilds.

Elementor migration succeeds when you extract content into fields, not when you copy markup into blocks.

What to read next on this rebuild

Elementor migrations are rarely pages-only. Agency sites built in Elementor almost always have portfolio grids, case study singles, or team archives powered by custom post types — those records do not move when you crawl marketing pages. Pair this guide with the custom post type migration guide if the old site has /work/ or /portfolio/ URLs. For launch, work through the redirect map guide and migration QA checklist before you deactivate Elementor.