Kolommen voor ontwerpstructuur
Kolommen voor ontwerpstructuur
Kolommen vormen de bouwstenen van de design builder en bieden aanzienlijke flexibiliteit. Dit artikel legt uit hoe je kolommen gebruikt om de structuur van je Acendy webshop ontwerp te bepalen.
8 Kolommen
Het ontwerp is gebaseerd op acht kolommen, waardoor je de inhoud binnen elke sectie kunt aanpassen aan de beschikbare kolommen.
Kolommen voor secties
Een sectie beslaat altijd de volledige breedte van de winkel, maar je kunt specificeren in hoeveel kolommen elke sectie moet worden verdeeld.
Als je ervoor kiest een sectie in 8 kolommen te verdelen, kun je maximaal 8 blokken binnen de sectie plaatsen voordat ze naar een nieuwe rij omslaan.
De onderstaande afbeelding laat zien hoe hele secties zijn ingesteld om in 8 kolommen te worden verdeeld. Het eerste blok (tekstblok) is ingesteld om 6 kolommen in beslag te nemen en het afbeeldingsblok 2 kolommen. Samen vormen deze 8 kolommen, die de volledige breedte van de sectie vullen.
Door verschillende aantallen kolommen voor blokken binnen een sectie te combineren, kun je eenvoudig de ruimte verdelen die elk blok krijgt. Als je bijvoorbeeld een sectie in twee gelijke delen wilt verdelen, kan dit op verschillende manieren worden ingesteld, zolang het deelbaar is door twee. 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, of de header, is een van de plaatsen waar het begrijpen van kolommen het nuttigst is. Als je bijvoorbeeld een extra groot zoekveld wilt, kun je ervoor kiezen dat het zoekveld 5 kolommen beslaat, terwijl het logo en de pictogrammen samen 3 kolommen beslaan.
De onderstaande afbeelding laat zien hoe het hoofdmenu is verdeeld in 3, waarbij de rechter- en linkerkant beide 2 kolommen hebben en het logo 4 kolommen heeft.
Verder kun je de inhoud voor verschillende blokken aanpassen. Zowel het logo als de pictogrammen in de onderstaande afbeelding hebben de inhoud gecentreerd uitgelijnd. Alleen de teksten in de topbalk staan anders uitgelijnd (naar links en rechts).
Kolommen voor verschillende apparaten
Om meer flexibiliteit toe te voegen, kun je ook verschillende aantallen kolommen per apparaat instellen!
De onderstaande afbeelding laat zien hoe de productlijst is ingesteld om 5 kolommen op een normale pc te gebruiken, maar slechts twee kolommen op mobiel om ruimte te besparen.
Individuele aanpassingen voor verschillende apparaten worden ondersteund voor alle secties en blokken die column customization 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 dynamisch aanpassen aan verschillende apparaten.
Geavanceerde instellingen
Het wijzigen en aanpassen van kolommen is een geavanceerde instelling en vereist dat de "geavanceerde modus" actief is om te kunnen worden aangepast. 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 secties kan je dit wijzigen door in de sectie zelf naar 'Algemene blokinstellingen' te gaan en hierin te klikken op 'Geavanceerde instellingen'. Dit is niet voor alle secties mogelijk.
Sommige secties ondersteunen ook het kiezen van 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