Forstå kolonner

Kolonner er en av grunnsteinene til designbyggeren, og er det som gir mulighet for mye fleksibilitet.

8 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 å kombinere ulike antall kolonner på blokker i en seksjon kan man enkelt fordele hvor mye plass hver blokk skal få.
Om man f.eks ønsker å dele en seksjon i to like deler kan det settes opp på flere måter, så lenge det lar seg dele på 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, eller header, er en av de plassene hvor forståelse av kolonner kommer mest til nytte.
Ønsker man f.eks et ekstra stort søkefelt kan man velge at søkefeltet skal oppta 5 kolonner, mens logo og ikoner til sammen skal oppta 3.

Bildet under viser hvordan toppmenyen er delt i 3, hvor høyre og venstre side begge har 2 kolonner, og logo har 3.

Videre kan man for flere blokker justere innholdet. Både logo og ikoner i bildet under har innholdet 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.

Skulle det være behov for mer tilpasning utover dette kan man benytte tilpasset CSS.