Fargehåndtering i Designbyggeren

Hvorfor farger er viktige for e-handel

Farger er det mest umiddelbare visuelle signalet en nettbutikk sender ut. Riktig bruk av farger er avgjørende for å bygge tillit, veilede kunder og øke konvertering.

• Merkevare og tillit: Konsekvente merkevarefarger bygger umiddelbar gjenkjennelse og signaliserer profesjonalitet. En vinglete fargebruk virker uorganisert og kan svekke kundens tillit.
• Konverteringsfokus (UX): Kontrastfarger brukes strategisk for å fange oppmerksomheten på Call-to-Action-knapper, som for eksempel Legg i handlekurv. Fargene dirigerer kunden gjennom kjøpsreisen.
• Emosjonell påvirkning: Fargepsykologi spiller en stor rolle. Blått kan signalisere sikkerhet, mens grønt ofte assosieres med natur og sunnhet.
• Tilgjengelighet (A11Y): Tilstrekkelig kontrast mellom tekst og bakgrunn er nødvendig for at alle brukere, inkludert de med synshemninger, skal kunne lese innholdet ditt.

Slik fungerer fargeinnstillingene

Fargeinnstillingene finner du under Temainnstillinger i Designbyggeren. Sørg for at Avansert modus er aktivert for full tilgang til alle funksjoner.

Oppsett av den globale paletten

Innstillingene er delt inn i ulike kategorier. Hvis du leter etter en spesifikk innstilling, kan du bruke søkefeltet i sidemenyen. Hver innstilling lar deg velge farge fra en visuell palett eller skrive inn fargekoder som HEX, HSL eller RGB.

Bruk av variabler

Fargene i temainnstillingene lagres som CSS-variabler. Dette betyr at verdien lagres ett sted og gjenbrukes overalt i designet.

• Gjenbruk: Definer fargen én gang, og den oppdateres automatisk på alle elementer som bruker den.
• Dynamisk oppdatering: Endrer du primærfargen i den globale paletten, vil alle knapper og linker som bruker denne variabelen skifte farge umiddelbart.

Kobling mellom globale farger og blokker

Når du legger til en ny blokk, vil den som standard benytte fargene fra den globale paletten. En tekstblokk vil for eksempel automatisk være koblet til den globale tekstfargen din.

Status for fargekobling

I fargevelgeren vil du se ulike statuser som indikerer om fargen følger den globale malen eller ikke:

1. Aktiv kobling: Feltet viser teksten Linked to global color. Dette betyr at dersom du endrer fargen i temainnstillingene, følger denne blokken etter.
2. Brutt kobling: Hvis du skriver inn en egen fargekode manuelt i en blokk, brytes koblingen. Ikonet til høyre vil endre utseende for å markere at denne blokken nå har en unik farge.
3. Gjenopprett kobling: Du kan når som helst klikke på link-ikonet for å tvinge blokken tilbake til den globale innstillingen.

Bruke andre fargevariabler

Du kan også koble et felt til en annen global variabel enn den som er standard. For eksempel kan du sette tekstfargen i en spesifikk blokk til å alltid følge fargen for primærknapper.

• Klikk på knappen for å endre farge i blokken.
• Velg blant variablene som vises nederst i menyen.
• Feltet vil nå vise variabelnavnet, for eksempel var(--primary-color).

Slik fungerer fargesystemet

Når du lagrer en farge i Temainnstillinger, skrives den inn som en CSS-egendefinert variabel på siden (som --primary-color eller --footer-background-color). Alle komponenter i nettbutikken leser deretter fra disse variablene. Endre primærfargen ett sted, og alle primærknapper på alle sider oppdateres.

Seksjoner og blokker kan legge sine egne bakgrunns- eller tekstfarger oppå dette — disse overstyringene er avgrenset til elementet og påvirker ingenting annet på siden. Hvis en seksjon eller blokk ikke har noen fargeoverstyring, arver den fra den globale paletten.

Fargegrupper

Farger er organisert i grupper. Hver gruppe styrer et bestemt område av nettbutikken.

Base

Grunnlaget for siden.

Lenker

Navigasjonslenker og aktive tilstander.

Primær

Hovedaksjonsfargen. Brukes til primærknapper, interaktive aksenter og fremtredende handlingsoppfordringer.

Sekundær

En alternativ aksjonfarge for sekundærknapper og støttende UI-elementer.

Status

Brukes til tilbakemeldinger, varsler og statusknapper på hele siden.

Produktpriser

Styrer hvordan priser vises på produktkort og produktsider.

Tagger og bånd

Produktbånd vises som merker på produktkort (f.eks. «Ny», «30 % rabatt» eller en egendefinert etikett). Hver båndstype har sin egen bakgrunns- og tekstfarge.

Layout

Strukturfarger for header, meny og bunntekst. Disse samarbeider med Header-bygger og Bunntekst-seksjoner, men gir grunnfargene disse seksjonene arver fra.

Slik tildeles farger CSS-variabler

Hver farge i Temainnstillinger tilsvarer en CSS-egendefinert egenskap. Disse variablene deklareres i :root-selektoren på hver side, slik at de er tilgjengelige globalt for alle komponenter.

Slik brukes farger i brukergrensesnittet

Side og tekst

body-elementet bruker --body-color som bakgrunn og --text-color som forgrunnen. Tekst uten en mer spesifikk farge arver den globale tekstfargen automatisk.

Knapper

Knappefarger bestemmes av knappetypen:

• Primærknapper bruker --primary-color som bakgrunn og --primary-text-color som tekst, og bytter til --primary-color-hover-variantene ved hover.
• Sekundærknapper fungerer på samme måte med --secondary-color og --secondary-text-color.
• Statusknapper (suksess, advarsel, info, feil) bruker sine respektive --*-color- og --*-text-color-variabler.
• Egendefinerte knapper — når en knappblokk har en spesifikk bakgrunns- eller tekstfarge satt direkte i innstillingene, har disse verdiene prioritet over den globale paletten.

Produktbånd

De tre båndtypene (egendefinert, rabatt, ny) leser bakgrunns- og tekstfarge direkte fra sine tilsvarende CSS-variabler. Endrer du båndfarger i Temainnstillinger, oppdateres alle forekomster av den båndstypen i hele nettbutikken.

Header og bunntekst

Headerbanneret leser --header-background-color og --header-text-color. Bunnteksten leser --footer-background-color og --footer-text-color. Header-bygger og Bunntekst-seksjoner kan også legge sine egne bakgrunns- og tekstfargeoverstyrelser oppå disse.