Blog

Lees mijn blogs met tips & tricks over webdesign.

Portfolio

Mijn meest recente werk.

7

Multi-page website

Een website met meerdere pagina’s, gericht op online vindbaarheid en volledig in lijn met jouw branding.

7

One-pager website

Een website met maar één pagina. Perfect als jij je klanten vooral uit je netwerk of social media haalt.

M
studio mine

Homepage ➭

Contact ➭

Multi-page website ➭

Een website met meerdere pagina’s,
gericht op online vindbaarheid en
volledig in lijn met jouw branding.

One-pager website ➭

Een website met maar één pagina.
Perfect als jij je klanten vooral uit
je netwerk of social media haalt.

Blog ➭

Portfolio ➭

About studio mine ➭

Michelle

mei 7, 2023

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! 

Webteksten schrijven

Michelle Neeft - WordPress & Divi designer

Ik bouw custom, strategische websites met WordPress en het populaire thema Divi. Volledig in lijn met jouw branding. Interesse in een website? Stuur mij een berichtje! 😉 

Lees verder in mijn blog

Meer webdesign tips & tricks