Kleur

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 de Design Builder kun je kleuren selecteren om een kleurenpalet samen te stellen. 

Kleuren kiezen:

• Je kunt zelf bepalen welke kleuren je gebruikt voor knoppen, teksten en achtergronden in je winkel.
• Bijvoorbeeld: Je kunt instellen dat alle knoppen blauw zijn.

Wijzigingen bekijken:

• Wanneer je een kleur aanpast, kun je direct zien hoe deze er in een voorbeeld uitziet.
• Zo kun je gemakkelijk experimenteren en de kleuren kiezen die jij het mooist vindt. 

Kortom: met de kleurinstellingen kun je het uiterlijk van je webshop volledig naar wens aanpassen door kleuren te selecteren en op te slaan.

Variabelen

De kleuren in de thema-instellingen worden opgeslagen als CSS-variabelen, zodat ze overal in de Design Builder en via aangepaste code kunnen worden gebruikt.

Wat is een variabele?

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: 
  Je definieert een waarde één keer en gebruikt deze vervolgens op meerdere plaatsen in je CSS-code. Dit maakt het eenvoudiger om stijlen te onderhouden en bij te werken, vooral bij grote projecten.
• Dynamisch bijwerken:
  Als je de waarde van een CSS-variabele verandert, worden automatisch alle elementen die deze variabele gebruiken bijgewerkt.
• Flexibiliteit:
  Variabelen geven je meer flexibiliteit en controle over het ontwerp van je webshop.
   

Gerelateerd artikel
Custom CSS

Kleuren en variabelen wijzigen

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 door linksboven in de beheeromgeving te klikken op Ontwerp > Design Builder. Door vervolgens een sectie (met bijv. typografie of een knop) te wijzigen, zie je in de instellingen van de knop de optie "Selecteer knopstijl". Deze staat standaard ingesteld op "Primair". Als je wilt overschakelen naar een kleur die niet in de thema-instellingen is opgenomen, kun je dit wijzigen naar "CUSTOM", en handmatig de gewenste kleurcodes invullen.

Mocht je liever de gekoppelde kleur(en) achter "Primair" willen wijzigen, dan kan dat als volgt:

1. Ga naar de Design Builder en klik links bovenaan je projectnaam. 
2. Klik vervolgens op het pijltje achter je project en klik op 'Instellingen''.
3. In het nieuw geopende menu links bovenaan zie je de optie "Kleur" - klik hierop om de kleurinstellingen te openen.
4. Pas de gewenste kleuren aan.
5. Klik vervolgens rechts bovenaan op ''Opslaan'' of ''Opslaan en publiceren'' om je wijzigingen door te voeren.

Koppeling 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.