Kadence gecentreerd oneven aantal kolommen
Het is makkelijk om een paar kolommen op een rij te maken. Het is makkelijk om twee rijen kolommen te hebben. De problemen beginnen wanneer elke rij een verschillend aantal rijen bevat, en je ze graag centreert. Het hangt allemaal af van het doel en de stijl van de webpagina. Een cursus raster heeft dit gecentreerde kolomontwerp meestal niet nodig. Websites die gericht zijn op design, mode etc. hebben vaak wel gecentreerde kolommen nodig.
Easy-peasy oneven gecentreerde kolommen
We laten je twee voorbeelden zien: de ‘standaard’ rij- en kolom situatie en de oplossing. Beide zijn gemaakt met Kadence Blocks . Kadence biedt de juiste ‘flex-box’ mogelijkheden om dit te maken.
De gewone gelijkmatige kolomindeling
- Eerste rij:
- Blauwe achtergrond
- Slechts 1 sectie.
- Tweede rij:
- Met 3 kolommen
- 5 secties
- Probleem: de tweede rij kolommen wordt nooit gecentreerd.
Gecentreerde kolommenindeling
- Eerste rij:
- Blauwe achtergrond
- Slechts 1 sectie.
- Tweede rij:
- Slechts 1 sectie
- Met 3 kolommen
- 5 secties geplaatst in de enkele sectie
- Elke sectie heeft een maximale inhoudsbreedte tussen 27-32% (het is belangrijk dat de 100% in 3 wordt verdeeld, zodat je een omslagpunt hebt)
- Het enkele gedeelte moet aan de volgende eisen voldoen: Richting horizontaal, Uitlijning gecentreerd en een kleine verticale opening toevoegen.
- Stel de Wrap-inhoud in op ‘wrap’.
- Je bent klaar; je hebt een gecentreerde kolommenindeling die zich perfect aanpast aan elk scherm en elke stand.
- Advies: zorg ervoor dat je de maximale inhoudsbreedte voor de gecentreerde kolommen op mobiel instelt op 60-90%, afhankelijk van uw ontwerp.
- Je instellingen voor tablet zijn afhankelijk van het door u ingestelde breekpunt
De lay-out in de lijstweergave
Zo maak je gecentreerde kolommen (rijen) in Gutenberg.
Let op: dit is gemaakt met Kadence Blocks.
- Bovenaan zie je de eerste rij met een blauwe achtergrond.
- De onderkant van de eerste rij is ingesteld op een negatieve marge van 70px
- De tweede rij bevat het enkele gedeelte
- Het enkele gedeelte bevat de andere 5 gedeelten
- Elk van de 5 secties heeft een grijze achtergrond
- Elk van de 5 secties bevat een eenvoudige koptekst
Speciale dank aan: Michelle Nunan, Paul Adamson and Lynette van der Merwe.
