Standaard kleuren Elementor instellen: werk met globale kleuren!

Share on linkedin
Share on facebook
Share on twitter
Share on email
Share on whatsapp

Inhoud van dit artikel:

Pssst, bevalt Elementor Pro?

En wil je meer sites bouwen met Elementor Pro? Upgrade nu je licentie en profiteer van kortingen tot 60%🥳

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. 

  1. Open een pagina (maakt niet uit welke, mag ook een nieuwe pagina zijn) en kies voor ‘Bewerk met Elementor’
  2. Klik linksbovenin op het hamburgermenu
  3. Ga naar Site instellingen en klik vervolgens op ‘Globale kleuren’

Elementor site instellingen

standaard kleuren instellen elementor 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:

Standaard kleuren elementor globaal instellen

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. 

Standaard kleuren gebruiken elementor

Heb je een kleur eenmaal toegepast, dan zie je dat het global icoontje blauw kleurt. 

Globale kleuren elementor instellen

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

Standaard kleuren elementor instellen 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: 

Standaard kleuren elementor inschakelen

Kortom, bouw je een website met Elementor dan zou ik deze functionaliteit zeker gebruiken!

Pssst, bevalt Elementor Pro?

En wil je meer sites bouwen met Elementor Pro? Upgrade nu je licentie en profiteer van kortingen tot 60%🥳

Share on linkedin
Share on facebook
Share on twitter
Share on email
Share on whatsapp
Deze vind je misschien ook interessant:

Content verbergen op mobiel in WordPress met Elementor

Soms wil je content verbergen op mobiel of juist of desktop of tablet. Bijvoorbeeld omdat de webpagina anders teveel informatie bevat of omdat de content

Video achtergrond toevoegen in WordPress met Elementor

Een video achtergrond toevoegen aan je WordPress website kun je eenvoudig doen met Elementor Pro. Ook kun je een overlay instellen voor je videoachtergrond, de

Header aanpassen voor mobiel met Elementor

Tegenwoordig is het belangrijk dat je website voor alle apparaten toegankelijk is. Dit betekent ook dat je de header goed moet instellen voor mobiele gebruikers.