Hoe pas je de volgorde van de kolommen aan op mobiele weergave in Divi?

Als je met Divi werkt weet je hoeveel er mogelijk is met dit veelzijdige thema. Er zijn alleen wat standaard instellingen in het systeem die je soms beperken in je design. Gelukkig is het bij Divi heel gemakkelijk om deze instellingen door middel van css te wijzigen. In deze blog leg ik je uit hoe je dat doet zodat je uiteindelijk onderstaand resultaat hebt.

De standaard kolom volgorde in Divi

Werk je met Divi, dan kom je al snel achter de logica ervan. Maak je een sectie met twee kolommen en bekijk je je design op je telefoon? Dan zie je dat de eerste kolom boven de tweede kolom verschijnt. Dit is niet altijd ideaal. Soms komen er dan net twee afbeeldingen onder elkaar te staan waardoor de gebruiksvriendelijkheid van je website vermindert. Volg onderstaande stappen om de volgorde op mobiel (of tablet) te wijzigen.

Stap 1 Voeg twee lijnen CSS toe aan je rij instellingen

Klik op de rijinstellingen -> Advanced -> en voeg bij Main Element onderstaande code toe:

display: flex;
flex-wrap: wrap;

Stap 2 Stel in welke volgorde de kolommen moeten hebben

Open de rijinstellingen. Hier zie je het aantal kolommen in de rij. Klik op het tandwieltje en open zo de kolominstellingen. Nu ga je aangeven welke volgorde de kolommen moeten krijgen. 

Advanced -> Custom CSS -> Main element

Klik op het icoontje van mobiele weergave en geef de volgorde op mobiel aan door de volgende zin toe te voegen. 

order: 1;

Doe nu hetzelfde bij de andere kolom. Uiteraard voer je hier order: 2; in.

Je kan dit ook bij meerdere kolommen toepassen! 🙂 

Het resultaat van de kolommen wisselen

Dit was het! Onderstaand zie je het resultaat na het wisselen van de kolommen. Hopelijk heb je hier iets aan gehad. Veel plezier met bouwen in Divi!