Kleuren

Kleuren

Dit artikel legt uit hoe je kleuren kiest en gebruikt in het ontwerp van je Acendy webshop, inclusief hoe je kleurvariabelen gebruikt voor consistentie.

Kleuren kiezen

In de instellingen van je webshop kun je kleuren selecteren om een kleurenpalet voor je winkel te creëren. 

Kleuren kiezen:

• Je kunt de kleuren voor knoppen, teksten en achtergronden in je winkel bepalen.
• Je kunt bijvoorbeeld alle knoppen blauw instellen.

Wijzigingen bekijken:

• Wanneer je een kleur wijzigt, kun je direct zien hoe deze er in een voorbeeld uitziet.
• Hierdoor kun je experimenteren en de kleuren vinden die je het mooist vindt.

Kortom, met de kleurinstellingen kun je het uiterlijk van je webshop aanpassen door kleuren te selecteren en op te slaan.

Kleuren en variabelen wijzigen in je webshop

Wanneer je een blok toevoegt dat kleurinstellingen bevat, wordt standaard de kleur gebruikt die in de thema-instellingen is ingesteld.

Bijvoorbeeld; de tekstkleur in een blok wordt automatisch gekoppeld aan de tekstkleur in de algemene (kleur) instellingen, dit wordt een variabele genoemd.

Je kan dit zien door naar de design builder te gaan (Ontwerp > Jouw ontwerp > Doorwerken) en vervolgens een sectie of kolom (met bijv. typografie of een knop), te wijzigen. In de instellingen van de knop, zie je de optie ''Selecteer knopstijl". Dit staat automatisch op "Primair". Als je wilt overschakelen naar een kleur die niet in de thema-instellingen is ingesteld, kun je dit wijzigen naar ''CUSTOM'' en de kleurcodes in de velden invoeren. Mocht je liever de gekoppelde kleur(en) achter "Primair" willen wijzigen, dan kan je dit als volgt wijzigen:

1. Ga naar de design builder en klik links bovenaan het scherm op je projectnaam. 
2. Klik vervolgens op het pijltje achter je project en klik op 'Instellingen''.
3. Bovenaan het nieuw geopende menu links, staat de optie ''Kleur''. Dit kan je aanklikken om de instellingen te openen.
4. Deze kleuren kan je naar wens wijzigen. Vervolgens kan je rechts bovenaan het scherm op ''Opslaan'' of ''Opslaan en publiceren'' klikken.

Koppeling met kleur (variabele) herstellen

Als je de kleur handmatig hebt gewijzigd waardoor de koppeling is verbroken met de variabele, maar je de koppeling wilt herstellen, kun je dit weer wijzigen van ''CUSTOM'' naar ''Primair''. Het veld wordt dan weer gekoppeld aan de variabele. Je kan in plaats van "Primair", ook voor een van andere variabelen kiezen. Hieronder lees je welke variabelen er nog meer zijn.

Andere variabelen gebruiken

Naast het gebruiken van de primaire kleuren voor de velden, kun je het veld koppelen aan andere kleurvariabelen uit de thema-instellingen. Je kunt bijvoorbeeld de tekstkleur koppelen aan "Secundair", "Standaard", "Succes" en "Waarschuwing".

Wanneer je een kleur handmatig instelt ("CUSTOM"), dan wordt de naam van de variabele in het veld weergegeven. Voorbeeld: var(—primary-color)De koppeling met de primaire kleur kan op dezelfde manier als hierboven worden hersteld.

Wat is een variabele?

De kleuren in de thema-instellingen worden opgeslagen als CSS-variabelen, zodat ze in de hele design builder en via aangepaste code kunnen worden hergebruikt.

Variabele in CSS

Een CSS-variabele, ook wel een "CSS custom property" genoemd, is een manier om waarden op te slaan die in je CSS-code kunnen worden hergebruikt. Zie het als een container voor een waarde, zoals een kleur, grootte of lettertype.

Hier zijn enkele belangrijke punten over CSS-variabelen

Hergebruik:

Ze laten je een waarde één keer definiëren en deze vervolgens op meerdere plaatsen in je CSS-code gebruiken. Dit maakt het eenvoudiger om stijlen te onderhouden en bij te werken, vooral in grote projecten.

Dynamische update:

Als je de waarde van een CSS-variabele wijzigt, worden alle elementen die die variabele gebruiken automatisch bijgewerkt.

Flexibiliteit:

Ze geven je meer flexibiliteit en controle over de stijl van je website.

Gerelateerd artikel:

Aangepaste CSS