Divi 5 is eindelijk hier. En nee, dit is geen kleine update met wat bugfixes en een nieuw icoontje. Elegant Themes heeft de boel volledig opnieuw gebouwd.
Als je de afgelopen maanden niet hebt opgelet, heb je wat gemist. Semantic Elements, Canvases, Nested Modules, Stacked Presets... Het klinkt als marketing-jargon, maar deze features veranderen fundamenteel hoe je met Divi werkt.
Laat me je meenemen door de belangrijkste updates.
Semantic Elements & Custom HTML Wrappers
Dit is misschien wel de meest onderschatte feature van Divi 5.
Tot nu toe spuugde Divi vooral <div> tags uit. Prima voor styling, maar een ramp voor accessibility en SEO. Screen readers hadden geen idee wat je navigation was, wat je main content was, of waar je footer begon.
Dat is nu anders.
Je kunt nu het element type van elke module wijzigen naar semantic tags zoals nav, section, header, article, footer en button. Bouw je een custom menu met Text modules en off-canvas mega menus? Verander de semantic tag naar nav zodat screen readers weten wat het is.
Maar het wordt beter. Je kunt nu ook custom HTML toevoegen vóór en ná elk element. Dit opent mogelijkheden die voorheen simpelweg niet bestonden:
- Custom wrapper divs rond modules
- Helper markup voor third-party scripts
- Data attributes injecteren waar een Code module niet bij kan
<!-- Voorheen onmogelijk, nu kinderspel -->
<nav role="navigation" aria-label="Main menu">
<!-- Je Divi menu hier -->
</nav>
Voor developers die WCAG-compliance serieus nemen: dit is een game-changer. Niet perfect, maar een enorme stap vooruit.
Divi Canvases: Off-Canvas Menus En Popups Zonder Plugins
Ooit geprobeerd een mega menu te bouwen in Divi 4? Of een custom slide-in sidebar? Dan weet je hoeveel custom CSS en JavaScript dat kostte.
Canvases veranderen dat compleet.
Een Canvas is een werkruimte die losstaat van je main content. Je kunt ze gebruiken als staging area voor design updates, als plek om off-canvas componenten te organiseren, of als safe space om te experimenteren zonder je live pagina aan te raken.
Er zijn twee types:
- Local Canvases - gebonden aan een specifieke pagina of post
- Global Canvases - beschikbaar over je hele site
De echte magie zit in de integratie met Divi's Interaction Builder. Je kunt nu clicks, hovers, scroll events en viewport triggers gebruiken om canvas content te tonen, verbergen of animeren. Zonder een regel custom code.
Build je mega menu op een aparte canvas. Koppel een hover interaction aan je menu item. Done.
Elegant Themes heeft ook de Canvas Portal module toegevoegd. Hiermee inject je canvas content op specifieke plekken in je layout. Wil je dat je mega menu precies onder een specifieke link verschijnt? Portal module erin, canvas selecteren, klaar.
Nested Modules: Eindelijk Onbeperkte Flexibiliteit
Dit had al jaren geleden moeten bestaan.
Je kunt nu modules binnen modules plaatsen. Met oneindige nestbaarheid. Bouw custom layouts binnen sliders, tabs, accordions en alles wat je maar wilt.
Praktische voorbeelden:
- Button toevoegen aan een Blurb module
- Opt-in form in je Blog grid plaatsen
- Slider binnen een Toggle binnen een Accordion (silly, maar het kan)
Elke module is nu een container. En elke container krijgt de volledige suite aan flex en grid settings. Je kunt structure templates toepassen op wat dan ook.
Pricing Tables module
└── Pricing Table items (gecontroleerd door flex/grid)
└── Custom buttons
└── Feature lists
└── Whatever you want
De semantics zijn ook verbeterd. Structure elements zoals rows en columns hebben nu betekenis, maar modules kunnen ook containers zijn.
Stacked & Nested Presets: Design Systems Done Right
Presets bestonden al in Divi, maar ze waren... beperkt.
Je kon een preset maken voor een button. Prima. Maar wat als je 10 variaties nodig had? Dan had je 10 separate presets. En als je de border-radius van allemaal wilde aanpassen? Tien keer dezelfde edit.
Stacked Presets lossen dit op.
Je kunt nu meerdere presets op één element stapelen. Maak een base button preset, een alignment preset, en een shadow preset. Stack ze op één button en Divi merged ze automatisch.
Button Element
├── Base Preset (colors, typography, padding)
├── Alignment Preset (center, full-width)
└── Shadow Preset (subtle box-shadow)
Update de shadow preset en alle buttons met die stack worden aangepast. Instant, site-wide consistency.
Maar het echte krachtpunt zijn Nested Presets. Je kunt Option Group Presets nesten binnen Element Presets. Maak een border-radius preset, nest die in je Blurb Element Preset, en elke Blurb met die preset krijgt automatisch de juiste radius.
Dit is hoe design systems horen te werken. Geen duplicate presets, geen handmatige sync, geen vergeten hoekjes van je site met verkeerde styling.
Performance: Sneller Dan Ooit
Divi 5 is volledig herschreven met performance als fundament.
Ze hebben de shortcode-based aanpak vervangen door een block-based format, vergelijkbaar met Gutenberg. Dit betekent snellere rendering, betere compatibility met WordPress core, en mogelijkheden voor Gutenberg cross-compatibility.
De Visual Builder voelt sneller. Niet een beetje sneller. Significant snapper. Vooral op grotere pagina's waar Divi 4 kon gaan stotteren.
De tech stack is vernieuwd en een decennium aan technical debt is weggewerkt. Nick Roach noemde het zelf een "foundational update focused on performance, stability, scalability, and extendability."
De Migratie: Wat Je Moet Weten
Divi 5 is momenteel in Public Beta. De officiële release is gepland voor 26 februari 2026.
Belangrijk: test eerst op een staging site. Back-up je website voordat je update. Dit is geen kleine update.
Elegant Themes heeft een Migrator Tool gebouwd die je Divi 4 modules converteert naar Divi 5 format. De tool toont hoeveel modules geconverteerd moeten worden en of er compatibility issues zijn met third-party plugins.
De meeste native modules zijn inmiddels geconverteerd en getest. Third-party developers hebben tijd gehad om hun plugins te updaten via de Developer Alpha en Developer Beta fasen.
Kritische Noot: Niet Alles Is Perfect
Laat ik eerlijk zijn: Semantic Elements lost niet alle accessibility problemen op.
De Blurb, Call To Action, Heading, Hero en Person modules hebben nog steeds issues met links die niet direct een <a> tag in de HTML hebben. De Fix Divi A11y plugin blijft voor sommige use cases de beste oplossing.
Ook de Button module maakt technisch gezien links die eruitzien als buttons, niet echte <button> elements. Je kunt nu wel de semantic tag wijzigen, maar voor sommige situaties is dat een workaround, geen echte fix.
Divi 5 is een enorme stap vooruit. Maar het is niet perfect. Als WCAG-compliance kritisch is voor je project, test grondig en wees voorbereid op wat custom oplossingen.
Conclusie: De Toekomst Van Divi
Dit is de grootste Divi update sinds... eigenlijk sinds Divi begon.
Semantic Elements brengen accessibility naar een nieuw niveau. Canvases maken complex off-canvas design accessible voor iedereen. Nested Modules geven je de flexibiliteit die je altijd wilde. En Stacked & Nested Presets maken design systems eindelijk praktisch.
Is het perfect? Nee. Zijn er edge cases en workarounds nodig? Ja. Maar de richting is goed. En het tempo waarin Elegant Themes features uitrolt is indrukwekkend.
Als je Divi gebruikt, is er geen reden om te wachten met testen. Download de Public Beta, zet een staging site op, en ontdek wat er mogelijk is.
De tedious work is achter ons. De foundation staat. Nu begint de echte fun.
Gebruik je Divi 5 al? Wat zijn je ervaringen met de nieuwe features? Laat het weten in de comments.
Dit artikel bevat affiliate links!
Top comments (0)