Met Global Style Settings in Elementor Pro beheer je de visuele identiteit (lettertype & huisstijl kleuren) van je gehele website op één centrale plek. De belangrijkste design-keuzes stel je hier in als standaard. Bij alle tekstvakken, knoppen & titels die je toevoegt, maak je gebruik van deze vooraf ingestelde fonts, sizes en kleuren.
Verandert er later iets in je huisstijl? Dan pas je dit aan in de global style settings en op al je pagina’s wordt dit automatisch doorgevoerd.
Waarom werken met Global Style Settings?
Altijd en overal dezelfde stijl
Goed uitgedachte en ingestelde global style settings voorkomen dat je per ongeluk verkeerde kleurcodes, lettergrootten of lettertypes gebruikt.
Snel en efficiënt werken
Je hoeft niet bij elk nieuw element opnieuw de styling in te stellen. Met een klik kies je de vooraf ingestelde stijl.
Nog meer 'snel en efficiënt' werken
Als er iets verandert in je merkstijl pas je dit op een plek aan en het wordt overal doorgevoerd. Jij hoeft dus niet handmatig alle pagina’s langs.
Wanneer gebruik je Global Style Settings?
Altijd als je een website bouwt met WordPress en Elementor Pro! Je bent echt gek als je het niet doet. 😉
Als het goed is zijn de huisstijl kleuren + -lettertypes, -diktes en -grootte voor paragrafen en koppen onderdeel van je brandguide. Neem deze tijdens de WordPress-setup gelijk over, voordat je begint met het inrichten van pagina’s.
Voor welke onderdelen van je website gebruik je global style settings?
Gebruik van de global style settings is ideaal voor:
Kleur HEX-codes
Je primaire en secundaire merk-kleuren, tekstkleur en achtergrondkleuren.
Typografie
Lettertypes, regelafstanden en letterdiktes voor koptitels (H1, H2, H3) en paragraaf-tekst.
Waar kun je Global Colors instellen in Elementor pro?
Ga naar de site-instellingen (zie video).
Onder de global colors vind je twee categorieën: Systeemkleuren en Aangepaste kleuren.
Systeemkleuren worden standaard meegegeven aan widgets die je toevoegt. Zo gaat ‘tekst’ automatisch naar 'paragraafteksten', 'primair' gaat standaard naar 'Titels' en 'Accent' standaard naar 'knoppen'.
Ik kies er zelf voor om daar de primaire kleuren toe te voegen. Daarna voeg ik onder ‘aangepaste kleuren’ het complete kleuren-pakketje toe met de juiste naam. Tijdens het ontwerpen van pagina’s zijn dit ook de kleuren die ik voornamelijk selecteer.
Waar kun je Global Fonts instellen in Elementor pro?
Ga weer naar de site-instellingen. Ook hier vind je dezelfde twee categorieën: Systeemlettertypen en Aangepaste lettertypen.
De systeemlettertypen komen in grote mate overeen met de systeemkleuren, waarbij Titels, tekst en accent dezelfde widgets besturen.
Voeg hier alle verschillende fonts toe die onderdeel zijn van je brandguide.
Welke Global Fonts worden veel gebruikt?
Als je een merkidentiteit of brandguide hebt gemaakt (of laten maken) staat daar als het goed is precies in omschreven welke typografie wordt gebruikt, altijd herkenbaar voor je merk.Veelvoorkomende Global Fonts die je in de praktijk instelt zijn:
Hoofdtitel of paginatitel
De belangrijkste en grootste titel per pagina. Vaak een opvallend lettertype in een groter formaat.
Sectietitel
De titels boven grote blokken of paragrafen op je pagina.
Subtitels en/of kleine titels
Kleinere koptitels voor sub-secties of blokjes op een pagina.
Paragraaf/Body tekst
Het standaard lettertype voor gewone leesteksten. Kies hier altijd voor een goed leesbaar, rustig lettertype.
Knoppen
De tekststijl op actieknoppen. Vaak wat dikker gedrukt (Bold of Semi-Bold) en soms in hoofdletters.
Accent / opvallend
Een afwijkend stijlvol lettertype (zoals een schreeflettertype of een handgeschreven stijl) voor korte opvallende citaten of subtitels boven een H2.
Handige tip: Geef je Global Fonts in Elementor een ook een herkenbare naam, zoals hierboven die aansluit op de toepassing, zoals "Pagina Titel" of "Knop Tekst". Zo weet je tijdens het bouwen meteen welke stijl je kiest.
Opmerking van Laura: Ik maak hierbij bewust geen gebruik van de vermelding H2/H3/H4. Sterker nog, de aparte instellingen die je hiervoor nog kan doen, gebruik ik niet. Ik geloof namelijk niet dat iedere H2 kop even groot moet zijn.
De toewijzing H2/H3/H4 hoort voor mij echt bij de inhoudelijke (zoek)waarde van een woord. Die waarde zegt niets over de opmaak en styling.
Hoe pas je een globale stijl toe op een element?
Een widget (zoals een titel of knop) bewerk je onder het Stijl-tabje. Je werkt al met Elementor (toch?!), dus die ken je!Hier vind je bij de keuze voor kleur en typografie een soort wereldbol-icoontje. Deze klik je aan en dan kies je gewoon het lijstje de goede kleur of typografie.
Kortom, Global Settings zijn super handig, want:
Het voorkomt handmatige styling per los element
Wat vaak soort voor een rommelige website met allerlei verschillen tussen design-elementen.
Je koppelt elementen makkelijk aan Global Colors & Fonts via het wereldbol-icoon.
Je past stijlen centraal aan in de Site Settings
om in één keer je hele website een nieuwe uitstraling te geven.
