Förstå kolumner

Kolumner är en av hörnstenarna i designbyggaren och är det som möjliggör mycket flexibilitet.

8 kolumner

När vi tittar på bilden nedan ser vi hur designen är baserad på åtta kolumner, och hur man anpassar innehållet i varje avsnitt till de tillgängliga kolumnerna.

Kolumner på avsnitt

En sektion kommer alltid att ta upp hela butikens bredd, men du kan säga för varje sektion hur många kolumner den ska delas upp i.
Om du väljer att dela upp en sektion i 8 kolumner (delar) kommer du att kunna placera maximalt 8 block inom sektionen innan de hamnar på en ny rad.  

Bilden nedan visar hur hela sektioner är inställda på att delas upp i 8 kolumner.
Sedan ställs det första blocket (textblocket) in på 6 kolumner och blocket med bilder är 2 kolumner.
Totalt utgör detta 8 kolumner och fyller därför hela sektionens bredd.

Genom att kombinera olika antal kolumner på block i en sektion kan du enkelt fördela hur mycket utrymme varje block ska få.
Om du till exempel vill dela en sektion i två lika stora delar kan den ställas in på flera sätt, så länge den kan delas i två. Exempel:

• Avsnitt: 8 kolumner

  • Block 1: 4 kolumner

  • Block 2: 4 kolumner

• Avsnitt: 2 kolumner

  • Block 1: 1 kolumn

  • Block 2: 1 kolumn

Kolumner i den översta menyn

Den översta menyn, eller sidhuvudet, är en av de platser där det är mest praktiskt att förstå kolumner.
Om du till exempel vill ha ett extra stort sökfält kan du välja att sökfältet ska uppta 5 kolumner, medan logotypen och ikonerna tillsammans ska uppta 3.

Bilden nedan visar hur toppmenyn är uppdelad i 3, där höger och vänster sida båda har 2 kolumner, och logotypen har 3.

Dessutom kan du justera innehållet för flera block. Både logotypen och ikonerna i bilden nedan har innehållet centrerat.

Kolumner för olika entiteter

Som om detta inte vore tillräckligt flexibelt kan du också ställa in olika antal kolumner per enhet!

Bilden nedan visar hur produktlistan är inställd för att använda 5 kolumner på en vanlig dator, men bara två kolumner på mobilen för att spara utrymme.

Individuell justering för olika enheter stöds för alla sektioner och block som stöder kolumnjustering.
Det innebär att du inte behöver skapa separata sektioner/block för mobil och surfplatta, utan kan justera storleken dynamiskt.

Om du kombinerar detta med utfyllnad kan du skapa flexibla mönster som dynamiskt anpassar sig till olika enheter.

Avancerad inställning

Att ändra och anpassa kolumner är en avancerad inställning och kräver att "avancerat läge" är aktivt för att kunna justeras.

Inställning och layout av kolumner finns under Almänna inställningar > Avancerade inställningar. Vissa avsnitt har inställningen nedan Inställning > Avancerade inställningar.

Vissa sektioner har också stöd för att välja kolumnavstånd och maximal bredd på sektionen för ännu mer flexibilitet.

Skulle det finnas behov av mer anpassning utöver detta kan du använda anpassad CSS.