Elementor to Gutenberg migration: runbook

Migration from Elementor to Gutenberg is a decision a Hanse Studio client typically makes after one of three triggers: a Lighthouse score below 70 that blocks conversion, a fourth critical Elementor CVE in 18 months, or a rebuild already planned for the next quarter. This runbook covers the migration phases, the decision tree (when not to migrate), Hanse Studio pricing and the traps we learned the hard way across 4 migration projects in 2024 and 2025.

Hanse Studio philosophy: no Elementor by default since April 2026. Builders rarely create value for the end user, because the client does not edit layout themselves, and the cost of bloat (200 KB CSS plus 60 KB JS at baseline) blocks Lighthouse 99/100. Plus the Elementor CVE history in 2024 (4 critical) raises security risk to a level B2B clients cannot accept without full hardening.

Elementor to Gutenberg migration: 2026 runbook

Migration is not a one-click button, it is a 130 to 200 hour project in a typical scenario. The decision requires an ROI analysis plus an understanding of the 5 phases of the workflow. Below we cover the decision tree, the implementation phases, Hanse Studio pricing and the most common traps that cost us 20 to 40 extra hours on our first projects.

When migration pays off

Four signals that migration will return ROI in 12 to 18 months. First: Lighthouse Performance below 70 mobile. An Elementor base setup with 1 or 2 Pro widgets typically sits at 65 to 78 points and barely moves after basic optimisation, because the bloat lives inside the plugin core. Second: a rebuild is planned anyway, e.g. new brand, redesign or merger. In that context the migration adds 30 to 50 percent to the rebuild but yields a 5 year baseline.

Lighthouse Performance under 70 mobile, blocks conversion and SEO ranking
Rebuild planned within 6 months (scale makes migration a natural fit)
4 or more Elementor critical CVEs in 18 months (Account Takeover precedent, August 2024)
Long-term ownership (the client stays with this site for 3 to 5 years plus)
License cost optimisation (Elementor Pro 199 USD/year plus widget marketplace, child theme 0)
Client does not edit layout themselves (95 percent of Hanse Studio B2B cases)

Third: license cost optimisation. Elementor Pro is 199 USD annually plus 60 to 150 USD for widget marketplace plugins. Typical annual stack cost: 350 to 500 USD. Plus retainer support for Elementor-specific bugs. A custom Gutenberg child theme has 0 USD recurring license cost, only the initial build.

Fourth: long-term ownership. If a client stays with the site for 3 to 5 years plus, custom child theme code is more future-proof than dependency on the Elementor roadmap. Gutenberg is WP core, Elementor depends on company strategy (Elementor Inc. already pivoted partially to SaaS in 2023, partly changing the product).

When migration does not pay off (stay on Elementor)

Three scenarios where migration burns client money. First: low traffic plus low priority site. If the site receives 100 to 500 unique users monthly, the ROI of 130 to 200 hours of migration will not return within 5 years. Better invest in content or paid ads. Second: the client absolutely wants to self-edit layout (rare in Hanse Studio B2B, but real in some niches).

Low traffic (under 1000 unique users monthly) plus low priority site
The client absolutely wants self-edit and will not accept Gutenberg block patterns as a compromise
100+ pages with complex layout (rebuild ROI will not return in a realistic timeframe)
WooCommerce shop with heavy Elementor Pro Templates and product page customisation (refactor requires a separate phase)
The client has no budget for an initial investment of 8000 to 25000 PLN and does not see long-term ROI

Third: 100+ pages with complex layout. In a typical Elementor setup each page is potentially 30 to 60 minutes of manual recreation in Gutenberg block patterns. Multiplied by 100 pages, the recreation alone is 50 to 100 hours. Plus QA, plus SEO migration plan, plus client review iterations. It is easy to reach 250 to 300 total hours, meaning ROI will not return within 3 to 5 years.

Real-world example: one of our own B2B sister brands runs a legacy Elementor site with low traffic, low priority, and no rebuild budget. Elementor stays there until a real trigger arrives (e.g. a critical CVE without a patch within 30 days). Do not burn money without ROI.

Migration phases: 5 stages

Hanse Studio migration is split into 5 phases with well-defined milestones and deliverables. Total scope: 130 to 200 hours for a mid-size site (15 to 40 pages), 60 to 100 hours for small (5 to 15 pages), 250 to 400 hours for large (40 to 100 pages). Below is the breakdown per phase.

Phase 1: Audit, 8 hours

Elementor Pro inventory: list of templates in use (Theme Builder header, footer, single post, archive, 404), widget inventory (custom vs default), motion effects and animations (most are not portable to Gutenberg without custom JS), popups and forms. The audit ends with a PDF report containing 3 lists: replicate in Gutenberg naturally, replicate in a custom block, drop (no business value, bloat).

Phase 2: Child theme plus custom blocks setup, 40 to 60 hours

Astra Pro plus a custom child theme as the base. Design tokens setup in theme.json (color palette, typography, spacing), custom blocks PHP-side (server rendered, faster) or JS-side (interactive, e.g. carousel). Build block patterns for Elementor patterns (hero CTA, feature grid, testimonial section, pricing table). Astra Header Builder setup as the Elementor Theme Builder replacement.

Phase 3: Page-by-page rebuild in Gutenberg plus block patterns, 60 to 100 hours

Iterative page-by-page rebuild. Side-by-side: the old Elementor version stays live (or in staging), the new Gutenberg version lives in the child theme. Per page: 30 to 60 minutes of manual recreation, with block patterns reused for recurring sections. Tempo: 1 to 2 pages per day for medium complexity. Client review weekly (5 to 10 page batches) plus iteration.

Phase 4: QA visual plus functional plus performance, 16 hours

Full QA suite: visual regression test (Percy or manual screenshot compare per page), functional test (forms, search, WooCommerce filters if a shop), responsive test (320px, 768px, 1024px, 1440px), Lighthouse audit per page type plus Core Web Vitals baseline measurement. Plus cross-browser test (Chrome, Firefox, Safari mobile plus desktop).

Phase 5: Launch plus redirects plus monitor, 8 hours

Final go-live: DB swap from stage to prod (or progressive switch via Cloudflare Page Rules), 301 redirects for changed URLs (usually minimal if URL structure preserved), sitemap regenerate, GSC URL inspection submit, weekly monitoring for 6 weeks. Tools include ahrefs or semrush for traffic baseline plus weekly compare after launch.

What you MUST replicate in Gutenberg blocks

The most common Elementor patterns and their Gutenberg equivalents. This is a starting list, not exhaustive:

Hero with CTA: core/cover with a background image plus core/heading plus core/buttons in the foreground
Slider/Carousel: a custom JS-side block with Swiper.js or Glide.js (lightweight, 15 KB minified)
Elementor Pro Forms contact form: Gravity Forms (49 USD/year), FluentForm (free version is fine) or WPForms
Motion effects plus parallax: CSS custom keyframes plus the Intersection Observer API in child theme JS
Theme Builder header plus footer: Astra Header Builder (free with Astra Pro) or a custom block-based template
Popups: a custom block plus CSS plus localStorage logic, or a dedicated plugin (Popups by Devscred, free)
Pricing tables: core/columns plus core/group with brand styling in theme.json
Testimonial slider: Swiper.js in a custom block, or a static block plus CSS animation
Tabs/Accordion: core/details (native HTML5, no JS needed) or a custom block with JS

Motion effects are typically the biggest pain. Elementor Motion Effects offers a GUI for parallax, sticky and scroll-triggered animations. In Gutenberg all of that has to be built custom: CSS transforms plus Intersection Observer plus optionally Lottie animations. Time: 4 to 8 hours per unique animation pattern. Procedure: catalogue the animations needed from the audit, build once in child theme JS plus document usage.

Custom blocks: PHP-side vs JS-side rendering

A custom Gutenberg block can be rendered two ways: PHP-side (server, faster) or JS-side (client React, interactive). The choice depends on the use case:

PHP-side: for static patterns (CTA section, testimonial card, feature grid). Zero JS bundle for output, better for Lighthouse
JS-side: for interactive widgets (carousel, tabs, filters, search). React component in block.json plus a PHP render callback for the initial state
Hybrid: PHP-side initial render plus JS hydration for interactivity (best of both worlds)

Hanse Studio default: PHP-side for 80 percent of custom blocks (CTA, testimonials, feature grids, pricing tables). JS-side only for 3 to 5 truly interactive widgets per project. Hybrid pattern for carousel: PHP-side renders HTML for SEO and no-JS fallback, JS hydration runs Swiper interactivity after DOMContentLoaded.

theme.json config for design tokens: color palette, spacing scale, typography. It enables consistent design across blocks without per-block CSS. Plus the Gutenberg editor exposes tokens as presets, which is easier for content editors after launch.

SEO during migration: preserve ranking

SEO risk during migration is URL change plus content structure change plus performance change. Goal: hold 95 percent of organic traffic for 6 months after launch. Procedure:

URL structure: preserve 1:1 if possible (zero redirects needed, best scenario)
If URL change: 301 redirect plan per URL, plus updated sitemap, plus GSC URL inspection submit
H1 plus meta description: preserve verbatim (or a conscious upgrade if the old version was weak)
Internal linking: rebuild in the new structure plus verify with Screaming Frog (no broken links)
Schema.org markup: replicate JSON-LD for pages with structured data (organization, product, breadcrumbs)
Monitor GSC weekly for 6 weeks: impressions, clicks, average position for the top 50 queries

301 redirect plan: best inside the Redirection plugin (free, well maintained) or at the .htaccess level for performance. Hanse Studio default: the Redirection plugin for easy client management (when the client self-manages) or .htaccess for retainer-managed sites.

Most common mistake: launch without verifying that old URLs with redirects do not return 404. Verification: curl -I https://oldurl/path for every top 50 URL from GSC, checking 301 status plus correct Location header.

Hanse Studio migration pricing

Hanse Studio migration price per project size:

Small (5 to 15 pages): 8 000 to 12 000 PLN, timeline 4 to 6 weeks
Medium (15 to 40 pages): 14 000 to 22 000 PLN, timeline 6 to 10 weeks
Large (40 to 100 pages): 25 000 to 50 000 PLN, timeline 10 to 14 weeks
WooCommerce shop (small, up to 500 products): plus 30 to 50 percent of the base price
WooCommerce shop (large, 500+ products): plus 50 to 100 percent, requires a WC-specific phase

The price covers the audit (Phase 1), child theme plus custom blocks (Phase 2), rebuild plus QA (Phases 3 and 4), launch plus 30 day post-launch monitoring (Phase 5). It does not cover: content rewrite (separate scope, copywriting), hosting migration (if the client wants a new provider), brand redesign (separate scope, design).

After launch the client typically continues with the 800 PLN/month retainer, where we maintain security, performance and minor updates monthly. Contact us for a quote on your project; scope and timeline adapt after the initial Elementor usage audit.

For a deeper Gutenberg architecture understanding we recommend: official Gutenberg documentation and Patchstack Elementor CVE history as threat landscape context for the migration decision.

FAQ

Can I migrate gradually, page by page?

Yes, a side-by-side rebuild inside the child theme with a switch per page through WP page template assignment. Procedure: child theme active, Elementor stays on pages with legacy template, Gutenberg with block patterns lives on new ones. Progressive switch over 4 to 8 weeks, with final removal of the Elementor plugin once zero pages use it.

Can Elementor templates be imported into Gutenberg automatically?

No. The Elementor JSON template format is incompatible with the Gutenberg block parser. Attempts to convert via third-party tools (there were trials in 2022 and 2023) yielded 30 to 50 percent accuracy and required manual cleanup. Manual recreation through block patterns is still the most efficient method for most projects.

What about Elementor Reusable Templates?

Gutenberg has Reusable Blocks (since WP 5.0) plus Block Patterns (since WP 5.5). Block Patterns are a better fit for migration because they are pre-built layouts editable per insert (a pattern change does not modify existing pages). Procedure: identify the 10 to 15 most-used Elementor templates, recreate them as block patterns in the child theme, document usage for content editors after launch.

Will the client notice the wp-admin difference between Elementor and Gutenberg?

Yes, but it can be minimised. Elementor gives a WYSIWYG canvas (drag-drop directly on live preview), Gutenberg gives a block editor (linear block flow). Block Patterns minimise the gap: the client sees ready-made sections to drag-drop with inline editing. Training for content editors after launch: typically a 1 to 2 hour call plus a PDF document.

Next step: audit your Elementor site

If you are considering migration from Elementor and want to know: whether ROI returns, what exactly it costs, how long it will take, Hanse Studio runs a pre-migration audit from 1500 PLN. The audit covers: Elementor templates and widgets inventory, mapping to Gutenberg block patterns, migrate/stay decision tree, plus cost and timeline estimate. Contact us for a quote, we reply within 24 hours on business days.