Vergeet alles wat je wist over kolommen in Divi...
De oude manier van werken - vaste kolom-templates kiezen, custom CSS schrijven voor edge cases, en eindeloos tweaken per breakpoint - is voorbij. Divi 5 heeft Flexbox en CSS Grid native geïntegreerd in de Visual Builder, en dat verandert fundamenteel hoe je layouts bouwt.
Dit is geen kleine upgrade! Dit is een complete herziening van het layout systeem.
Van Rigide Kolommen Naar Flexibele Containers
In Divi 4 koos je een row template: 1/2 + 1/2, of 1/3 + 2/3, of een van de andere voorgedefinieerde opties. Die structuur stond vast. Wilde je iets anders? Custom CSS.
Divi 5 werkt anders.
Elke section, row, column en zelfs elke module kan nu fungeren als een layout container. Open de Design tab, ga naar Layout, en je hebt toegang tot het volledige Flexbox arsenaal:
- Layout Direction - bepaalt of content horizontaal (row) of verticaal (column) stroomt
- Justify Content - regelt de verdeling langs de main axis
- Align Items - controleert uitlijning op de cross axis
- Flex Wrap - bepaalt of items wrappen naar nieuwe regels
- Gap controls - horizontale en verticale spacing tussen items
/* Wat je vroeger handmatig schreef */
.my-row {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 20px;
}
/* Nu: gewoon klikken in de Visual Builder */
Het mooie? Deze settings zijn per breakpoint aanpasbaar. Desktop in row direction, tablet en mobile in column direction. Zonder een regel code.
CSS Grid: Twee-Dimensionale Controle
Flexbox is geweldig voor één-dimensionale layouts. Maar soms heb je controle nodig over zowel rijen als kolommen tegelijk. Daar komt CSS Grid.
Divi 5 integreert CSS Grid volledig in de Visual Builder. Wanneer je een nieuwe row toevoegt, zie je nu twee opties: Flex containers en Grid containers.
Grid geeft je mogelijkheden die met Flexbox simpelweg niet bestaan:
- Definieer exact hoeveel kolommen en rijen je wilt
- Laat items meerdere cellen overspannen met Column Span en Row Span
- Gebruik
frunits voor proportionele verdeling - Maak bento-style layouts zonder trucjes
De Grid settings in de Design tab zijn uitgebreid:
Layout > Grid
├── Column Widths (Equal / Auto / Manual)
├── Row Heights (Equal / Auto / Manual)
├── Number of Columns
├── Number of Rows
├── Grid Direction
├── Grid Density
├── Grid Auto Columns
├── Grid Auto Rows
└── Grid Offset Rules
Die laatste - Grid Offset Rules - is bijzonder krachtig. Je kunt nth-child patterns definiëren om specifieke items anders te positioneren. Perfect voor die magazine-style layouts waar elk 3e of 5e item groter moet zijn.
Zeven Breakpoints In Plaats Van Drie
Divi 4 had drie breakpoints: Desktop, Tablet, Phone. Dat was het.
Divi 5 breidt dit uit naar zeven aanpasbare breakpoints:
- Phone - onder 767px
- Phone Wide - onder 860px
- Tablet - onder 980px
- Tablet Wide - onder 1024px
- Desktop - boven 981px (base layer)
- Widescreen - boven 1280px
- Ultra Wide - boven 1440px
En het beste deel? Je kunt de pixel waarden van elk breakpoint aanpassen. Heb je een specifieke tablet in landscape mode die problemen geeft? Definieer een breakpoint precies op die breedte.
De breakpoint editor is toegankelijk via de drie-puntjes icon naast de device icons in de top toolbar. Schakel breakpoints aan of uit naar behoefte, en pas de pixel ranges aan.
Pro tip: Test eerst op een staging site voordat je breakpoints aanpast op productie. Wijzigingen zijn site-wide.
Module Layout Controls: De Stille Revolutie
Dit is misschien wel de meest onderschatte verandering in Divi 5.
Vroeger waren modules... modules. Ze hadden content en styling, maar hun interne layout was grotendeels vast. Wilde je de afbeelding van een Blurb links van de tekst in plaats van erboven? Dat vereiste workarounds.
Nu heeft elke module Layout controls in de Design tab. Elke module kan zijn eigen Flexbox container zijn.
Neem de Blurb module als voorbeeld. Met Flex enabled wordt de Blurb zelf de layout container, en de interne elementen (afbeelding, heading, tekst, button) worden flex items. Zet Layout Direction op Row en je afbeelding staat naast je tekst. Pas Align Items aan en alles centreert verticaal.
Blurb Module (Flex Container)
├── Image (Flex Item)
├── Heading (Flex Item)
├── Body Text (Flex Item)
└── Button (Flex Item)
Dit werkt met Nested Modules. Je kunt een Button module toevoegen aan je Blurb, en die button participeert gewoon in de Flexbox layout. Geen extra rows nodig, geen column gymnastics.
Responsive Element Reordering
Een klassiek responsive probleem: je hebt een two-column layout op desktop. Links content, rechts een sidebar. Op mobile stackt alles verticaal, maar de sidebar komt eerst omdat die in de DOM eerst staat.
Divi 5 lost dit op met native reordering per breakpoint.
In de Flexbox settings vind je order controls. Je kunt de visuele volgorde van elementen aanpassen zonder de DOM structuur te wijzigen. Desktop: sidebar rechts. Mobile: sidebar onderaan.
Dit werkt ook met de nieuwe Structure Templates. Klik op "Apply Structure Template" in een Row en je kunt per breakpoint een andere kolom-structuur kiezen. Desktop 3 kolommen, Tablet 2 kolommen, Mobile 1 kolom. Één klik per breakpoint.
Grid vs Flexbox: Wanneer Gebruik Je Wat?
De vraag die iedereen stelt: wanneer kies je Grid en wanneer Flexbox?
Gebruik Flexbox wanneer:
- Je content in één richting stroomt (horizontal of vertical)
- Je dynamische content hebt die moet wrappen
- Je buttons onderaan kolommen wilt uitlijnen ongeacht content hoogte
- Je snel iets wilt bouwen en aanpassen terwijl je werkt
Gebruik Grid wanneer:
- Je controle nodig hebt over zowel rijen als kolommen
- Je items wilt laten overspannen over meerdere cellen
- Je een bento-style of magazine layout bouwt
- Je complexe responsive patterns nodig hebt
En ja, je kunt ze combineren. Een parent Grid voor de macro structuur, Flexbox binnen de individuele cellen voor micro layout. Divi 5 maakt dit triviaal.
Praktisch Voorbeeld: Responsive Card Grid
Laten we een concreet voorbeeld doorlopen. Je wilt een card grid: 4 kolommen op desktop, 2 op tablet, 1 op mobile.
Stap 1: Voeg een Section toe en kies een Grid Row structure
Stap 2: Ga naar Design > Layout > Grid en zet Column Widths op "Equal Width Columns"
Stap 3: Open de Responsive Editor voor Number of Columns
Stap 4: Stel in:
- Desktop: 4 kolommen
- Tablet: 2 kolommen
- Phone: 1 kolom
Stap 5: Voeg je modules toe aan de kolommen
Klaar. Geen custom CSS. Geen media queries. De layout past zich automatisch aan.
Wil je dat elke 5e card groter is? Voeg een Grid Offset Rule toe:
nth-child: 5n
Offset Rule: Column Span
Offset Value: 2
De Valkuilen
Niet alles is perfect. Enkele dingen om op te letten:
Cascade complexiteit: Met zoveel layout levels (Section > Row > Column > Module) kunnen conflicterende settings verwarrend zijn. Als iets niet doet wat je verwacht, check de parent containers.
Performance: Meer breakpoints betekent meer CSS output. Voor de meeste sites is dit geen probleem, maar als je 7 breakpoints enabled op een site met honderden pagina's, monitor je loading times.
Learning curve: Als je gewend bent aan de oude manier van werken, is er een mentale shift nodig. Je denkt nu in containers en items, niet in vaste kolom-templates.
De Toekomst Van Divi Layouts
Met Divi 5 heeft Elegant Themes Divi's layout systeem naar moderne webstandaarden getild. Flexbox en CSS Grid zijn niet nieuw - ze bestaan al jaren. Maar de integratie in een visual builder op dit niveau is indrukwekkend.
Voor developers die CSS kennen: je skills translaten direct. Manual Width Columns accepteert grid-template syntax. Je kunt 1fr 1fr 1fr 1fr schrijven, of repeat(auto-fit, minmax(300px, 1fr)) voor auto-responsive grids.
Voor designers zonder CSS kennis: je hebt nu toegang tot dezelfde layout power, zonder code te schrijven. De Visual Builder abstraheert de complexiteit weg.
En dit is nog maar het begin. De combinatie van Flexbox, Grid, Nested Modules, en de nieuwe 7-breakpoint system maakt layouts mogelijk die in Divi 4 simpelweg niet bestonden.
Aan De Slag
Wil je dit zelf proberen? Download de Divi 5 Public Beta en experimenteer op een staging site.
Begin simpel: maak een row, enable Flexbox, en speel met de Layout Direction en Justify Content settings. Kijk hoe je content reageert. Voeg breakpoints toe en pas settings aan per device.
Zodra je comfortabel bent met Flexbox, probeer Grid. Maak een bento layout. Experimenteer met Offset Rules.
De responsive design mogelijkheden in Divi 5 zijn de sterkste die de builder ooit heeft gehad. En ze zijn nu beschikbaar voor iedereen.
Meer weten over Divi 5's nieuwe features? Check mijn vorige artikel over de 2026 Divi updates.
Dit artikel bevat affiliate links!
Top comments (0)