Hoe zet ik blokken in een raster met de Flex-indeling?

Met de Flex-indeling in de Visual Builder zet je losse blokken om in een netjes uitgelijnd raster. In het voorbeeld hieronder staan zes kaarten in één kolom; door die kolom op Flex te zetten komen ze automatisch naast elkaar te staan — drie per rij — en breken ze keurig af naar een tweede rij. Handig voor kaarten, knoppen of uitgelichte items die er gelijk en verzorgd uit moeten zien.

De Flex-instellingen staan op het onderdeel dat de kaarten bevat — hier de kolom. Je opent de kolominstellingen, gaat naar het ontwerp-gedeelte en opent de groep met layout-opties. Hieronder lopen we de instellingen langs in de volgorde waarin je ze het vaakst nodig hebt. In elke schermafbeelding zie je links het resultaat op de kaarten en rechts de bijbehorende instelling.

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

   

2. Kies de Layoutstijl
   Met Layoutstijl bepaal je hoe de kaarten in de kolom staan. Kies Flex om ze naast elkaar te laten stromen in een raster; Blok (de standaard) zet ze onder elkaar en Raster plaatst ze in een vast rooster.

   

3. Laat de kaarten afbreken
   Met Layout afbreken bepaal je of de kaarten op één regel blijven of doorlopen naar een volgende regel als ze niet meer passen. Met Afbreken ontstaat het nette raster van drie per rij, dat op smallere schermen vanzelf terugloopt naar één kolom.

   

4. Stel de tussenruimte in
   Met Horizontale tussenruimte en de verticale tegenhanger eronder bepaal je de ruimte tussen de kaarten: horizontaal tussen kaarten op dezelfde regel, verticaal tussen de regels.

   

5. Lijn de inhoud uit
   Met Inhoud uitlijnen bepaal je waar de kaarten op de regel komen wanneer er ruimte over is: aan het begin (links), gecentreerd, aan het einde (rechts) of gelijkmatig verdeeld met ruimte ertussen.

   

6. Lijn de items uit
   Met Items uitlijnen bepaal je hoe kaarten van verschillende hoogte ten opzichte van elkaar staan: bovenaan, gecentreerd, onderaan, of uitgerekt tot dezelfde hoogte.

   

7. Bepaal de layoutrichting
   Met Layoutrichting bepaal je de richting waarin de kaarten stromen: naast elkaar in een rij (de gebruikelijke keuze) of onder elkaar in een kolom. De omgekeerde varianten draaien de volgorde om.

   

8. Sla de pagina op
   Klik bovenin de Visual Builder op Opslaan om de nieuwe indeling vast te leggen.

   

De kaarten behouden hun nieuwe indeling nu ook op je gepubliceerde pagina.