Kolommen uitlijnen

Heb je een sectie met meerdere kolommen naast elkaar, dan wil je de inhoud daarin vaak netjes uitgelijnd hebben — bijvoorbeeld dat het onderste element in elke kolom op één lijn staat, ook al bevat de ene kolom meer inhoud dan de andere. Met de Flex-instellingen van de Visual Builder verdeel je de inhoud in elke kolom automatisch, ongeacht hoeveel erboven staat.

Je kunt in de kolommen alles plaatsen wat je wilt — in dit voorbeeld gebruiken we tekstmodules met een knop eronder, maar het werkt net zo goed met alleen knoppen, afbeeldingen of andere modules. Je past de instelling toe op de kolom zelf (niet op de losse modules erin) en herhaalt dezelfde stappen voor elke kolom in de rij. Zie de uitleg over de Flex-indeling voor een volledig overzicht van alle layout-opties op een kolom.

1. Open de pagina in de Visual Builder
   Ga naar de pagina met de kolommen en klik in de balk bovenaan op Visual Builder inschakelen. De pagina laadt opnieuw in de bewerkweergave.

   

2. Zet de kolom op Flex
   Met Layoutstijl schakel je de flex-instellingen in voor deze kolom. Kies Flex; zonder deze stap werken de instellingen hieronder niet.

   

3. Houd de inhoud onder elkaar
   Met Layoutrichting bepaal je de richting waarin de inhoud van de kolom stroomt: naast elkaar in een rij of onder elkaar in een kolom. Kies de kolom-richting, zodat de modules verticaal gestapeld blijven, zoals je gewend bent.

   

4. Verdeel de inhoud in de kolom
   Met Inhoud uitlijnen bepaal je hoe de inhoud verdeeld wordt binnen de kolom als er ruimte over is: aan het begin, gecentreerd, aan het einde, of gelijkmatig verdeeld met ruimte ertussen. Kies bijvoorbeeld ‘gelijkmatig verdeeld met ruimte ertussen’: de inhoud bovenin blijft op zijn plek en het onderste element (in dit voorbeeld de knop) schuift vanzelf naar de onderkant van de kolom, ongeacht hoeveel inhoud erboven staat.

   

5. Herhaal dit voor de andere kolommen
   Doorloop dezelfde drie instellingen (Layoutstijl, Layoutrichting en Inhoud uitlijnen) voor de overige kolommen in de rij, zodat de inhoud in alle kolommen op dezelfde manier is uitgelijnd.
6. Sla de pagina op
   Klik bovenin de Visual Builder op Opslaan om de nieuwe indeling vast te leggen.

   

De inhoud in de kolommen is nu netjes uitgelijnd — de onderste elementen staan op één lijn — ongeacht de hoeveelheid inhoud erboven. In dit voorbeeld zijn dat knoppen, maar dezelfde methode werkt met elke andere module.