Je kolommen ontwerpen

Je kan kolommen gebruiken om inhoud in gestructureerde lay-outs te rangschikken, waardoor je site visueel aantrekkelijk en gemakkelijk te navigeren wordt. In deze handleiding leer je hoe je ontwerpaspecten van je kolommen kan aanpassen, zoals de kleuren, uitlijning en weergave op mobiele apparaten.

Volg de volgende stappen om de achtergrondkleur van kolommen toe te voegen of te wijzigen:

1. Selecteer Lijstweergave in de linkerbovenhoek van de editor. Het pictogram lijkt op drie horizontale lijnen boven elkaar.
2. Zoek hier het kolommenblok en klik erop:

3. Klik in de Kolommenblok-instellingen aan de rechterkant van het scherm op het tabblad Stijlen (het pictogram ziet eruit als een zwarte en witte cirkel):

4. Klik in de kleurinstellingenop ‘Achtergrond’ en selecteer een achtergrondkleur.
5. Klik op de knop ‘Opslaan‘ om je wijzigingen op te slaan.

Als je voor elke kolom verschillende kleuren wilt selecteren, volg dan dezelfde stappen maar selecteer een individueel kolomblok in de lijstweergave, in plaats van het algemene kolommenblok.

Wanneer je inhoud toevoegt aan een nieuwe kolom, wordt deze standaard uitgelijnd op de bovenkant van de kolomcontainer. Je kan de uitlijning van inhoud binnen kolommen wijzigen door de volgende stappen te volgen:

1. Selecteer Lijstweergave in de linkerbovenhoek van de editor. Het pictogram lijkt op drie horizontale lijnen boven elkaar.
2. Zoek hier het kolommenblok en klik erop:

3. Klik in de werkbalk boven of onder de geselecteerde kolommen op de optie voor verticale uitlijning:

4. Kies uit ‘bovenkant uitlijnen‘, ‘midden uitlijnen‘ of ‘onderkant uitlijnen‘ zodat alle inhoud binnen de kolommen aan de bovenkant, in het midden of aan de onderkant van de kolomcontainer zit.

Als je voor elke kolom verschillende uitlijningen wilt selecteren, volg dan dezelfde stappen maar selecteer een individuele kolom in de Lijstweergave, in plaats van de algemene kolommen. Door dit te doen, kan je een verspreide lay-out zoals deze maken:

Bij het gebruik van een kolommenlay-out is het belangrijk om te overwegen hoe je kolommen worden weergegeven voor bezoekers aan je website via een mobiel apparaat. Telefoons hebben kleinere schermen, dus meerdere kolommen passen mogelijk niet allemaal goed in een enkele rij terwijl je inhoud leesbaar blijft.

Je kan ervoor kiezen om de kolommen op mobiele schermen te ‘stapelen’ zodat ze boven elkaar worden weergegeven in plaats van allemaal op één enkele regel:

1. Selecteer het Kolommenblok met behulp van Lijstweergave of de blokwerkbalk.
2. Schakel in de Kolommenblok-instellingen aan de rechterkant van het scherm de schakelaar ‘Stapel op mobiel’ in:

Deze schakelaar bepaalt of de kolommen horizontaal of verticaal gestapeld worden weergegeven als de pagina of het bericht wordt bekeken op een mobiel apparaat. Hier is een voorbeeld van gestapelde kolommen als ze bekeken worden op desktop-/laptopschermen vergeleken met een mobiel scherm: