WPNews.nl

CSS Divi columns

Divi builder heeft een vreemde en irritante eigenschap: je kunt de kolom volgorde op mobile niet bepalen.

Standaard staat de linkerkolom bovenaan, en dan die rechts daarvan, enzovoort. Dat is heel vervelend, omdat de rechterkolom juist vaak gebruikt wordt voor knoppen met aanmelden, kopen, inschrijven, etc.

CSS om zelf de kolomvolgorde aan te geven

Stap 1 – zet de CSS code in Rij instellingen

Om binnen Divi de (stapel)volgorde van de kolommen op mobiel te regelen, moet je eerst CSS toevoegen aan de Divi Rij instellingen. Deze CSS zal de kolommen binnen de rij instrueren om deze weer te geven met behulp van flex. Daardoor kun je de stapelvolgorde van de kolommen op mobiel regelen.
Ga naar rij-instellingen / tabblad Geavanceerd / aangepaste CSS.
Plak de volgende CSS-code daar in het hoofdelement (main element).
Stap 1 - CSS Divi kolommen
/* CSS code om de kolom volgorde later te bepalen met 'order: 1;' etc. */
display: flex;
flex-wrap: wrap;

Stap 2

In de  rij-instellingen zie je een lijst met kolommen. Klik op het instellingenpictogram en ga naar het tabblad Geavanceerd van de kolom  / Aangepaste CSS-schakelaar.
Klik bij het Main element op het apparaat dat je wilt aanpassen (in het voorbeeld mobile).
In de kolom die je op mobiel bovenaan wilt hebben, voeg je order: 1; toe.
In de kolom die je daaronder wilt hebben, voeg je order: 2; toe.
Stap 2 - CSS code kolom Divi
/* CSS code om de kolom volgorde aan te geven. */
order: 1;
of:
order: 2;
etc.
Op deze manier kun je overal de volgorde van de kolommen aanpassen op mobiele apparaten.

Translate »