Migracja z Elementora na Gutenberg: instrukcja wdrożeniowa

Migracja z Elementor na Gutenberg to decyzja, którą najczęściej podejmuje klient Hanse Studio po jednym z trzech triggerów: Lighthouse wynik poniżej 70 i blokująca konwersję wydajność, czwarty critical CVE w pluginie Elementor w 18 miesięcy, lub rebuild i tak planowany w nadchodzącym kwartale. Ten instrukcja wdrożeniowa opisuje fazy migracji, drzewo decyzyjne (kiedy NIE migrować), koszty Hanse Studio oraz pułapki, których nauczyliśmy się na 4 projektach migracyjnych w 2024-2025.

Filozofia Hanse Studio: no Elementor by domyślny standard od kwietnia 2026. Buildery rzadko dają wartość użytkownikowi końcowemu, ponieważ klient nie edytuje layoutu sam, a koszt bloatu (200 KB CSS plus 60 KB JS w bazie) blokuje Lighthouse 99/100. Plus historia CVE Elementor w 2024 (4 critical) podnosi ryzyko security do poziomu, który dla klientów B2B jest nieakceptowalny bez pełnego utwardzanie zabezpieczeńu.

Migracja z Elementor na Gutenberg: instrukcja wdrożeniowa 2026

Migracja to nie jednorazowe button-click, ale projekt 130 do 200 godzin w typowym scenariuszu. Decyzja wymaga analizy ROI plus zrozumienia 5 etapów proces. Poniżej pokazujemy drzewo decyzyjne, fazy implementacji, koszty w cenniku Hanse Studio oraz najczęstsze pułapki, które kosztowały nas 20-40 dodatkowych godzin na pierwszych projektach.

Kiedy warto migrować

Cztery sygnały, że migracja zwróci ROI w 12 do 18 miesięcy. Pierwszy: Lighthouse Performance wynik poniżej 70 mobile. Elementor base konfiguracja z 1-2 widgetami Pro to typowo 65-78 punktów, ledwie się zmienia po basic optymalizacji ponieważ bloat jest w core pluginu. Drugi: rebuild i tak planowany, np. nowy brand, redesign, lub merger. W tym kontekście dodatkowy koszt migracji to 30-50 procent rebuildu, ale daje bazę na 5 lat.

Lighthouse Performance poniżej 70 mobile, blokuje konwersję plus SEO ranking
Rebuild planowany w 6 miesiącach (skala czyni migrację natural fit)
4 lub więcej critical CVE Elementor w 18 miesiącach (precedens Account Takeover sierpień 2024)
Długoterminowy ownership (klient zostaje z tym strona 3-5 lat plus)
License cost optimization (Elementor Pro 199 USD/rok plus widgety, motyw potomny 0)
Klient nie edytuje layoutu sam (95 procent przypadków B2B Hanse Studio)

Trzeci: optymalizacja kosztu licencji. Elementor Pro to 199 USD rocznie plus 60-150 USD za widget marketplace’u plugins. Roczny koszt zestaw technologiiu typowy: 350-500 USD. Plus stała opieka support dla bugów Elementor-specific. Motyw potomny własny build w Gutenberg ma 0 USD recurring license cost, tylko initial build.

Czwarty: długoterminowy ownership. Jeśli klient zostaje z tym strona 3-5 lat plus, motyw potomny własny code jest bardziej future-proof niż dependency on Elementor roadmap. Gutenberg jest WP core, Elementor jest dependent on company strategy (a Elementor Inc. miał już pivot do SaaS w 2023, częściowo zmieniający produkt).

Kiedy NIE warto (zostań przy Elementor)

Trzy scenariusze, gdy migracja to spalanie kasy klienta. Pierwszy: low traffic plus low priority strona. Jeśli strona dostaje 100-500 unikalnych użytkowników miesięcznie, ROI z 130-200 godzin migracji nie zwróci się przez 5 lat. Lepiej zainwestować w content lub paid ads. Drugi: klient absolutnie chce sam edytować layoutu (rzadkie w B2B Hanse Studio, ale realne dla niektórych branż).

Low traffic (poniżej 1000 unikalnych użytkowników miesięcznie) plus low priority strona
Klient absolutnie chce self-edit layoutu i nie zaakceptuje Gutenberg block patterns jako kompromisu
100+ stron z złożonym layoutem (ROI rebuildu nie zwróci się w realistic timeframe)
Sklep WooCommerce z heavy Elementor Pro Templates i karcie produktu własnyization (refactor wymagający osobnej fazy)
Klient nie ma budżetu na initial investment 8000-25000 PLN i nie widzi long-term ROI

Trzeci: 100+ stron z złożonym layoutem. W typowym Elementor konfiguracja każda strona to potencjalnie 30-60 minut manualnego recreate w Gutenberg block patterns. Mnożąc to przez 100 stron, samo recreate to 50-100 godzin. Plus QA, plus SEO migration plan, plus client review iterations. Łatwo dotykamy 250-300 godzin łącznie, czyli ROI nie zwróci się przez 3-5 lat.

Przykład decyzji ze świata: jedna z naszych własnych marek B2B ma stary strona na Elementor, niski traffic, niski priority, brak budżetu na rebuild. Elementor zostaje tam aż do realnego triggera (np. critical CVE bez patcha w 30 dni). Nie pal kasy bez ROI.

Fazy migracji: 5 etapów

Migracja Hanse Studio podzielona jest na 5 faz z dobrze zdefiniowanymi milestone i deliverables. Total scope: 130-200 godzin dla średniego strona (15-40 stron), 60-100 godzin dla small (5-15 stron), 250-400 godzin dla large (40-100 stron). Poniżej breakdown za faza.

Faza 1: Audyt, 8 godzin

Inwentaryzacja Elementor Pro usage: lista templates używanych (Theme Builder header, footer, single post, archive, 404), widget inventory (które są własny vs domyślny standard), motion effects plus animacje (większość nie da się dosłownie odtworzyć w Gutenberg bez własny JS), popups plus forms. Audyt kończy się PDF report z 3 listami: replicate w Gutenberg natural, replicate w własny block, drop (no business value, bloat).

Faza 2: Motyw potomny plus własny blocks konfiguracja, 40-60 godzin

Astra Pro plus własny motyw potomny jako baza. Konfiguracja tokenów projektu w theme.json (paleta kolorów, typografia, spacing), własny blocks PHP-side (server-rendered, szybsze) lub JS-side (interactive, np. carousel). Build block patterns dla wzorców z Elementor (hero CTA, feature grid, testimonial section, pricing table). konfiguracja Astra Header Builder jako zastępstwo Elementor Theme Builder.

Faza 3: Page-by-page rebuild w Gutenberg plus block patterns, 60-100 godzin

Iteracyjny rebuild strony po stronie. Side-by-side: stara Elementor wersja na live (lub staging), nowa Gutenberg wersja w motyw potomny. za page: 30-60 minut manualnego recreate, użycie block patterns dla powtarzających się sekcji. Tempo 1-2 stron dziennie dla średniej złożoności. Client review co tydzień (5-10 stron batch) plus iteracja.

Faza 4: QA visual plus functional plus performance, 16 godzin

Pełen QA suite: visual regression test (Percy lub manual screenshot compare za page), funkcjonalny test (forms, search, filtry WooCommerce jeśli sklep), responsive test (320px, 768px, 1024px, 1440px), Lighthouse audit za page type plus Core Web Vitals baseline measurement. Plus cross-browser test (Chrome, Firefox, Safari mobile plus desktop).

Faza 5: Launch plus redirecty plus monitor, 8 godzin

Final go-live: DB swap stage to prod (lub progressive switch via Cloudflare Page Rules), 301 redirects dla zmienionych URLs (zwykle minimalne, jeśli URL structure zachowane), stronamap regenerate, GSC URL inspection submit, monitor weekly przez 6 tygodni. Wśród narzędzi: ahrefs lub semrush dla traffic baseline plus weekly compare po launch.

Co MUSISZ replicate w Gutenberg blocks

Najczęściej powtarzające się wzorce z Elementor i ich Gutenberg equivalents. To lista wyjściowa, nie wyczerpująca:

Hero z CTA: core/cover z background image plus core/heading plus core/buttons w foreground
Slider/Carousel: własny block JS-side z Swiper.js lub Glide.js (lekkie, 15 KB minified)
Contact form Elementor Pro Forms: Gravity Forms (49 USD/rok), FluentForm (free version OK), lub WPForms
Motion effects plus parallax: CSS własny keyframes plus Intersection Observer API w motyw potomny JS
Theme Builder header plus footer: Astra Header Builder (free w Astra Pro) lub własny block-based template
Popups: własny block plus CSS plus localStorage logic lub dedykowany plugin (Popups by Devscred, free)
Pricing tables: core/columns plus core/group z brand styling w theme.json
Testimonial slider: Swiper.js w własny block lub static block plus CSS animation
Tabs/Accordion: core/details (HTML5 native, no JS needed) lub własny block z JS

Motion effects to typowo największy ból. Elementor Motion Effects daje GUI dla parallax, sticky, scroll triggered animations. W Gutenberg to wszystko trzeba zbudować własny: CSS transforms plus Intersection Observer plus opcjonalnie Lottie animations. Czas: 4-8 godzin za unique animation pattern. Procedura: katalog animacji potrzebnych z audytu, build raz w motyw potomny JS plus dokumentacja użycia.

Własne bloki: PHP-side vs JS-side rendering

własny block w Gutenberg może być renderowany dwoma sposobami: PHP-side (server, szybsze) lub JS-side (client React, interactive). Wybór zależy od zastosowania:

PHP-side: dla static patterns (CTA section, testimonial card, feature grid). Zero JS bundle dla output, lepsze dla Lighthouse
JS-side: dla interactive widgets (carousel, tabs, filtry, search). React component w block.json plus PHP render callback dla initial state
Hybrid: PHP-side initial render plus JS hydration dla interactivity (best of both)

Hanse Studio domyślny standard: PHP-side dla 80 procent własny blocks (CTA, testimonials, feature grids, pricing tables). JS-side tylko dla 3-5 prawdziwie interactive widgets za project. Hybrid pattern dla carousel: PHP-side wyrendowany HTML dla SEO i no-JS fallback, JS hydration dla Swiper interactivity po DOMContentLoaded.

theme.json config dla design tokens: paleta kolorów, spacing scale, typografia. Pozwala na consistent design across blocks bez za-block CSS. Plus Gutenberg editor pokazuje tokens jako presets, łatwiej dla content editorów po launch.

SEO podczas migracji: zachować ranking

SEO ryzyko podczas migracji to URL change plus content structure change plus performance change. Cel: utrzymać 95 procent organic traffic przez 6 miesięcy po launch. Procedura:

URL structure: zachować 1:1 jeśli możliwe (zero redirects needed, najlepszy scenariusz)
Jeśli zmiana URL: plan 301 redirect za URL, plus updated stronamap, plus GSC URL inspection submit
H1 plus meta description: preserve verbatim (lub świadomy upgrade jeśli stara wersja była słaba)
Internal linking: rebuild w nowej structure plus weryfikacja przez Screaming Frog (no broken links)
Schema.org markup: replicate JSON-LD dla pages z structured data (organization, produkt, breadcrumbs)
Monitor GSC weekly przez 6 tygodni: impressions, clicks, average position dla top 50 queries

Plan 301 redirect najlepiej w pluginie Redirection (free, dobrze utrzymywany) lub na poziomie .htaccess dla performance. Hanse Studio domyślny standard: Redirection plugin dla łatwego zarządzania przez klienta (jeśli klient zostawia self-management) lub .htaccess dla stała opieka-managed stronas.

Najczęstszy błąd: launch bez sprawdzenia że stare URL z redirectami nie wracają 404. Weryfikacja: curl -I https://oldurl/path dla każdego top 50 URL z GSC, weryfikacja 301 status plus correct Location header.

Koszty migracji Hanse Studio

Cennik migracji Hanse Studio za project size:

Small (5-15 stron): 8 000-12 000 PLN, timeline 4-6 tygodni
Medium (15-40 stron): 14 000-22 000 PLN, timeline 6-10 tygodni
Large (40-100 stron): 25 000-50 000 PLN, timeline 10-14 tygodni
Sklep WooCommerce (small, do 500 produktów): plus 30-50 procent base ceny
Sklep WooCommerce (large, 500+ produktów): plus 50-100 procent base ceny, wymaga osobnej fazy WC-specific

Cena obejmuje audyt (Faza 1), motyw potomny plus własny blocks (Faza 2), rebuild plus QA (Fazy 3-4), launch plus 30 dni post-launch monitoring (Faza 5). Nie obejmuje: content rewrite (osobny zakres, copywriting), hosting migration (jeśli klient chce zmienić provider), brand redesign (osobny zakres, design).

Po launch klient typowo dochodzi do stała opieka 800 PLN/miesiąc, gdzie monthly utrzymujemy security, performance, plus minor updates. Skontaktuj się w sprawie wyceny twojego projektu, zakres plus timeline dostosowujemy po wstępnym audycie Elementor usage.

Dla głębszego zrozumienia architektury Gutenberg rekomendujemy: oficjalna dokumentacja Gutenberg oraz Patchstack Elementor CVE history jako kontekst threat landscape decyzji migracyjnej.

FAQ

Czy mogę zacząć migrację stopniowo, page-by-page?

Tak, side-by-side rebuild w motyw potomny, switch za page przez WP page template assignment. Procedura: motyw potomny aktywny, Elementor zostaje na stronach z legacy template, Gutenberg z block patterns na nowych. Switch progresywny przez 4-8 tygodni, finalnie usunięcie plugin Elementor gdy zero pages go używa.

Czy Elementor templates da się zaimportować do Gutenberg automatycznie?

Nie. Elementor JSON template format jest incompatible z Gutenberg block parser. Próby konwersji przez third-party tools (były próby w 2022-2023) dawały 30-50 procent accuracy plus wymagały manualnego cleanup. Manualne recreate przez block patterns to nadal najefektywniejsza metoda dla większości projektów.

Co z reusable Templates w Elementor?

Gutenberg ma Reusable Blocks (od WP 5.0) plus Block Patterns (od WP 5.5). Block Patterns to lepszy fit dla migracji, ponieważ są pre-built layouts edytowalne za insert (zmiana w pattern nie modyfikuje istniejących pages). Procedura: zidentyfikuj 10-15 most-used Elementor templates, recreate jako block patterns w motyw potomny, dokumentacja użycia dla content editorów po launch.

Klient nie zauważy różnicy w wp-admin między Elementor a Gutenberg?

Różnica jest, ale można ją zminimalizować. Elementor daje WYSIWYG canvas (drag-drop direct na live preview), Gutenberg daje block editor (linear flow blocks). Block Patterns minimalizują różnicę: klient widzi gotowe sekcje do drag-drop, edycja inline. Szkolenie dla content editorów po launch: typowo 1-2 godziny call, dokumentacja PDF.

Kolejny krok: audyt twojego strona Elementor

Jeśli rozważasz migrację z Elementor i chcesz wiedzieć: czy ROI się zwróci, ile dokładnie kosztuje, ile potrwa, Hanse Studio robi pre-migration audyt w cenie od 1500 PLN. Audyt obejmuje: inwentaryzację Elementor templates plus widgets, mapping na Gutenberg block patterns, drzewo decyzyjne migrate/stay, cost plus timeline estimate. Skontaktuj się w sprawie wyceny, odpowiadamy w 24 godziny w dni robocze.