Standaard kleuren Elementor gebruiken kun je eenvoudig doen. Het is een van de dingen die ik echt super fijn vind aan het werken met Elementor: de mogelijkheid om globale kleuren in te stellen voor je site. Dit is handig wanneer je een pagina aan het maken bent en je wilt de kleuren uit je website (huisstijl) laten terugkomen op die pagina. Bijvoorbeeld als je de header aan het aanpassen bent. Zo hoef je niet steeds de kleurcodes op te zoeken en te kopiëren. In dit artikel leg ik je uit hoe je globale kleuren instelt en gebruikt voor je website met behulp van Elementor.
Standaard kleuren instellen in site settings
De standaard kleuren noemen we ook wel de globale kleuren. Je gebruikt ze namelijk globaal over je hele website. Het voordeel van het instellen van standaard / globale kleuren is dat als je ze een keer wilt wijzigen je dit maar vanaf één plek hoeft te doen en je dus niet de hele website hoeft na te lopen.
- Open een pagina (maakt niet uit welke, mag ook een nieuwe pagina zijn) en kies voor ‘Bewerk met Elementor’
- Klik linksbovenin op het hamburgermenu
- Ga naar Site instellingen en klik vervolgens op ‘Globale kleuren’
Als je klikt op globale kleuren zie je een overzicht van de kleuren die zijn ingesteld op je website. Ook als je nog nooit deze globale instelling hebt bezocht, vind je hier de standaard kleuren die je voor je website hebt gebruikt. Deze zijn automatisch toegevoegd door Elementor. Al die kleuren worden dus ergens op je site al gebruikt. Voor onze website hanteren we deze kleuren:
Zoals je ziet hebben we onderscheid gemaakt in verschillende Elementen op de site:
- Titels
- Subtitels
- Tekst
- Accent (bv. voor buttons)
- Randkleur
- Achtergrondkleuren
De witte kleur stel ik eigenlijk ook altijd in als globale kleur. Mocht je toch ooit besluiten dat het bijvoorbeeld meer gebroken wit moet zijn, dan kun je dit hier aanpassen.
Daarnaast zie je ook dat bepaalde kleuren vaker zijn ingesteld. Ik heb echt gekeken naar de elementen op mijn site en op basis daarvan de kleuren ingedeeld. Stel dat ik toch ooit de subtitel roze wil maken, dan kan ik dit doen zonder dat dit effect heeft op andere blokken.
Als je start met het bouwen van de site is het dus raadzaam om de standaard kleuren eerst in te stellen. Heb je je website al staan? Dan zul je alle elementen waarvoor je kleuren hebt ingesteld moeten aanpassen.
Hoe gebruik je de standaard kleuren?
De standaard kleuren worden nu getoond wanneer je ergens de kleuren van wilt aanpassen. Het maakt niet uit of het nu gaat om een achtergrond, tekst, overlay, button; in elk element kun je nu gebruik maken van de globale kleuren. Dit kun je doen door op het wereldbolletje icoon te klikken, je krijgt dan een dropdown te zien van alle kleuren die je hebt ingesteld.
Heb je een kleur eenmaal toegepast, dan zie je dat het global icoontje blauw kleurt.
Standaard kleuren Elementor voor typografie
Het is niet zo dat je nu alle tekst elementen en buttons moet nalopen om deze te koppelen aan een globale kleur (tenzij je deze handmatig een kleur hebt gegeven). Je kunt namelijk voor je body tekst en headings ook globale kleuren instellen. Als je dan een tekst op bijvoorbeeld H2 zet, krijgt deze automatisch al de toegewezen kleur.
Dit doe je ook via de Site instellingen –> Typografie
Zoals je ziet kun je bij deze optie ook gebruik maken van het globale kleuren die je hebt ingesteld. Zo blijft alles mooi aan elkaar gekoppeld.
Let op: als je gebruikt wilt maken van deze kleuren voor de styling van je headings en body, moet je wel eerste de standaard kleuren van je thema uitschakelen. Dit kun je doen via Elementor –> Settings:
Kortom, bouw je een website met Elementor dan zou ik deze functionaliteit zeker gebruiken!
