Er is een moment dat zich in vrijwel elk websiteproject betrouwbaar herhaalt: het blauw moet een tikje donkerder worden. Wat in een netjes opgezette website een minuut duurt, wordt in een gegroeide website een zoektocht over veertig pagina's. Het verschil ontstaat helemaal aan het begin.
Waar de centrale instellingen liggen
In de Elementor-editor klikt u linksboven op het hamburgermenu en kiest u Website-instellingen. Daar vindt u onder meer Globale kleuren en Globale lettertypen.
Wat u hier vastlegt, staat daarna in elke kleurkiezer en in elke typografie-instelling als benoemde waarde ter keuze. Kiest u in een widget die waarde in plaats van een vaste waarde, dan is het widget er duurzaam mee verbonden. Wijzigt u later de waarde, dan wijzigt het widget mee.
Dat is de hele truc. En hij wordt toch meestal overgeslagen, omdat het aan het begin sneller gaat om gewoon een kleurwaarde in te tikken.
Hoeveel kleuren zinvol zijn
Elementor legt vier standaardkleuren aan. In mijn projecten werk ik met zes tot acht — meer is vrijwel nooit nodig, en minder wordt krap.
Een indeling die zich heeft bewezen:
- Primair — uw hoofdkleur, voor knoppen en accenten.
- Secundair — de tweede merkkleur, spaarzaam ingezet.
- Tekst — de tekstkleur voor lopende tekst. Zelden zuiver zwart; een zeer donker grijs leest prettiger.
- Kop — vaak dezelfde als tekst, soms een tint donkerder.
- Achtergrond — de paginaachtergrond.
- Vlak — een licht afwijkende tint voor kaarten en uitgelichte gedeelten.
- Rand — voor lijnen en scheidingen.
- Accent — voor meldingen of waarschuwingen, als dat nodig is.
Geef sprekende namen. „Primair“ en „Vlak licht“ zeggen u over een jaar nog iets; „Kleur 5“ niet.
Een woord over contrast
Controleer tekstkleur tegen achtergrondkleur op voldoende contrast voordat u die vastlegt. Voor normale tekst geldt een verhouding van minstens 4,5 op 1 als ondergrens. Er zijn gratis controlegereedschappen die daar seconden voor nodig hebben.
Dat is geen formaliteit. Lichtgrijze tekst op een witte ondergrond ziet er op uw gekalibreerde monitor elegant uit en is op een telefoon in zonlicht simpelweg niet leesbaar. En omdat toegankelijkheidseisen voor websites steeds bindender worden, is dat ook de kant waar u wilt staan.
Typografie centraal vastleggen
Onder Globale lettertypen definieert u lettertypefamilie, grootte, snede, regelhoogte en letterafstand voor de terugkerende tekstrollen — primair, secundair, tekst, accent — en onder Themastijl daarnaast de standaardwaarden voor H1 tot en met H6 en lopende tekst.
Twee aanbevelingen uit de praktijk:
Twee lettertypefamilies volstaan. Eén voor koppen, één voor lopende tekst. Elke extra familie kost laadtijd en maakt het beeld onrustig. Vaak volstaat zelfs één enkele familie in twee snedes.
Regelhoogte niet vergeten. Voor lopende tekst zit een waarde rond 1,6 meestal goed; koppen verdragen duidelijk minder, zo'n 1,2. De regelafstand bepaalt meer over de leesbaarheid dan de lettergrootte — daarover in detail: Regelafstand in Elementor goed instellen.
De meest voorkomende fout
Die ziet er zo uit: iemand legt globale kleuren aan — en tikt dan toch in het widget de kleurwaarde met de hand in, omdat de kleurkiezer net openstaat.
De kleur klopt, het resultaat ziet er identiek uit, en de verbinding ontbreekt. Bij de volgende kleurwissel blijft precies dat widget achter.
Let erop dat u in de kleurkiezer de globale waarde kiest, herkenbaar aan het kleine wereldbolsymbool, en niet de vrije kleurwaarde ernaast. Hetzelfde onderscheid geldt bij de typografie.
Als de website er al staat
Achteraf omzetten is monnikenwerk, maar het loont. Ga niet pagina voor pagina te werk, maar per elementtype: eerst alle knoppen, dan alle koppen, dan de vlakken. Zo blijft de blik bij hetzelfde patroon en schiet u duidelijk sneller op.
Gebruik de gelegenheid om op te ruimen. Meestal blijkt dat een website met zogenaamd vier kleuren in werkelijkheid elf licht verschillende blauwtinten bevat.
Elementor Pro: Globale kleuren en lettertypen zijn er in beide versies. Pro breidt dat uit naar het koptekstgedeelte, de footer, pop-ups en berichtopmaak — daar slaan dezelfde instellingen dan eveneens aan. Bekijk Elementor Pro
Waarom de moeite loont
Een uur aan het begin bespaart u later dagen. Ik heb klantprojecten overgenomen waarin een kleurwissel drie dagen zou hebben geduurd, omdat elke kleur aan elk widget afzonderlijk vastzat. In een netjes opgezet project is diezelfde wissel één wijziging op één plek.
Hoe u een website vanaf het begin zo structureert dat ze wijzigbaar blijft, is een van de zwaartepunten van mijn Elementor-training.
Tags