Farger

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. Les mer om de ulike aspektene under 👇

Riktig bruk av farger

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 der det er viktigst – på dine Call-to-Action-knapper (f.eks. "Legg i handlekurv"). Fargene dirigerer kunden gjennom kjøpsreisen.
Emosjonell påvirkning: Fargepsykologi spiller en stor rolle. For eksempel kan blått signalisere sikkerhet (bra for finans/teknologi), mens grønt kan assosieres med natur og sunnhet. Velg farger som gjenspeiler din bransje og dine verdier.
Tilgjengelighet (A11Y): Tilstrekkelig kontrast mellom tekst og bakgrunn er nødvendig for at alle brukere, inkludert de med synshemninger, skal kunne lese innholdet ditt. Et godt fargesystem hjelper deg å opprettholde dette.

Slik fungerer fargeinnstillingene i Mystore/Acendy

Fargeinnstillingene finner du under Temainnstillinger i Designbyggeren. Sørg for at "Avansert modus" er aktivert for full tilgang.
Du når innstillingene enklest ved å klikke på "Temainnstillinger" i toppen, og deretter "Farger".

Oppsett av den globale paletten

Innstillingene for farger er delt opp i ulike kategorier for de ulike fargene.
Om du leter etter en helt spesifikk farge kan du bruke søket i sidemenyen til å finne den.

Hver fargeinnstilling lar deg velge farge fra en fargepalett eller skrive inn fargekode (HEX, HSL, RGB etc.).

Disse fargene blir så tilgjengelig i alle blokker og seksjoner hvor du kan velge farger. I tillegg lagres hver fargeinnstilling som en CSS variabel slik at den kan benyttes om man skriver tilpasset kode.

Bruk og tilpasning av farger

Når du jobber med en individuell blokk (f.eks. et produktbanner eller en tekstdel), vil fargevelgeren gi deg mulighet til å velge en av fargene fra den globale fargepaletten. Dette forsikrer at de samme fargene brukes i konskvent i designet.

Om man har avansert modus aktiv kan man på hver blokk velge å skrive inn en egen fargekode eller velge farge fra fargepaletten, men det anbefales å heller velge blant de globale fargene.

Avansert modus

Sørg for at “avansert modus” er påslått for å få tilgang til alle innstillinger og farger.

Variabler

Fargene i temainnstillingene lagres som CSS-variabler, slik at de kan gjenbrukes overalt i designbyggeren men også gjennom tilpasset kode.

Hva er en variabel?

En CSS-variabel, også kjent som en "CSS custom property", er en måte å lagre verdier som kan gjenbrukes i CSS-koden din. Tenk på det som en beholder for en verdi, som en farge, en størrelse eller et skrift.

Her er noen viktige punkter om CSS-variabler

Gjenbruk:

De lar deg definere en verdi én gang og deretter bruke den flere steder i CSS-koden din. Dette gjør det enklere å vedlikeholde og oppdatere stiler, spesielt i store prosjekter.

Dynamisk oppdatering:

Hvis du endrer verdien til en CSS-variabel, oppdateres alle elementene som bruker den variabelen automatisk.

Fleksibilitet:

De gir deg mer fleksibilitet og kontroll over stilen på nettsiden din.

Relatert artikkel:

Tilpasset CSS

Bruk av farger og variabler

Nå man legger til en blokk som inneholder fargeinnstillinger vil den som standard benytte den fargen som er satt opp i temainnstillinger.

For eksempel; tekstfarge i en blokk vil automatisk linkes til tekstfarge i globale innstillinger.

Dette indikeres på fargevelgeren i blokken med teksten Linked to global color og et ikonsom indikerer at linken er aktiv. Om du ønsker å endre til en farge som ikke er satt opp i temainnstillingene kan du selv skrive inn fargekode i feltet. Ikonet til høyre vil da endre seg og indikerer at linken til den globale fargen er brutt, slik:

Gjenopprett kobling

Om du har endret farge manuelt slik at linken ble brutt, men ønsker å gjenopprette linken kan du klikke på ikonet. Feltet vil da linkes til den globale farger og feltet oppdateres til Linked to global color i tillegg til at ikonet oppdateres.

Bruke andre variabler

I tillegg til å bruke den globale fargen for feltet kan du koble feltet til andre fargevariabler fra temainnstillingene. Du kan for eksempel koble tekstfarge til fargevariablen for primærfarge.

Finn feltet du vil endre farge for
Klikk på knappen for å endre farge
Velg blant variablene som vises i bunnen (hold musepekeren over for å se hvilket felt fargen tilhører)

Når man velger en annen variabel enn den som er global vil feltet fortsatt vise link-ikonet, men nå vil navnet på variabelen vises i feltet. Eksempel: var(—primary-color)

Linken til global farge kan gjenopprettes på samme måte som over.