Gå til hovedindhold

    Grids

    Grids · 12 grid kolonne · Symmetrisk grid · Asymmetrisk grid · Grid - tre kolonner · Indsæt et grid · Indstil grid · Tilføj indhold i kolonnerne

    21. okt. 2026

    Grids er komponenter, der stiller indhold op i kolonner på forsider og sektionssider. Der findes fire typer: 12 grid kolonne (én kolonne i fuld bredde), Symmetrisk grid (to lige brede kolonner), Asymmetrisk grid (en bred og en smal kolonne) og Grid - tre kolonner.

    Her kan du læse, hvordan du indsætter et grid, hvordan du indstiller det, og hvordan du vælger, hvad der skal stå i kolonnerne.

    Indsæt et grid

    Indsæt et grid

    Fanen Indhold på en sektionsside, hvor knappen Tilføj indhold er markeret

    Stå på din forside eller sektionsside, og klik på Tilføj indhold nederst på fanen Indhold. Der åbner et vindue med alle de komponenter, du kan vælge.

    Vinduet Tilføj indhold, hvor de fire grid-typer er markeret

    Klik på den grid-type, du vil bruge:

    • 12 grid kolonne: ét element i hele indholdets bredde, fx et kort med baggrundsbillede, et citat, en tidslinje eller en video. Flere elementer lægger sig under hinanden.
    • Symmetrisk grid: to kolonner, der er lige brede.
    • Asymmetrisk grid: en bred og en smal kolonne.
    • Grid - tre kolonner: tre lige brede kolonner. Typen er markeret med (Udfases), så vi anbefaler, at du vælger en af de andre typer til nye sider.

    De fire typer har de samme indstillinger, men de har ikke helt de samme elementer at vælge imellem.

    Indstil grid

    Indstil grid

    Indstillingerne for Grid - tre kolonner, hvor Margin bund, Vælg vandmærke og Sektionstitel er markeret

    Når du har valgt en type, åbner komponenten. Øverst finder du de generelle indstillinger:

    • Margin bund: slå til, hvis der skal være luft efter komponenten.
    • Vælg vandmærke: klik på Vælg, og vælg et vandmærke fra det globale bibliotek. Vandmærket lægger sig i baggrunden af komponenten.
    • Sektionstitel: overskrift over hele komponenten. Den bliver vist som en H2, så du hjælper med at holde overskrifterne i den rigtige rækkefølge.
    • Sektionslink: et link til en oversigtsside. Linket vises øverst til højre i komponenten.

    Læs om afstande og margin

    Læs om dekorationer og vandmærker

    Sektions baggrundsfarve og felterne til kolonnerne, hvor farvevalget og Tilføj indhold er markeret

    Under Sektions baggrundsfarve vælger du den farve, der går fra kant til kant bag komponenten: None, Primær dekorativ, Sekondær dekorativ eller Brugerdefineret. Farverne kommer fra det farveskema, der er sat op på forsiden.

    Længere nede har hver kolonne sit eget felt, fx Kolonne et, Kolonne to og Kolonne tre. Klik på Tilføj indhold under den kolonne, du vil fylde ud.

    Læs om designindstillinger og farver

    Indstillingerne for Asymmetrisk grid, hvor Modsat opstilling og Accordion på mobil er markeret

    I Asymmetrisk grid hedder kolonnerne Bred kolonne og Smal kolonne. Som standard står den brede kolonne til venstre.

    • Slå Modsat opstilling til, hvis den smalle kolonne skal stå til venstre.
    • Slå Accordion på mobil til, hvis bokse i komponenten skal vises som en accordion på mobilen.

    Tilføj indhold i kolonnerne

    Tilføj indhold i kolonnerne

    Vinduet Tilføj indhold for en kolonne, hvor elementet Linkboks er markeret

    Når du klikker på Tilføj indhold i en kolonne, åbner et vindue med de elementer, du kan bruge i den grid-type. Klik på det element, du vil indsætte, fx Linkboks, Kort med baggrundsbillede, Åbningstider - kort, HTML, Video, Formular eller Tilmeldinger til nyhedsbrev.

    I symmetrisk og asymmetrisk grid kan du også vælge fx Artikeloversigt med dato, Infoboks med ikon, Citat, Kontaktkort og Tidslinje.

    Kort med baggrundsbillede viser et billede med en kort tekst og leder videre til en anden side, når man klikker på kortet. Du kan fylde kortet ud på tre måder:

    • Vælg mappe: kortet viser automatisk den nyeste side fra mappen.
    • Indhold: vælg en artikelside eller sektionsside. Sidebillede, sidetitel og sidebeskrivelse bliver hentet automatisk.
    • Manuelt: udfyld selv felterne, og husk at linke til den side, kortet skal lede videre til.

    Du kan også vælge baggrundsfarve og vandmærke og skjule sidebeskrivelse og dato, hvis kortet skal være mere enkelt.

    Mange af elementerne, fx linkbokse og infobokse, kan have et ikon. Du kan vælge et ikon fra ikonbiblioteket eller uploade dit eget.

    Læs om ikoner

    Se eksempler på grids her

    Eksempler på '12 grid kolonne'

    Her ses to eksempler på komponenten med elementerne 'Citat', 'Video', 'Tidslinje' og 'Kort med baggrundsbillede'. 

    I eksempel 1 er der ikke valgt en baggrundsfarve. I eksempel 2 er der både valgt en baggrundsfarve og et vandmræke.  

    Watermark alt

    Eksempler på 'Grid - tre kolonner'

    Eksempel 1

    Her ses et eksempel på komponenten 'Grid - tre kolonner'. Du kan indsætte 'linkbokse' og/eller 'kort med baggrundsbillede og titel' i komponenten. I første eksempel er der tilføjet en sektionstitel - en overskrift til komponenten - og en baggrundsfarve. Dertil et sektionslink, som vises i øverste højre hjørne:

    Eksempel 2

    Nedenunder ses et eksempel på 'Grid - tre kolonner' med komponenterne: Åbningstider, Formular og Video.

    Dette er en sektionstitel

    Kampus Production

    Åbningstider (Eksempel)

    Overskrift

    Mandag 12:00 – 16:00
    Tirsdag 10:00 – 12:00 / 14:00 – 16:00
    Onsdag 12:00 – 16:00
    Torsdag 12:00 – 16:00 / 19:00 – 20:00
    Fredag 10:00 – 12:00 / 13:00 – 14:00
    Lørdag
    Søndag

    Åbningstider

    Samtykke til lagring af indsendte data *

    Eksempler på 'Symmetrisk grid'-komponenten

    Nedenfor ses fem eksempler på, komponenten kan se ud på.

    I første eksempel er kombinationen af indhold som følger: 'kort med baggrundsbillede og titel' og 'artikeloversigt med dato'. I dette eksempel viser komponenten i anden kolonne nyhedsartikler fra Cabana. Du kan manuelt vælge, hvilken artikelmappe, indholdet skal hentes fra.

    I de to næste eksempler nedenfor er kombinationen af indhold i komponenten som følger: 'infoboks med ikon' og 'linkboks'. Disse to indholdsbokse ligner meget hinanden, den ene er blot smal og kan inddeles i yderligere to kolonner, og den anden er bred. 

    Bemærk! I ovenstående eksempel ligner det umiddelbart, at komponenten har tre kolonner. Det har den i praksis også, men de to første kolonner behandles som én ('infoboks med ikon'). Komponenten med samme indholdskombination kan derfor også se ud som herunder:

    I eksemplet nedenfor ses 'Symmetrisk grid'-komponenten med følgende indholdskombination: 'temakort' (venstre) og 'formular' (højre).

    Eksempel på formular

    Må vi gemme dine data? *

    Vil du modtage vores nyhedsbrev?

    Tilmeld dig nyhedsbrevet og modtag ugentlige nyheder.

    I næste eksempel nedenfor ses 'Symmetrisk grid'-komponenten med følgende indholdskombination: 'Åbningstider - kort' og 'Billede'. 

    Kampus Production

    Åbningstider

    Telefonisk support

    Mandag 09:00 – 13:00
    Tirsdag 08:00 – 13:00
    Onsdag 09:00 – 13:00
    Torsdag 12:00 – 13:00
    Fredag 09:00 – 15:00
    Lørdag
    Søndag

    Kontakt os
    tuned on Macbook

    I sidste eksempel nedenfor ses 'Symmetrisk grid'-komponenten med følgende indholdskombination: Video og Kontaktkort.

    Videoguide: Indsæt indhold på kreativ artikelside

    Support

    Cabana support

    Eksempler på 'Asymmetrisk grid'

    Nedenfor ses fem eksempler på, hvordan komponenten 'Asymmetrisk grid' kan se ud.

    I første eksempel er kombinationen af indhold som følger: 'kort med baggrundsbillede' (højre) og 'artikeloversigt med dato' (venstre). Her viser komponenten i venstre kolonne nyhedsartikler fra Guiden. Du kan manuelt vælge, hvilken artikelmappe, indholdet skal hentes fra.

    I eksemplet nedenfor er kombinationen af indhold som følger: 'linkboks' (venstre) og 'infoboks med ikon' (højre). Elementet 'infoboks med ikon' er her inddelt i fire mindre bokse. Du kan nøjes med færre. Der er tilføjet et 'sektionslink', som ses i komponentens øverste højre hjørne.

    Eksempel 2 - 'Linkbokse' og 'infoboks med ikon'

    I nedenstående eksempel er kombinationen af indhold som følger: 'Formular' (højre) og 'Citat' (venstre). Bemærk her, at der er valgt modsat opstilling. 

    Eksempel 3 - Formular og Citat

    Samtykke til lagring af indsendte data *

    I nedenstående eksempel er kombinationen af indhold som følger: 'Tilmeldinger til nyhedsbrev' (venstre) og 'åbningstider - kort' (højre). 

    Eksempel 4 - 'Tilmeldinger til nyhedsbrev' og 'åbningstider - kort'

    Kampus Production

    Åbningstider

    Telefonisk support

    Mandag 09:00 – 13:00
    Tirsdag 09:00 – 13:00
    Onsdag 09:00 – 13:00
    Torsdag 12:00 – 13:00
    Fredag 12:00 – 13:00
    Lørdag
    Søndag

    Kontakt os

    I nedenstående eksempel er kombinationen af indhold som følger: 'Tidslinje' (venstre) og 'Video' (højre). 

    Eksempel 5 - 'Tidslinje' og 'Video'