I Designeren er kolonner byggesteinene for å strukturere og justere innhold innenfor rader. De fungerer som fleksible plassholdere for moduler og gjør det mulig for deg å lage profesjonelle og oversiktlige layouter. I denne artikkelen lærer du hvordan du legger til kolonner, tilpasser designet deres og bruker spesielle funksjoner for en optimal presentasjon.

Hva er en kolonne? Kolonner settes inn i rader og er plassholdere for moduler. Innenfor en rad kan du ha opptil 12 kolonner for å organisere innholdet ditt. Ved hjelp av kolonner kan du bedre strukturere og justere innholdselementer på sidene dine. Les mer om rader, kolonner og moduler i denne artikkelen.

På denne siden:

• Hvordan kan jeg legge til og redigere en kolonne?
• Tilpass design
• Digresjon: Stabling av kolonner

Hvordan kan jeg legge til og redigere en kolonne?

Når du jobber i editoren, fører du musepekeren over kolonnen du vil endre, og den blå etiketten "Kolonne" vises øverst til venstre i kolonnen.

1. Legg til en kolonne:

For å legge til en ny kolonne fører du musen over en eksisterende kolonne -> klikker på "Kolonne" -> klikker på "Mer" (tre prikker) og velger det siste punktet "+ Legg til kolonne".

2. Dra i en kolonne for å gi den mer bredde:

En visuell måte å justere bredden på er å dra i kolonnens høyre kant for å gi mer eller mindre bredde mellom den og kolonnen ved siden av. Før musepekeren over kolonnen og dra i den blå linjen som vises til høyre.

3. Flytt kolonner:

For å flytte en kolonne fører du musepekeren over kolonnen til håndtaket med de seks prikkene vises. Hold det nede, og dra kolonnen til en ny plassering innenfor samme rad.

4. I hurtigmenyen finner du allerede de første redigeringsmulighetene:

1. Blyantikonet: Åpne redigeringsfunksjonen for kolonnen. Mer om dette finner du senere i artikkelen.
2. Dupliser kolonne: Hvis du vil gjenbruke en kolonne med alt innholdet et annet sted på nettsiden din, kan du enten duplisere eller kopiere den. Duplisering betyr at du lager en kopi av kolonnen, som automatisk settes inn ved siden av den opprinnelige kolonnen.
3. Slett kolonne: Du kan slette en kolonne og alle modulene den inneholder, ved å velge det røde slette-ikonet.

5. Hvis du klikker på "Mer" (tre prikker), har du følgende muligheter:

4. Vis på enhet: Angi på hvilke enheter (desktop, nettbrett, mobil) kolonnen skal være synlig.
5. Legg til animasjon: Legg til en animasjon som utløses så snart besøkende ser kolonnen i nettleseren sin.
6. Kopier kolonne: Kopier en kolonne for å sette den inn et annet sted på nettsiden (også på andre sider). Gå deretter til siden der du vil sette inn kolonnen. Før musen over kolonnen der den nye kolonnen skal settes inn -> klikk på "Kolonne" -> klikk på "Mer" -> velg "Lim inn".

Tilpass design

1. Bakgrunn

En kolonnebakgrunn kan være ensfarget eller med et bilde:

• Bakgrunnsfarge: Sett inn én farge som kolonnebakgrunn. Du kan stille inn graden av gjennomsiktighet hvis du ønsker det.
• Bakgrunnsbilde: Legg til et bilde som kolonnebakgrunn. Du kan velge om du vil bruke tittelbildet ditt fra Globale data eller laste opp et nytt bilde direkte i raden. Du kan stille inn hvordan bildet skal gjentas innenfor kolonnen, størrelsen og plasseringen, slik at du kan vise bildet optimalt for de besøkende.

I tillegg til standardinnstillingene for bildet kan du også angi hvordan bakgrunnsbildet skal oppføre seg innenfor kolonnen når en besøkende ruller nedover siden:

• Fast posisjon: Bildet blir stående på sin plass under rulling, mens innholdet glir over det.
• Parallax scrolling: Bildet beveger seg saktere enn forgrunnen under rulling, noe som skaper en dybdeeffekt.

2. Bakgrunnsfilter

Legg til et bakgrunnsfilter over kolonnens bakgrunnsfarge eller bilde for å dempe svært fargerike bilder eller bilder med sterke kontraster. Dette er også en god måte å sikre at teksten i kolonnen er lett å lese for besøkende. Husk at du også kan justere graden av gjennomsiktighet for bakgrunnsfilteret.

Eksempel på et bakgrunnsfilter brukt over et bilde:

Ramme og mellomrom

• Skygge: Legg til en skygge for mer dybde.
• Ramme: Legg til en ramme rundt raden og tilpass rammens stil, farge, tykkelse og radius. Tilpass margin (plass utenfor raden) og padding (plass mellom radinnholdet og radens ramme).
• Mellomrom: Med valgene for ytre og indre avstand skaper du plass rundt og i elementene dine. En målrettet tilpasning av avstanden sikrer en klar, ryddig struktur og bedre lesbarhet.

Stabling av kolonner

Stabling av kolonner aktiveres via raden som inneholder kolonnene. Det gjør det mulig å stable kolonner i én rad, slik at de ligger oppå hverandre. Som standard er denne innstillingen automatisk aktivert i visningene for nettbrett og mobile enheter, siden dette er den normale radoppførselen der. Kolonnestabling på desktop er nyttig hvis du for eksempel vil at flere moduler skal vises oppå hverandre i stedet for ved siden av hverandre, som er standardoppførselen i editorens rutenettsystem. Med Stabling av kolonner kan du oppnå dette uten å måtte legge til flere nye rader etter hverandre. Du kan også aktivere denne funksjonen direkte via de tre prikkene.

Slik aktiverer du kolonnestabling:

1. Før musen over raden som inneholder kolonnene.
2. Klikk på "Rad" -> "Mer" (tre prikker).
3. Aktiver innstillingen "Kolonnestabling".

Nøkkelord: Kolonner, Rader, Design, Webdesign, Nettsidelayout, Rediger kolonner, Legg til kolonner, Bakgrunnsbilde, Parallakseeffekt, Responsivt design, Stabling av kolonner, Avstand, Margin, Padding, Animasjon

Oppdatert på: 09/11/2026