Kolommen voor ontwerpstructuur
Kolommen als basis voor je ontwerp
Kolommen vormen de bouwstenen van de Design Builder en bieden veel flexibiliteit. Dit artikel legt uit hoe je kolommen gebruikt om de lay-out van je Acendy-webshop structuur te geven.
8 Kolommen
Het ontwerp is gebaseerd op een raster van acht kolommen, waardoor je de inhoud binnen elke sectie kunt aanpassen aan het beschikbare aantal kolommen.
Kolommen in secties
Een sectie beslaat altijd de volledige breedte van de winkel, maar je kunt instellen in hoeveel kolommen een sectie moet worden verdeeld.
Als je ervoor kiest om een sectie in 8 kolommen te verdelen, kun je maximaal 8 blokken in die sectie plaatsen voordat ze worden doorgeschoven naar een nieuwe rij.
De onderstaande afbeelding toont een voorbeeld waarbij een sectie is opgedeeld in 8 kolommen:
- Het eerste blok (een tekstblok) beslaat 6 kolommen
- Het tweede blok (een afbeelding) beslaat 2 kolommen
Samen vullen ze precies de volledige breedte van de sectie.
Door blokken binnen een sectie verschillende aantallen kolommen toe te wijzen, kun je eenvoudig de ruimteverdeling bepalen. Bijvoorbeeld, als je een sectie in twee gelijke delen wilt verdelen, kan dat op verschillende manieren - zolang het aantal kolommen maar gelijk verdeeld kan worden.
Voorbeeld:
- Sectie: 8 kolommen
Blok 1: 4 kolommen
Blok 2: 4 kolommen - Sectie: 2 kolommen
Blok 1: 1 kolom
Blok 2: 1 kolom
Kolommen in het hoofdmenu
Het hoofdmenu (ook wel de header) is één van de plekken waar het gebruiken van kolommen erg handig is. Bijvoorbeeld, als je een extra groot zoekveld wilt, kun je ervoor kiezen dat dit veld 5 kolommen inneemt, terwijl het logo en de pictogrammen samen 3 kolommen beslaan.
De onderstaande afbeelding laat zien hoe het bovenste menu in 3 delen is verdeeld:
- De rechter- en linkerzijde hebben elk 2 kolommen
- Het logo in het midden gebruikt 4 kolommen
Daarnaast kun je ook de inhoud van een blok aanpassen. Zo kan je de inhoud bijvoorbeeld centreren, zoals bij het logo en de pictogrammen in onderstaande afbeelding. Hier staan alleen de teksten in de topbalk anders uitgelijnd (naar links en rechts).
Kolommen voor verschillende apparaten
Om meer flexibiliteit toe te voegen, kun je ook per apparaat een ander aantal kolommen instellen.
De onderstaande afbeelding laat zien hoe de productlijst is ingesteld met 5 kolommen op een gewone pc, maar slechts 2 kolommen op mobiel om ruimte te besparen.
Individuele aanpassingen per apparaat zijn mogelijk voor alle secties en blokken die kolominstellingen ondersteunen.
Dit betekent dat je geen aparte secties of blokken voor mobiel en tablets hoeft te maken, maar de grootte dynamisch kunt aanpassen.
Als je dit combineert met padding, kun je flexibele ontwerpen maken die zich aanpassen aan verschillende apparaten.
Geavanceerde instellingen
Het aanpassen van kolommen is een geavanceerde functie en vereist dat de "geavanceerde modus" actief is. Je kan deze instelling aanzetten door naar de Design builder te gaan en rechtsboven het schuifje aan te klikken dat achter 'Geavanceerd' staat.
Nadat je de geavanceerde modus hebt aangezet, kan je in de Design Builder je kolommen en secties geavanceerd aanpassen. Dit kan je doen door met je muis over de sectie of kolom te bewegen en vervolgens op het potloodje te klikken. Voor secties kan je dit wijzigen door in de sectie zelf naar
Lay-out > geavanceerde instellingen te gaan. Vervolgens kan je de kolomtelling wijzigen per apparaat.
Voor blokken kan je dit wijzigen door in het blok te gaan naar algemene blokinstellingen > Geavanceerde instellingen. Dit is niet voor alle blokken mogelijk.
Sommige blokken ondersteunen ook het kiezen van kloofcontrole (kolomafstand) en maximale breedte van de sectie voor nog meer flexibiliteit.
Als er behoefte is aan meer aanpassingen dan dit, kun je aangepaste CSS gebruiken.
Gerelateerde artikelen