Stap 1: Maak een Rij aan met de gewenste modules
Ik laat het in dit voorbeeld zien met een rij met 2 kolommen, maar dit werkt ook met méér dan 2 kolommen. Bijvoorbeeld handig in je footer!
Standaard staat alles bovenaan uitgelijnd. Je kunt natuurlijk de Tekstmodule aan de bovenkant een marge of buffer geven totdat hij in het midden staat, maar dit is dan op een kleiner of groter beeldscherm niet hetzelfde!
We gaan dus wat anders doen.
Stap 2: Ga naar de Rij instellingen -> Geavanceerd
Onder Aangepaste CSS -> Hoofdelement zet je de volgende CSS:
display: flex;
align-items: center;
LET OP! Deze code (het gedeelte display: flex;) zorgt er óók voor dat de kolommen naast elkaar worden gehouden. Verwijder de code dus bij mobiel en tablet als dat daar niet de bedoeling is!
Stap 3: Opslaan en klaar!
De modules staan nu mooi uitgelijnd in het verticale midden 😎. En dus ook op desktops/laptops met een andere schermresolutie!
Bedankt weer voor je aandacht en leuk als je laat weten wat je er van vond! 🤩
Super, leuk die tutorials. Heb een probleem: 2 kolommen, 1 kolom afbeelding en 1 kolom tekst. De kolom tekst staat stil lager dan de kolom afbeelding. Er staat niks raars in de buffer en marges. Heb het nu opgelost met een marge van -40px aan de bovenkant. Maar snap niet waarom Divi dit doet.
Hoi Caroline! Dank :). En wat vreemd! Heeft je afbeelding misschien aan de bovenkant nog loze ruimte? Dus in het afbeeldingsbestand zelf? Dan zou je die nog kunnen bijsnijden. Zou ook niks anders kunnen bedenken dan idd, als alle marges en buffers op 0 staan. Heb je zowel gekeken in de module- als in de kolominstellingen?