I Designeren er kolonner byggestenene til at strukturere og justere indhold inden for rækker. De fungerer som fleksible pladsholdere for moduler og gør det muligt for dig at skabe professionelle og overskuelige layouts. I denne artikel lærer du, hvordan du tilføjer kolonner, tilpasser deres design og bruger specielle funktioner for en optimal præsentation.

Hvad er en kolonne? Kolonner indsættes i rækker og er pladsholdere for moduler. Inden for en række kan du have op til 12 kolonner for at organisere dit indhold. Ved hjælp af kolonner kan du bedre strukturere og justere indholdselementer på dine sider. Læs mere om rækker, kolonner og moduler i denne artikel.

På denne side:

• Hvordan kan jeg tilføje og redigere en kolonne?
• Tilpas design
• Digression: Stabling af kolonner

Hvordan kan jeg tilføje og redigere en kolonne?

Når du arbejder i editoren, skal du føre musemarkøren over den kolonne, du vil ændre, og den blå etiket "Kolonne" vises øverst til venstre i kolonnen.

1. Tilføj en kolonne:

For at tilføje en ny kolonne skal du føre musen over en eksisterende kolonne -> klikke på "Kolonne" -> klikke på "Mere" (tre prikker) og vælge det sidste punkt "+ Tilføj kolonne".

2. Træk en kolonne for at tilføje mere bredde:

En visuel metode til at justere bredden er at trække i kolonnens højre kant for at tilføje mere eller mindre bredde mellem den og den tilstødende kolonne. Før musemarkøren over kolonnen og træk i den blå bjælke, der vises til højre.

3. Flyt kolonner:

For at flytte en kolonne skal du føre musemarkøren over kolonnen, indtil håndtaget med de seks prikker vises. Hold det nede, og træk kolonnen til en ny position inden for den samme række.

4. I hurtigmenuen finder du allerede de første redigeringsmuligheder:

1. Blyantikonet: Åbn kolonnens redigeringsfunktion. Mere om dette finder du senere i artiklen.
2. Duplikér kolonne: Hvis du vil genbruge en kolonne med alt dens indhold et andet sted på din hjemmeside, kan du enten duplikere eller kopiere den. Duplikering betyder, at du opretter en kopi af kolonnen, som automatisk indsættes ved siden af den originale kolonne.
3. Slet kolonne: Du kan slette en kolonne og alle de moduler, den indeholder, ved at vælge det røde slet-ikon.

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

4. Vis på enhed: Angiv på hvilke enheder (desktop, tablet, mobil) kolonnen skal være synlig.
5. Tilføj animation: Tilføj en animation, der udløses, så snart besøgende ser kolonnen i deres browser.
6. Kopier kolonne: Kopier en kolonne for at indsætte den et andet sted på hjemmesiden (også på andre sider). Gå derefter til den side, hvor du vil indsætte kolonnen. Før musen over kolonnen, hvor den nye kolonne skal sættes ind -> klik på "Kolonne" -> klik på "Mere" -> vælg "Indsæt".

Tilpas design

1. Baggrund

En kolonnebaggrund kan være ensfarvet eller med et billede:

• Baggrundsfarve: Indsæt en enkelt farve som kolonnebaggrund. Du kan indstille graden af gennemsigtighed, hvis du ønsker det.
• Baggrundsbillede: Tilføj et billede som kolonnebaggrund. Du kan vælge, om du vil bruge dit titelbillede fra Globale data eller uploade et nyt billede direkte i rækken. Du kan indstille, hvordan billedet skal gentages inden for kolonnen, dets størrelse og positionering, for at sikre, at du kan vise billedet optimalt for dine besøgende.

Udover de standardindstillinger for billedet kan du også angive, hvordan baggrundsbilledet skal opføre sig inden for kolonnen, når en besøgende ruller ned på siden:

• Fast position: Billedet forbliver på sin position under scrolling, mens indholdet glider hen over det.
• Parallax scrolling: Billedet bevæger sig langsommere end forgrunden under scrolling, hvilket skaber en dybdeeffekt.

2. Baggrundsfilter

Tilføj et baggrundsfilter over din kolonnes baggrundsfarve eller billede for at afdæmpe meget farverige billeder eller billeder med stærke kontraster. Dette er også en god måde at sikre, at teksten i kolonnen er let at læse for besøgende. Husk, at du også kan justere graden af gennemsigtighed for dit baggrundsfilter.

Eksempel på et baggrundsfilter, der bruges over et billede:

Ramme og mellemrum

• Skygge: Tilføj en skygge for mere dybde.
• Ramme: Tilføj en ramme til rækken og tilpas rammens stil, farve, tykkelse og radius. Tilpas margin (plads uden for rækken) og padding (plads mellem rækkeindholdet og rækkens ramme).
• Mellemrum: Med mulighederne for ydre og indre afstand skaber du plads omkring og i dine elementer. En målrettet afstandstilpasning sikrer en klar, ryddelig struktur og en bedre læsbarhed.

Stabling af kolonner

Aktivering af Stabling af kolonner sker via rækken, der indeholder kolonnerne. Det gør det muligt at stable kolonner i en enkelt række, så de ligger oven på hinanden. Som standard er denne indstilling automatisk aktiveret i visningsvinduer for tablets og mobile enheder, da dette er deres normale rækkeadfærd. Desktop-kolonnestabling er nyttigt, hvis du for eksempel ønsker, at flere moduler skal vises oven på hinanden i stedet for ved siden af hinanden, hvilket er standardadfærden i editorens gittersystem. Med Stabling af kolonner kan du opnå dette uden at skulle tilføje flere nye rækker efter hinanden. Du kan også aktivere denne funktion direkte via de tre prikker.

Sådan aktiverer du kolonnestabling:

1. Før musen over rækken, der indeholder kolonnerne.
2. Klik på "Række" -> "Mere" (tre prikker).
3. Aktivér indstillingen "Kolonnestabling".

Nøgleord: Kolonner, Rækker, Design, Webdesign, Hjemmesidelayout, Rediger kolonner, Tilføj kolonner, Baggrundsbillede, Parallax-effekt, Responsivt design, Stabling af kolonner, Afstand, Margin, Padding, Animation

Opdateret den: 14/08/2025