Fargehåndtering i Designbyggeren

Fargehåndteringen i designbyggeren lar deg etablere en sentralisert fargepalett som garanterer konsistens og effektiviserer designprosessen. Denne artikkelen forklarer hvorfor dette er så viktig for din merkevare, og hvordan du bruker systemet riktig.

Hvorfor farger er kritiske 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:

Aktiv kobling: Feltet viser teksten Linked to global color. Dette betyr at dersom du endrer fargen i temainnstillingene, følger denne blokken etter.
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.
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).