Als je Divi gebruikt voor je WordPress-website, heb je waarschijnlijk gemerkt dat er steeds meer interesse is in de overstap naar de Gutenberg-blokeditor. Prestatieproblemen en de voortdurende verbeteringen aan Gutenberg hebben deze trend aangewakkerd bij bureaus, teams en website-eigenaren. Bij Seahawk Mediahebben we al veel Divi naar Gutenberg-migraties succesvol afgerond. Deze handleiding beschrijft waarom de overstap de moeite waard is, wat je moet voorbereiden, hoe het proces werkt en wat veelvoorkomende fouten zijn.
Kort samengevat: Divi naar Gutenberg Block Editor
- Divi 5 heeft de shortcode-architectuur, waarop oudere Divi-sites waren gebaseerd, achter zich gelaten, waardoor het voor veel teams een logisch overstapmoment is geworden.
- Gutenberg in combinatie met een blokthema levert aanzienlijk compactere HTML op, wat de Core Web Vitals-scores.
- Met het Divi Layout Block kunt u pagina per pagina migreren, zodat u niet de hele website in één keer hoeft op te bouwen.
- Elke Divi-module heeft een native Gutenberg-equivalent, van blurb-teksten en sliders tot de blogmodule en Theme Builder-sjablonen.
- Door alle URL's ongewijzigd te laten en het schema te controleren voordat de website live gaat, bescherm je je rankings tijdens de overgang.
- Een marketingwebsite van 20 tot 40 pagina's duurt doorgaans één tot drie weken om te migreren, mits de migratie goed is gepland.
Waarom stappen zoveel WordPress-sites over van Divi?
De timing van deze verandering is geen toeval. Elegant Themes heeft Divi op een manier herstructureerd die oudere websites beïnvloedt, en WordPress is inmiddels zo ver ontwikkeld dat de blokeditor in de meeste gevallen aan de behoeften voldoet zonder dat een externe builder nodig is.
Divi 5 heeft zijn eigen architectuur afgeschaft
Elegant Themes heeft Divi 5 opnieuw opgebouwd rond een blokachtig opslagformaat en het shortcodesysteem, waarop eerdere versies vertrouwden, afgeschaft. Als je een Divi 4-website gebruikt, bevindt je content zich in shortcode-opmaak die Divi 5 niet langer als basis gebruikt.
Elegant Themes heeft een migratietool ontwikkeld om de conversie af te handelen, maar die stap zelf bevestigt dat de oude architectuur geleidelijk wordt uitgefaseerd.
Als een migratie sowieso al nodig is, is het de moeite waard om te overwegen of overstappen op native Gutenberg-blokken op de lange termijn niet meer zinvol is voor uw website.
Gutenberg heeft de kloof gedicht
WordPress 6.8 werd in april 2025 uitgebracht met aanzienlijke verbeteringen aan de blokeditor, en versie 6.9 staat gepland voor december 2025. Volledige sitebewerking, globale stijlen via theme.json, template-onderdelen en Query Loop-layouts zijn nu allemaal standaard beschikbaar.
De kloof in mogelijkheden die het gebruik van propriëtaire websitebouwers ooit noodzakelijk maakte, is grotendeels gedicht voor de meeste marketingwebsites en contentintensieve WordPress-installaties. De argumenten om bij een betaalde websitebouwer van een derde partij te blijven, zijn simpelweg minder sterk dan een paar jaar geleden.
Stap over van Divi naar Gutenberg zonder de chaos
Wij helpen je over te stappen van paginabouwers naar de WordPress-blokeditor voor overzichtelijke lay-outs, betere prestaties en zonder SEO-verlies.
Wat levert het je nu precies op om over te stappen op Gutenberg?
Veel artikelen over de migratie van Divi naar Gutenberg richten zich op het proces en laten het eindresultaat volledig buiten beschouwing.
Onze ervaring bij Seahawk Media leert dat verbeteringen zich steevast voordoen op drie gebieden: prestaties, kosten en onderhoudbaarheid op lange termijn.
Meetbare prestatieverbeteringen
Divi laadt op elke pagina zijn eigen CSS- en JavaScript-bundels, ongeacht welke elementen daadwerkelijk in gebruik zijn. Die overhead loopt snel op, vooral op pagina's die slechts een fractie van Divi's modulebibliotheek gebruiken.
Gutenberg, in combinatie met een correct geconfigureerd blokthema, verwijdert die onnodige ballast. De output is gestroomlijnder, wat direct Largest Contentful Paint, Cumulative Layout Shift en Interaction to Next Paint verbetert.
Dit zijn de essentiële webstatistieken die zowel de gebruikerservaring als de zoekresultaten beïnvloeden. Bij elke Divi-naar-Gutenberg-migratie die we bij Seahawk Media hebben uitgevoerd, waren de prestatieverbeteringen consistent en meetbaar.
Geen licentiekosten of verplichtingen
Voor updates en verder gebruik van Divi is een actief Elegant Themes-lidmaatschap vereist. Gutenberg maakt deel uit van de WordPress-kern, dus er zijn geen licentiekosten en geen afhankelijkheid van de prijsbepalingen van een commercieel platform.
Door over te stappen op native blokken is uw content niet langer gebonden aan een eigen bestandsformaat.
Mocht je ooit van thema willen veranderen of van ontwikkelteam willen wisselen, dan blijft je content intact en werkt deze met elke standaard WordPress-installatie.
Wat moet je uitzoeken voordat je ook maar één pagina openslaat?
De voorbereidingsfase is cruciaal voor het succes van Divi-migraties, of juist voor het ontstaan van ernstige problemen.
Teams die zich haasten om pagina's opnieuw op te bouwen voordat het fundamentele werk is afgerond, krijgen te maken met vertragingen, inconsistenties in het ontwerp en SEO-problemen die volledig te voorkomen zijn.
Bij Seahawk Media beschouwen we de audit voorafgaand aan de migratie als een onmisbaar onderdeel van elk project.
Maak een back-up van uw website en bouw een testomgeving
Kloon de volledige live website, inclusief bestanden en database, naar een testomgeving voordat u met de migratie begint. De testomgeving moet een complete, werkende kopie van de live website zijn.
Controleer of uw terugdraaiproces daadwerkelijk werkt voordat u wijzigingen aanbrengt, en niet pas nadat er iets mis is gegaan.
Voer nooit een Divi naar Gutenberg-migratie rechtstreeks uit op je productiesite. Het risico is het simpelweg niet waard, hoe eenvoudig het project ook lijkt.
Controleer elke gebruikte lay-out, sjabloon en module
Loop alle pagina's, berichten, aangepaste berichttypenen taxonomieën op de site door. Documenteer alle Divi Theme Builder-sjablonen, inclusief headers, footers, archieflay-outs en sjablonen voor individuele berichten, aangezien deze specifieke aandacht vereisen en vaak over het hoofd worden gezien tijdens de eerste inventarisatie.
Noteer alle WooCommerce-templates, globale modules, sliders, contactformulieren en ingebedde shortcodes. Hoe completer de inventaris, hoe minder verrassingen je halverwege het project zult tegenkomen.
Projecten die beginnen met een grondige audit nemen aanzienlijk minder tijd in beslag dan projecten waarbij de omvang pas duidelijk wordt wanneer de werkzaamheden al zijn gestart.
Haal je ontwerpsysteem tevoorschijn voordat je iets opnieuw opbouwt
Voordat je ook maar één pagina aanraakt, documenteer je je huidige kleurenpalet, typografische schaal, spatiëringswaarden en knopstijlen. Deze worden direct overgenomen in de theme.json-instellingen, waardoor Gutenberg wereldwijd toegang krijgt tot je ontwerptokens voor elke sjabloon en elk patroon.
Door deze stap te voltooien voordat er met de paginabewerking wordt begonnen, zorgt u ervoor dat uw herbouwde website er visueel consistent uitziet, van de eerste tot de laatste pagina die u migreert.
Het overslaan ervan leidt tot inconsistenties die lastig te herstellen zijn nadat tientallen pagina's al opnieuw zijn opgebouwd.
Divi-modules en hun Gutenberg-vervangers
Een veelvoorkomende vraag die zich voordoet bij de meeste migraties van Divi naar Gutenberg is of de native blokeditor de functionaliteit van Divi wel kan evenaren.
In vrijwel alle gevallen is het antwoord ja. De vervangingen werken anders, maar ze bieden dezelfde functionaliteit. Hier is een kort overzicht van de meest voorkomende Divi-elementen en hun Gutenberg-tegenhangers.
| Divi-element | Gutenberg-vervanging | Notities |
| Sectie / Rij / Kolom | Groeperen / Kolommen / Stapelen | Gebruik lay-outopties en afstandsinstellingen binnen Groep- en Kolommen-blokken |
| Korte beschrijving | Media en tekst of groepsblok | Bouw het eenmaal als een herbruikbaar blokpatroon |
| Knop | Knoppenblokkering | Koppel stijlen aan knopvoorinstellingen in theme.json |
| Afbeelding / Galerij | Afbeelding / Galerij | Behoud alternatieve tekst en schakel native lazy loading in |
| Schuifregelaar | Bedek het blok met patronen of een lichtgewicht schuifregelaar-plugin | Vermijd waar mogelijk sliders die veel JavaScript gebruiken |
| Contactformulier | Een goed onderhouden formulierplugin met blokondersteuning | Migreer bevestigingen, GDPR-meldingen en spamfilters |
| Blogmodule | Querylusblok | Maak kaartlay-outs opnieuw met behulp van variaties op de Query Loop-sjabloon |
| Thema-builder kop- en voettekst | Onderdelen van een sjabloon met een blokthema | Navigeer naar sjablonen- en onderdelenmappen met behulp van patronen |
Hoe voer je de Divi naar Gutenberg-migratie uit zonder je website te beschadigen?
Door een gestructureerd proces te volgen, blijft de migratie in elke fase voorspelbaar en omkeerbaar.
Hier leggen we uit hoe we bij Seahawk Media een Divi naar Gutenberg-migratie uitvoeren, van begin tot livegang.
Stap 1: Inhoud bevriezen en staging vergrendelen
Voordat je ook maar één pagina migreert, moet je de contentupdates op de live website stopzetten en al het werk naar de stagingomgeving verplaatsen.
Als redacteuren blijven publiceren op de live website terwijl de migratie plaatsvindt op de stagingomgeving, ontstaat er een versieverschil dat moeilijk te overbruggen is bij de livegang. Schakel de onderhoudsmodus in op de stagingomgeving om te voorkomen dat er tijdens het bouwproces per ongeluk code wordt gecrawld.
Stap 2: Leg je basislijn vast voordat je iets aanraakt
Voer Lighthouse- en Core Web Vitals -rapporten uit voor uw belangrijkste landingspagina's en sla de resultaten op. Deze cijfers vormen de maatstaf waarmee u na de migratie de prestaties kunt vergelijken om te bevestigen dat deze zijn verbeterd.
Zonder een basislijn ben je aan het gokken. Noteer ook de belangrijkste conversiepaden en gebruikersstromen, zodat je deze tijdens de kwaliteitscontrole kunt verifiëren.
Stap 3: Configureer je blokthema en theme.json
Controleer of je WordPress 6.8 of hoger gebruikt. Installeer een blokthema en voeg de uitgepakte ontwerptokens toe aan theme.json voordat je iets opnieuw opbouwt.
Kleuren, lettertypen, spatiëring en knopstijlen moeten hier globaal worden gedefinieerd. Deze basis zorgt voor visuele consistentie van de vernieuwde website en maakt toekomstige aanpassingen veel eenvoudiger.
Stap 4: Test eerst op pagina's met een laag risico
Kies twee of drie pagina's die niet veel verkeer genereren en voer de door u gekozen migratiemethode daar eerst op uit, of dat nu het Divi Layout Block of een volledige handmatige heropbouw.
Evalueer de uitvoerkwaliteit zorgvuldig voordat u de wijzigingen op de rest van de website doorvoert. Problemen die op testpagina's aan het licht komen, zijn veel gemakkelijker op te lossen dan problemen die pas worden ontdekt nadat vijftig pagina's opnieuw zijn opgebouwd.
Stap 5: Herbouw de sjabloononderdelen en -patronen
Converteer je Divi Theme Builder-, header-, footer- en archiefsjablonen naar blokthema-sjabloononderdelen. Controleer of de navigatie, het sitelogo, de zoekfunctie en de dynamische content correct worden weergegeven.
De onderdelen van de template moeten stabiel zijn voordat de pagina-inhoud wordt gemigreerd, omdat alles ervan afhangt dat ze betrouwbaar worden weergegeven.
Stap 6: Controleer SEO-gelijkheid voordat u live gaat
Behoud elke URL exact zoals deze op de Divi-site verscheen. Als een slug om welke reden dan ook verandert, voeg dan direct een 301-redirect . Controleer de canonical tags, Open Graph-metadata en gestructureerde schema-markup per sjabloontype.
Voer de Rich Results Test van Google uit op een steekproef van pagina's na de heropbouw en vergelijk uw Lighthouse-scores met de basislijn voordat u de live-overstap plant.
Fouten die een Divi-migratie vertragen
Bij Seahawk Media zien we dat de migraties die problemen opleveren een bepaald patroon volgen. De problemen zijn bijna altijd te voorkomen en terug te voeren op beslissingen die vroeg in het project zijn genomen.
- Het overslaan van de contentaudit is de meest voorkomende fout. Teams die beginnen met het herbouwen van pagina's voordat ze een volledige inventarisatie van templates, modules en shortcodes , stuiten halverwege het project steevast op onverwachte elementen. De audit lijkt in eerste instantie tijdrovend, maar bespaart aanzienlijk meer tijd dan het kost.
- Een ander veelvoorkomend probleem is de aanname dat de migratieplugin alles afhandelt. De plugin van Automattic is nuttig, maar ondersteunt niet alle Divi-modules.
- De output van complexe pagina's vereist vaak aanzienlijke opschoning. Teams die de plugin uitvoeren, vluchtig naar de resultaten kijken en het daarbij laten, eindigen vaak met pagina's die restanten van Divi-markup bevatten en later front-endproblemen veroorzaken.
Als u vóór de migratie geen basislijn voor de prestaties vastlegt, kunt u op geen enkele manier aantonen dat de werkzaamheden daadwerkelijk tot verbeteringen hebben geleid. Belanghebbenden en klanten verwachten bewijs van verbetering. Zonder basislijncijfers kunt u dat niet leveren.
Hoe lang duurt een migratie van Divi naar Gutenberg eigenlijk?
Voor een standaard marketingwebsite met 20 tot 40 pagina's moet u rekening houden met 1 tot 3 weken, inclusief het opzetten van het ontwerpsysteem, het opnieuw opbouwen van pagina's, kwaliteitscontrole en SEO-verificatie.
Websites met WooCommerce-integraties, aangepaste berichttypen of honderden pagina's hebben doorgaans een ontwikkeltijd van vier tot acht weken, afhankelijk van de complexiteit van de template en het aantal unieke lay-outs.
De grootste tijdsfactor is de kwaliteit van de audit voorafgaand aan de migratie. Websites die bij ons aankomen met een complete contentinventaris en goed gedocumenteerde Divi-templates migreren sneller dan projecten waarbij de scope pas duidelijk wordt wanneer er al aan gewerkt is. Investeren in die audit vooraf verkort de totale doorlooptijd aanzienlijk.
Klaar om Divi te verlaten? Laten we het goed aanpakken!
De overstap van Divi naar Gutenberg is een van die beslissingen die zich snel terugbetaalt als ze goed gepland is.
Snellere laadtijden, een overzichtelijkere opmaak, geen licentiekosten en een codebasis die aansluit op de WordPress-kern zijn allemaal concrete, meetbare resultaten.
Bij Seahawk Media verzorgen we het volledige proces, van het designsystem en het instellen van het block theme tot QA en SEO-controles, zodat er niets over het hoofd wordt gezien en er niets misgaat.
Ben je klaar voor de overstap? Neem dan vandaag nog contact op met ons team en laten we samen een gestroomlijnde, snellere en duurzame WordPress-website voor je bouwen.
Veelgestelde vragen over Divi naar Guntenberg
Kan een WooCommerce-webshop veilig worden gemigreerd van Divi naar Gutenberg?
Ja, maar er moet extra aandacht worden besteed aan producttemplates, winkelwagen- en afrekenpagina's en eventuele Divi-specifieke WooCommerce- modules. Elk van deze onderdelen moet afzonderlijk worden gecontroleerd tijdens het migratieproces.
Heb ik een nieuw thema nodig om Gutenberg te gebruiken?
Niet per se, maar overschakelen naar een blokthema met theme.json geeft je volledige controle over globale stijlen en ontsluit uitgebreide mogelijkheden voor het bewerken van je website. Een klassiek thema werkt technisch gezien ook, maar het beperkt je mogelijkheden met sjablonen en patronen.
Wat gebeurt er met mijn Divi-shortcodes als ik overstap?
Divi-shortcodes worden niet correct weergegeven in Gutenberg, maar als platte tekst of met een onjuiste opmaak. U moet de op shortcodes gebaseerde inhoud tijdens het migratieproces opnieuw opbouwen met behulp van native blokken.
Zal de overstap naar Gutenberg mijn zoekresultaten beïnvloeden?
Niet als de migratie correct wordt uitgevoerd. Door alle URL's ongewijzigd te laten, metadata per sjabloontype te verifiëren en schema-opmaak te behouden, worden dalingen in de ranking tijdens en na de overgang voorkomen.
