Layout: Bruk av kolonner for struktur
Oppbygning av designet med kolonner
Når vi ser på bildet under ser vi hvordan designet baserer seg på åtte kolonner, og hvordan man kan tilpasse innholdet i hver seksjon til de tilgjengelige kolonnene.
Kolonner for seksjoner
En seksjon vil alltid ta hele bredden av butikken, men man kan for hver seksjon si hvor mange kolonner den skal deles opp i.
Om man velger å dele en seksjon i 8 kolonner (deler) vil man kunne plassere maks 8 blokker innenfor seksjonen før de havner på en ny rad.
Bildet under viser hvordan hele seksjoner er satt til å deles i 8 kolonner.
Deretter er den første blokken (tekstblokk) satt til å være 6 kolonner, og bildeblokken er 2 kolonner.
Til sammen utgjør dette 8 kolonner og fyller derfor hele bredden av seksjonen.
Ved å bruke forskjellige antall kolonner på blokker i en seksjon, kan man enkelt justere plassen hver blokk får. For eksempel, hvis man vil dele en seksjon i to like deler, finnes det flere måter å gjøre dette på, så lenge antallet kolonner er delbart med to. Eksempel:
- Seksjon: 8 kolonner Blokk 1: 4 kolonner Blokk 2: 4 kolonner
- Seksjon: 2 kolonner Blokk 1: 1 kolonne Blokk 2: 1 kolonne
Kolonner i toppmeny
Toppmenyen, også kjent som headeren, er et område der det er viktig å forstå bruken av kolonner. Hvis du for eksempel ønsker et større søkefelt, kan du la det oppta 5 kolonner, mens logoen og ikonene til sammen bruker 3.
Bildet nedenfor viser en toppmeny delt inn i 3 deler: både høyre og venstre side har 2 kolonner hver, mens logoen har 3 kolonner. Du kan også justere innholdet for flere blokker. I bildet nedenfor er både logoen og ikonene midtjustert.
Kolonner for ulike enheter
Som om ikke dette var fleksibelt nok kan man i tillegg sette ulike antall kolonner per enheter!
Bildet under viser hvordan produktlisten er satt opp til å benytte 5 kolonner på en vanlig PC, men kun to kolonner på mobil for å spare plass.
Individuell justering for ulike enheter er støttet for alle seksjoner og blokker som har støtte for tilpasning av kolonner.
Dette gjør at man ikke trenger å lage egne seksjoner/blokker for mobil og nettbrett, men kan tilpasse størrelsen dynamisk.Kombinerer man dette med padding (polstring) er kan man lage fleksible design som dynamisk tilpasser seg ulike enheter.
Avansert innstilling
Endring og tilpassing av kolonner er en avansert innstilling, og krever at “avansert modus” er aktiv for å kunne justeres.
Innstilling og oppsett av kolonner finner man under Generelle innstillinger > Avanserte innstillinger. Noen seksjoner har innstillingen under Oppsett > Avanserte innstillinger.
Enkelte seksjoner har i tillegg støtte for å velge kolonneavstand og maks bredde på seksjonen for enda mer fleksibilitet.
Trenger du mer tilpasning?
Skulle det være behov for mer tilpasning utover dette kan man benytte tilpasset CSS.
Relaterte artikler