Farger

I innstillingene for nettbutikken din finner du et sted der du kan velge farger. Dette er som å lage en fargepalett som butikken din skal bruke. Velg farger: * Du kan bestemme hvilke farger knappene, tekstene og bakgrunnene i butikken skal ha. * For eksempel kan du bestemme at alle knappene skal være blå. Se endringene: * Når du endrer en farge, kan du se hvordan det ser ut med en gang i en forhåndsvisning. * Dette gjør at du kan prøve deg frem og finne de fargene du liker best. Kort sagt, fargeinnstillingene lar deg tilpasse utseendet på nettbutikken din ved å velge og lagre farger.

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:

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 ikon som 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 link

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.

 

Var denne artikkelen hjelpsom?