Van Divi naar Gutenberg migreren: praktisch stappenplan zonder chaos

Een Divi naar Gutenberg migratie klinkt als een klik-en-klaar-klus, maar de realiteit is anders: geen enkele tool doet 100 procent van het werk, en je database zit vol Divi-shortcodes die je alleen kwijtraakt met een gerichte opschoning. Divi is een prima builder om mee te starten, maar een lastige om achter te laten. De shortcodes zitten overal, de CSS en JS die Divi laadt drukt op je Core Web Vitals, en zonder een plan strippen loop je vast op een half-werkende site. Dit stappenplan loopt de zes fases door die ik in mijn praktijk aanhoud, van de audit tot de performance-controle, met eerlijke verwachtingen over wat automatiseerbaar is en wat handwerk blijft.

Reken op drie tot zes werkdagen voor een site van twintig tot veertig pagina’s, en één tot twee weken voor grote sites of shops met veel custom Divi-modules. De grootste tijdrovers zijn niet de tools, maar het handmatig herbouwen van complexe layouts.

Divi naar Gutenberg migratie: waarom overwegen?

De drie redenen die in mijn praktijk het vaakst spelen:

Performance is de eerste. Divi laadt aanzienlijk meer CSS en JavaScript dan een licht Gutenberg-thema. Voor een site die op Core Web Vitals moet scoren (of gewoon snel wil laden), is de overstap naar Gutenberg vaak een halvering van je LCP en TBT. Dat is geen theoretisch getal: het is wat een PageSpeed Insights-rapport na de overstap laat zien.

Tweede reden is lock-in. Divi zet zijn layouts op als shortcodes in de post-content. Op elke pagina, elke keer opnieuw. Als je Divi ooit deactiveert zonder eerst die shortcodes te strippen, zie je op je hele site plotseling teksten zoals [et_pb_section admin_label="section"] staan. Dat is een echte migratie-hobbel, geen kleinigheid.

Derde reden is dat Gutenberg volwassen is. Sinds full site editing (FSE) in WordPress zit, is de block editor niet meer alleen een content-editor. Je bouwt complete templates, headers en footers in blocks. De ecosystemen van Kadence, Blocksy en Twenty Twenty-Five leveren blockpatterns die vergelijkbare functionaliteit bieden als de Divi-module-library, zonder de overhead.

Verbeteren boven herbouwen: als Divi je site draagt en de performance is voldoende, is er geen dwingende reden om over te stappen. Overweeg eerst een cleanup binnen Divi (ongebruikte modules deactiveren, images optimaliseren) voordat je een volledige migratie plant.

Wat je opgeeft en wat je wint

Eerlijk overzicht.

Wat je opgeeft:

• Visuele front-end builder. Gutenberg is minder visueel dan de Divi Visual Builder. Voor content-editors die aan Divi gewend zijn, is dat een gewenning van een paar weken.
• Divi-module-library. Duizend-en-één modules, van sliders tot Divi Blog. Gutenberg heeft alternatieven, maar de curated collectie van Divi is uniek.
• Jaarlijkse Elegant Themes-licentie. Die vervalt (of je houdt hem voor andere sites).

Wat je wint:

• Snelheid. Minder CSS en JavaScript op elke pagina. Betere Core Web Vitals-scores. Snellere laadtijden op mobiel, waar het meeste verkeer vandaan komt.
• WordPress-native. Geen extra plugin-afhankelijkheid. Als WordPress updatet, werkt je editor mee. Geen kans op een Divi-versie die conflict geeft met een nieuwe WordPress-release.
• Kortere ontwikkeltijd voor nieuwe pagina’s zodra je de block-workflow onder de knie hebt. Blockpatterns zijn snel dupliceren en aanpassen.

Migratieplan in 6 fases

Fase 1: audit: welke pagina’s gebruiken welke Divi-modules

Voordat je begint: een lijst van wat je hebt. Ga per pagina langs en noteer welke Divi-modules erop staan. Slider, blogfeed, contactformulier, tabs, accordion, prijzentabellen, testimonials. Dit bepaalt hoe zwaar het handwerk gaat worden.

Pagina’s met alleen tekst, afbeeldingen en kolommen zijn snel over. Pagina’s met complexe Divi-modules (custom sliders, geanimeerde blokken) vragen herontwerp in Gutenberg-blocks of vergelijkbare block-plugins zoals Kadence Blocks.

Fase 2: kies je nieuwe thema (Kadence, Blocksy, Twenty Twenty-Four)

Drie keuzes die in mijn praktijk het meest werken:

• Kadence: licht, snel, met een sterke block-library. Geschikt voor complexere sites.
• Blocksy: ook licht en snel, met een uitgebreid customizer. Iets meer configuratie-opties in de UI.
• Twenty Twenty-Four of Twenty Twenty-Five: de native WordPress-thema’s. Volledig FSE-compatibel, minimale overhead. Perfect voor content-first sites.

Vermijd zware thema’s als vervanger. Als je van Divi weg wil vanwege performance, kies je niet voor Astra Pro of Blocksy Companion Pro als eerste stap. Blijf licht.

Fase 3: Automattic Divi Migration Tools inzetten (eerste 60%)

Automattic (het bedrijf achter WordPress.com) publiceert op GitHub een set migratie-tools voor Divi naar Gutenberg. Deze converteren de meest gebruikte Divi-modules naar hun Gutenberg-equivalenten: tekst-secties, kolommen, afbeeldingen, YouTube-embeds, buttons.

Wat de tool doet: loopt door je posts en pages, herkent Divi-shortcodes, vervangt ze door Gutenberg-block-comments. Werkt goed voor 50 tot 70 procent van je content. De rest (complexe modules, custom Divi-widgets, animaties) moet handmatig.

Alternatief: Nelio Unlocker (betaald) doet iets meer, inclusief Elementor en WPBakery. Voor Divi-only is de gratis GitHub-tool meestal voldoende.

Fase 4: handmatig herbouwen (resterende 40%)

De pagina’s die de tool niet volledig heeft geconverteerd loop je door. Divi-sliders vervang je door een block-slider (Kadence heeft er een, of gebruik een lichte plugin als Smart Slider 3). Pricing tables herbouw je met Kadence Blocks of native Gutenberg-tables. Testimonials worden Kadence testimonial-blocks of Gutenberg columns met quotes.

Reken op één tot twee uur per complexe pagina. Bij twintig complexe pagina’s is dat twee tot vijf werkdagen puur voor herbouw.

Fase 5: Divi-shortcodes opruimen uit database

De kritieke stap. Zelfs na de conversie zitten er restanten van Divi-shortcodes in je database, in oude posts of custom fields. Zolang Divi als thema actief is zie je die niet. Zodra je Divi deactiveert, verschijnen ze als tekst.

Aanpak:

• WP-CLI met search-replace: wp search-replace '[et_pb_section]' '' --dry-run eerst, dan zonder –dry-run. Herhaal voor alle et_pb_* shortcodes.
• Search & Replace Pro (WordPress-plugin): UI voor dezelfde operatie, met preview.
• Custom SQL: voor gevorderden, direct in phpMyAdmin met REGEXP.

Doe dit op staging, niet direct in productie. En met een verse backup ervoor.

Fase 6: performance-controle en Core Web Vitals-check

Meet vooraf op Divi, meet na op Gutenberg. Gebruik PageSpeed Insights en meet minstens vijf pagina’s (homepage, dienst, blog, contact, product). Vergelijk LCP, INP en CLS.

In mijn praktijk zie ik na een Divi naar Gutenberg migratie meestal 30 tot 50 procent verbetering op LCP, en TBT die van rood naar groen springt op simpele content-pagina’s. Op complexe pagina’s met veel embeds is de winst kleiner.

Divi Layout Block als tussenstap (gefaseerd migreren)

Als je niet alles in één keer wilt overzetten, is er een tussenoplossing. Divi Layout Block laat je oude Divi-layouts in Gutenberg embedden. Je bouwt nieuwe pagina’s direct in Gutenberg, en oude Divi-pagina’s blijven werken tot je ze pagina voor pagina omzet.

Deze aanpak is nuttig voor grote sites (meer dan honderd pagina’s) waar een bigbang-migratie te riskant is. Je verlaagt de druk op livegang-dag door in kleine batches over te zetten.

Nadeel: je hebt tijdelijk twee systemen naast elkaar draaien, wat betekent dat Divi CSS/JS nog steeds op elke pagina laadt. De performance-winst komt pas als je Divi helemaal deactiveert.

Tools: gratis vs. betaald (Nelio Unlocker, Automattic tools)

Wat er is op de markt, met eerlijke inschatting:

• Automattic Divi Migration Tools op GitHub: gratis, open source, doet basis-modules. Vereist WP-CLI en enige technische kennis.
• Nelio Unlocker: betaalde SaaS, doet Divi plus Elementor plus WPBakery. Handig als je meerdere sites migreert of complexe modules hebt.
• De ingebouwde migrator van Divi 5: Elegant Themes’ eigen tool om Divi 4 shortcodes te converteren naar Divi 5 blocks. Dat is nog steeds Divi, geen Gutenberg. Verwar niet.

Geen enkele tool doet honderd procent. Reken op 30 tot 50 procent handwerk, ongeacht welke tool je kiest. Dat is geen falen van de tool, dat is de aard van Divi-shortcodes die te complex zijn om zonder verlies te converteren.

Wat het kost en hoe lang het duurt

Voor migraties reken ik 95 euro per uur. Voor Divi naar Gutenberg zit de tijd vooral in het handwerk aan complexe pagina’s en het strippen van shortcodes.

• Kleine site (10 tot 20 pagina’s, standaard modules): twee tot drie werkdagen, circa 1.500 tot 2.500 euro exclusief BTW.
• Middelgrote site (20 tot 40 pagina’s, mix van modules): drie tot zes werkdagen, circa 2.500 tot 5.000 euro exclusief BTW.
• Grote site of WooCommerce-shop met Divi (40+ pagina’s): één tot twee weken, 6.000 tot 12.000 euro exclusief BTW.

Multi-stack: dezelfde logica geldt voor Elementor naar Gutenberg en WPBakery naar Gutenberg. Nelio Unlocker dekt alle drie. De zes fases zijn hetzelfde, alleen de shortcode-syntax verschilt ([et_pb_*] bij Divi, HTML-comments bij Elementor).

Direct contact met de persoon die het werk uitvoert scheelt tijd bij elke escalatie. Voor de generieke checklist naast dit stappenplan: de website migratie checklist, en voor de URL-kant van de migratie de gids over 301 redirects in bulk na een migratie in WordPress (relevant als je permalink-structuur wijzigt).