Layout: Sette opp layout med kolonner
Designbyggeren bruker et to-nivås kolonnesystem for å styre hvordan innhold plasseres på siden. På seksjonsnivå definerer du et rutenett. På blokknivå bestemmer du hvor mye av det rutenettet hver enkelt blokk skal ta opp. Til sammen gir disse to innstillingene deg presis layoutkontroll på tvers av desktop, tablet og mobil.
Slik fungerer kolonner
Alle seksjoner som støtter kolonner har et CSS-rutenett. Rutenettet defineres av antall kolonner — for eksempel 4 på desktop. Hver blokk inne i seksjonen angir hvor mange av disse kolonnene den skal strekke seg over. En blokk som strekker seg over 2 av 4 kolonner tar opp halvparten av bredden.
Kort sagt: antall kolonner i seksjonen bestemmer totalt antall inndelinger, og kolonnebredden på blokken bestemmer hvor bred hvert innholdselement er innenfor det rutenettet.
Begge innstillingene er uavhengige per skjermstørrelse — du kan ha 4 kolonner på desktop, 2 på tablet og 1 på mobil. Layouten tilpasses automatisk når skjermstørrelsen endres.
Kolonneinnstillinger på seksjoner
Kolonneinnstillinger på en seksjon definerer det overordnede rutenettet. Du finner dem under gruppen Layout i seksjonens innstillingspanel. De er bare synlige når Avansert modus er skrudd på.
Innstilling | Hva den styrer | Område | Standard |
|---|---|---|---|
Kolonner — desktop | Antall kolonner på store skjermer | 1–8 | 6 |
Kolonner — tablet | Antall kolonner på mellomstore skjermer | 1–8 | 4 |
Kolonner — mobil | Antall kolonner på små skjermer | 1–8 | 2 |
Kolonnegap | Avstand mellom kolonnene | 0–4 | 4 |
Gap-verdiene følger temats avstandsskala. 0 fjerner all mellomrom mellom kolonnene; 4 gir størst avstand.
Hvilke seksjoner støtter antall kolonner
Kolonneinnstillinger finnes i flere seksjonstyper, ikke bare den dedikerte Kolonner-seksjonen:
- Kolonner — den viktigste fleksible layoutseksjonen med full kolonnekontroll
- Bunntekst — lar deg plassere bunntekstblokker (om oss-tekst, menyer, nyhetsbrevpåmelding) side om side
- Header-bygger — fordeler headerelementer horisontalt langs banneret
- Blogg — styrer hvor mange blogginnleggskort som vises i en rad
- Kontakt oss — arrangerer innholdsblokker i en flerkolomne-layout
Kolonnebreddeinnstillinger på blokker
Hver blokk inne i en seksjon har sin egen breddeinnstilling som styrer hvor mange av seksjonens kolonner den strekker seg over.
Innstilling | Hva den styrer | Område | Standard |
|---|---|---|---|
Bredde — desktop | Kolonnespennet på store skjermer | 1–8 | 1 |
Bredde — tablet | Kolonnespennet på mellomstore skjermer | 1–8 | 1 |
Bredde — mobil | Kolonnespennet på små skjermer | 1–8 | 1 |
En blokk satt til bredde 1 tar opp én kolonnecelle. I en seksjon med 4 kolonner vil en blokk satt til bredde 2 ta opp halvparten av raden. To blokker med bredde 2 plasseres side om side og fyller hele raden.
Breddeinnstillinger er tilgjengelige på de fleste innholdsblokker som brukes inne i Kolonner-seksjonen — tekst, bilde, ikonboks, bildeboks, anbefaling, typografi, video, nedtelling, logoer og andre.
Visningsmodus: rutenett eller karusell
Kolonner-seksjonen har en innstilling for Visningsmodus som endrer hvordan rutenettet vises:
- Standard — et vanlig CSS-rutenett. Blokkene plasseres i rutenettet etter kolonnebreddeinnstillingene sine.
- Karusell — blokkene arrangeres i en horisontal karusell. Kolonnantall og gap-innstillinger gjelder fortsatt for karuselllayouten.
Når Karusell er valgt, kommer det frem ekstra innstillinger: autospill, løkke, vis eller skjul paginering, vis eller skjul piler, pilefarge, pilestørrelse og autospill-intervall (i millisekunder).
Praktiske eksempler
En enkel rad med tre kolonner
Sett seksjonen til 3 kolonner på desktop, 2 på tablet og 1 på mobil. Legg til tre ikonboksblokker, hver med bredde 1. De vises side om side på desktop, skifter til 2+1 på tablet og stables til én kolonne på mobil.
En seksjon med 4 kolonner og én bred blokk
Sett seksjonen til 4 kolonner. Legg til én blokk med bredde 2 og to blokker med bredde 1 hver. Den brede blokken tar den venstre halvdelen; de to smale blokkene fyller den høyre.
En bunntekst med ulike kolonnebredder
I en Bunntekst-seksjon satt til 4 kolonner, sett en "Om oss"-blokk til bredde 2 (halvparten av bunnteksten). Legg til to menyblokker med bredde 1 hver for å fylle den andre halvdelen.
Tips
- Kolonneinnstillinger er skjult til Avansert modus er aktivert. Se etter bryteren øverst i innstillingspanelet for seksjonen eller blokken.
- Hvis en blokks bredde overstiger seksjonens antall kolonner, strekker blokken seg over hele raden. En bredde-5-blokk i en 4-kolonnerseksjon fyller hele bredden.
- Seksjonene Produktslider og Produktkjøp har bare breddeinnstillinger for blokker — det finnes ingen kolonnantall-innstilling, fordi rutenettet håndteres automatisk for disse seksjonene.