Designindstillinger og farver

Stå på din forside i indholdstræet og klik på fanen Design. Øverst finder du sektionen Sleeve & Color med farverne, og når du scroller ned, kommer de øvrige sektioner.

Designfanen er delt op i disse sektioner:

• Sleeve & Color: farvevælger og farvekategorier
• Links & Arrows: pile, link-animation og fremhævelse af links i komponenter
• Font: skrifttyper til overskrifter og brødtekst
• Border: hvor runde eller kantede hjørner skal være
• Skabelon: layout af menuer, brødkrummesti og en række komponenter
• Sidefarve: baggrundsfarve på siderne og komponenter på hvide flader
• Feedback-banner: farven på det globale feedback-banner
• Afstand: margin og padding mellem og i sektioner
• Kontaktkort: billedformat på kontaktkort

Dine ændringer slår først igennem, når du har klikket på Gem og udgiv nederst på forsiden. Vil du se resultatet først, kan du bruge Forhåndsvisning.

Under Sleeve & Color klikker du på Valgte farver i feltet Farver. Er der endnu ikke valgt farver, står der Tilføj indhold i stedet.

Nu åbner vinduet Rediger Valgte farver. Farverne er samlet i grupper, som du folder ud ved at klikke på dem. Du kan læse om alle grupperne i accordion om farvekategorierne nedenfor.

Når du er færdig, klikker du på Opdatér og derefter Gem og udgiv på forsiden. Vil du lukke uden at ændre noget, klikker du på Luk.

Hver farvekategori har sin egen farvevælger. Du kan vælge farven på tre måder:

• Træk i farvefladen og farveskalaen under den.
• Skriv en HEX-kode i feltet, fx #f4f3f1.
• Brug pipetten til at hente en farve fra skærmen.

Klik på Nulstil, hvis du vil gå tilbage til standardfarven. Under hver kategori står en kort beskrivelse af, hvor farven bruges.

Du kan også ændre farverne direkte på hjemmesiden, så du kan se resultatet med det samme. Slå Vis farvevælger til under Sleeve & Color, og gem og udgiv forsiden.

Når du ser din hjemmeside i forhåndsvisning, vises et malerbøtte-ikon i højre side af skærmen. Klik på det, vælg en farvekategori i dropdown-menuen og klik i et af felterne med farvekoder for at ændre farven.

Farvevælgeren på hjemmesiden har et indbygget tjek af webtilgængelighed. Knapperne WCAG AA og WCAG AAA skal være grønne, før du kan gemme. Er de røde, er kontrasten mellem farverne for lav. Klik på Reset for at starte forfra.

Mange kategorier består af en baggrundsfarve og en tilhørende tekstfarve. Sørg altid for, at der er stor kontrast mellem de to, så teksten kan læses af alle. Vi anbefaler at bruge farvevælgeren på hjemmesiden, fordi den tjekker kontrasten for dig.

Du kan give dele af din hjemmeside deres egne farver, fx en sektion for Borger og en for Erhverv. Gå ind på den sektionsside, det gælder, og vælg fanen Design. Her finder du det samme felt med farver som på forsiden.

Farverne på en sektionsside gælder også for alle undersiderne. Kategorierne er de samme som på forsiden, og du vælger farverne på samme måde.

Standardfarverne, der bruges på hvide og neutrale baggrunde:

• Grå tekst: labels, datoer og tidligere niveauer i brødkrummestien
• Sort tekst: standardtekstfarven på hvide, bodyfarvede og grå baggrunde
• Grå kanter/linjer: skillelinjer, rammer om kort og kanter om formularfelter
• Standard knap og Alternativ knap: knapfarve og tekstfarve på udfyldte linkknapper
• Farve på tags, links, pile og ikoner: tekstlinks, tags til filtrering, alle pile og fritliggende ikoner
• Kanter - komponenter: kanten om dele af komponenter, når sidefarven er hvid

Bodyfarven er standardbaggrunden på siderne, når der ikke er valgt hvid sidefarve. Gruppen har fået en række nye kategorier, så alt, der vises på bodyfarven, kan styres for sig:

• Bodyfarve
• Body - tekstfarve og Body - grå tekst
• Body - kantfarve
• Body - tags
• Body - links og Body - links på farvet baggrund
• Body - ikoner og Body - pile
• Body - knap baggrund, Body - knap kant og Body - knap tekst
• Body - knap baggrund ved hover og Body - knap tekst ved hover

Obs! Bodyfarven må ikke være hvid, og den bør heller ikke være mørk. Vælg fx en lys grå, beige eller sart blå. Ønsker du stærke farver, skal du i stedet bruge sektionsfarverne.

Gruppen indeholder Grå baggrund, som bruges som baggrund på enkelte komponenter, fx på artikelsider og i service-menuen.

Her finder du også Formular-knap og Formular-tekst, som bestemmer baggrund og tekstfarve på knapper i Formularer, fx Send-knappen.

Farverne, du kan vælge som baggrund i de enkelte komponenter:

• Primær og Primær tekst: fx CTA-banner, ensfarvet hero og tooltips
• Sekundær og Sekundær tekst: fx ikoner i accordion og fremhævede linkbokse
• Knap på primær baggrund og Knap på sekundær baggrund: farve, tekst og kant på knapper, når komponenten har primær eller sekundær baggrund

Primær dekorativ og Sekundær dekorativ med tilhørende tekstfarver bruges som baggrund på sektioner og større komponenter, fx Aktuelle artikler, Fremhæv artikler, Eventkort, Linkbokse, CTA-banner og Temakomponent. Farverne fylder typisk hele sidens bredde.

Læs om Temakomponent og temakort

Farver til artikelsider:

• Skillelinjer: linjer, der deler indhold op, fx over Vedhæftninger og i sidebaren
• Ikoner under skillelinjer: ikonerne i fx Vedhæftninger
• Artikelelement 1-6 med tekstfarver: seks farver, du kan vælge mellem i udvalgte komponenter på artikelsider, fx Accordion, Knap med ikon, Knapper med ikon og Faktaboks

Med artikelelement-farverne kan du skelne mellem indhold eller adskille flere komponenter af samme type. Du vælger farven i komponenten ved at klikke på en af de seks farver.

Farverne i footeren styres uafhængigt af resten af siden:

• Farve på footer og Tekstfarve i footer
• Footer - knapfarve og Footer - knapfarve (tekst), som vises, når musen holdes over knapper og links
• Footer - farve på ikoner
• Footer - farve på pile

Farverne til menuen, når du bruger Menufarve:

• Menufarve og Menu tekst
• Farve på søgeikon
• Farve på understregning, der vises, når musen holdes over et menupunkt
• Knap - menu kant og Knap - menu tekst til CTA-knapper i menuen

Læs om menuer og navigation

Et overlay er et farvelag over et billede, der sikrer, at teksten kan læses. Typen af overlay hører til komponenten, men du vælger farverne:

• Overlay (hele billedet)
• Overlay - start og Overlay - slut til overlay, der bliver gradvist svagere
• Overlay - tekst
• Overlay - knap og Overlay - knaptekst

Læs om hero og topkomponenter

Den tertiære farve udfases. De elementer, der brugte den, er flyttet over på andre farver, så du skal ikke indstille den.

Under Links & Arrows vælger du, hvilke pile der bruges på hele hjemmesiden. Der er to kategorier:

• CTA Pile: pile i knapper og call-to-action-links
• List Pile: pile i lister, fx på listesider og i sidebaren

Øverst kan du se de pile, der er valgt nu. Klik på en pil i listen for at vælge den.

Vælg, hvordan links i brødteksten fremhæves, når musen holdes over dem, fx Default eller Underline on hover. Du kan prøve animationerne direkte på designfanen ved at holde musen over eksempel-linksene.

Her bestemmer du, hvordan links i komponenter og i brødkrummestien fremhæves:

• Default: farve, når musen holdes over. Har linket en pil, fremhæves det ikke ekstra.
• Color on hover: overskriften får farve, når musen holdes over.
• Underline on hover: overskriften understreges, når musen holdes over.
• Fixed underline: overskriften er altid understreget.

Læs om knapper og links

Under Font vælger du to skrifttyper:

• Primær: overskrifter på alle sider og i elementer som menu og footer
• Sekundær: brødtekst på alle sider

Vælg skrifttyperne i listen til højre. Du kan søge i listen med feltet Filtrér fonte.

Feltet Live preview viser, hvordan de valgte skrifttyper ser ud sammen. Mærket i hjørnet viser, hvor mange fonte der er valgt.

Vælg skrifttyper, der passer til din organisations visuelle identitet, og som er lette at læse. Skrifttyper uden fødder er som regel lettere at læse på en skærm.

Under Border bestemmer du med skydere, hvor runde eller kantede hjørnerne skal være. 0 er helt kantet. Du kan indstille hjørnerne hver for sig, så du fx kan kombinere et rundt søgefelt med kantede bokse:

• Kanter - komponenter: bokse i komponenterne
• Billede i selvstændig boks - kanter: bokse med billeder
• Kanter - søgefelter
• Kanter - knapper
• Billeder - kanter: rene billeder
• Formular-elementer og filtrering/dropdown: fx dropdown-menuer i Artikelliste og felter i Formularer

Der skelnes mellem kanterne på rene billeder og kanterne på bokse, hvor billedet er en del af boksen. Indstil begge, hvis du vil have et ensartet udtryk.

Under Skabelon vælger du layout af navigation og en række komponenter. Klik på det design, du vil bruge.

Venstremenu: type 1 har et let udtryk, type 2 har streger mellem punkterne og er mere kantet.

Fremhæv sidemenu med en baggrundsfarve: slå til, hvis venstremenuen skal indrammes med en baggrundsfarve, så den skiller sig tydeligere ud.

Læs om menuer og navigation

Vælg, hvordan ikonerne i servicemenuen på artikelsider skal se ud. Type 1 viser ikonerne i en cirkel, type 2 viser dem uden cirkel.

Brødkrummesti: vælg mellem to layouts. Type 1 har en pil mellem siderne, type 2 en skråstreg.

Brødkrummesti på mobil (ny): vælg, hvordan stien vises på mobil og ved kraftig zoom. Fuld sti bryder linkene om på flere linjer. Tilbage-pil viser kun ét link tilbage til det forrige niveau.

Vælg, hvor datoen vises på kortene i komponenten Eventkort: nederst til venstre, øverst til venstre eller i en cirkel øverst til højre.

Læs om artikellister og fremhævede artikler

Linkkort: vælg udseendet på linkkort, hvor teksten står under billedet, fx med eller uden pil.

Linkkort uden billede (ny): vælg udseendet på linkkort, hvor teksten vises uden billede.

Vælger du et design uden pil, fremhæves titlen stadig, når musen holdes over. Forskellen på Transparent og de andre designs ses kun, når komponenten har en baggrundsfarve.

Læs om linkbokse og kortsamlinger

Vælg udseendet på kort, der primært består af et billede med en lille tekst ovenpå, fx i kortsamlinger. Du kan vælge med eller uden pil.

Vælg udseendet på de links, der kan ligge i komponenternes øverste højre hjørne, også kaldet Læs mere-links, fx med eller uden pil.

Vælg designet på kontaktkort i portrætformat: Standard eller Transparent. Designet bruges fx i Kontaktliste og Organisationstræ.

Læs om kontakter og kontaktliste

Vælg, hvor ikonerne placeres på linkbokse, infobokse og linkkort uden billede: Centrer ikon, som er standard, eller Sidestillet ikon, som placerer ikonet til venstre.

Vælg udseendet på alle accordions: Standard, Bjælker eller Indrammet.

Under Sidefarve vælger du baggrundsfarven på siderne:

• Default: forside og sektionssider er bodyfarvede, mens artikelsider, listesider og søgesider er hvide
• Body: alle sider er bodyfarvede
• White: alle sider er hvide

Du kan også vælge sidefarve på den enkelte side under fanen med sideindstillinger.

De fleste komponenter er som standard hvide. Derfor kan du justere deres udtryk, når de ligger på en hvid baggrund, så de ikke smelter sammen med den:

• Komponenter på hvid sektion: når sektionen har hvid baggrund
• Komponenter på hvid sidetype: når sidefarven er hvid

Under Feedback-banner vælger du baggrundsfarven på det globale feedback-banner, hvor brugerne kan give feedback på siden. Klik på en af farverne, eller vælg User defined.

Læs om bannere og annoncer

Under Afstand indstiller du afstandene på tværs af hjemmesiden med skydere. Afstandene gør siden overskuelig og sørger for, at indholdet ikke bliver klemt.

Margin er afstanden mellem sektioner og komponenter. Padding er afstanden inde i en sektion, mellem kanten og indholdet.

• Afstand for margin bund på desktop og mobil: afstanden under sektioner på sektionssider
• Topafstand og Bundafstand for sektions-padding på desktop og mobil: ses kun, når sektionen har en baggrundsfarve
• Artikel komponent margin bund: afstanden under alle komponenter i artikelindhold

Under Kontaktkort vælger du billedformatet på kontaktkort for hele hjemmesiden. Du kan indstille horisontale og vertikale kontaktkort hver for sig:

• Ingen: den enkelte komponent bestemmer selv
• Standard (3:2)
• Portræt (4:5)

Læs om kontaktkort

Dark mode viser hjemmesiden i mørke farver. Greyscale mode lægger et gråt lag over hele siden, også billeder og knapper. Begge dele hjælper fx brugere med migræne eller anden synsfølsomhed.

Gå til fanen Indstillinger på forsiden og find sektionen Visuelle indstillinger. Slå Dark mode og/eller Grayscale mode til, og gem og udgiv forsiden.

Knapperne vises i højre side af menuen. Obs! De er en del af undermenuen, så de vises kun, hvis der er indhold i undermenuen.

Læs om menuer og navigation

• Dropdown til: Darkmode og Greyscale: slå til, hvis knapperne skal samles i en dropdown-menu i stedet for at stå side om side
• Vis label ved dark mode-knap og Vis label ved grayscale-knap: viser en tekst ved siden af knappen
• Label til dark mode og Label til grayscale: udfyld, hvis du vil overskrive standardteksten på labelen

Er jeres logo mørkt, kan det blive svært at se i dark mode. Derfor kan du indsætte en lys udgave af logoet til hovedmenuen og footeren og et Sideikon til dark mode under fanen Indstillinger. Når brugeren slår dark mode til, skiftes logoet automatisk.

Alle farvekategorier har en mørk udgave, der bruges i dark mode. Farverne kan ikke vælges i farvevælgeren, men Cabana kan tilpasse dem i dit stylesheet. Kontakt Cabana på support@cabana.dk eller telefon 33 11 03 10, hvis du ønsker ændringer.