Cursus WordPress – UCLL

Elementor: je huisstijl

Hoofdstuk 3 van 13

Een website ziet er professioneel uit als alles bij elkaar past: dezelfde kleuren, dezelfde lettertypes, dezelfde knoppen op elke pagina. Dat noemen we een huisstijl. In Elementor leg je die huisstijl één keer vast in de Website instellingen. Alle pagina’s en widgets halen hun kleuren en lettertypes dan daar vandaan.

In dit hoofdstuk leer je waar die instellingen zitten, hoe je ze gebruikt in je widgets, en hoe je zelf een goed kleurenpalet en een mooie lettertypecombinatie kiest.

De volledige homepagina van Bakkerij De Korenaar in bruin, goud, crème en rood, met sierlijke titels en een eenvoudige tekstletter
De huisstijl van Bakkerij De Korenaar: vier hoofdkleuren, twee lettertypes en afgeronde knoppen, overal hetzelfde.

Kijk naar de voorbeeldsite: de titels zijn overal in hetzelfde sierlijke lettertype (Playfair Display), de tekst in een rustige, goed leesbare letter (Inter), de knoppen zijn overal afgerond en roodbruin, en de kleuren bruin, goud en crème komen telkens terug. Niets daarvan is per pagina ingesteld: het komt allemaal uit de Website instellingen.

1. Waarom werken met een globale huisstijl?

Eén keer aanpassen = overal aangepast.

Stel: je bouwt een site van tien pagina’s met in totaal zestig titels, veertig knoppen en twintig gekleurde blokken. Je geeft elke titel met de hand de kleur bruin (#7A4A26). Na drie weken zegt je klant: “Kan het bruin iets warmer?” Dan moet je honderdtwintig elementen één voor één openen en aanpassen. Je vergeet er gegarandeerd een paar, en je site is niet meer consistent.

Werk je met een globale kleur “Primair”, dan staat er in al die elementen niet “#7A4A26”, maar “gebruik de kleur Primair”. Pas je in de Website instellingen de kleur Primair aan, dan verandert ze meteen op elke pagina. Hetzelfde geldt voor globale lettertypes: wil je een ander lettertype voor je titels, dan pas je dat op één plek aan.

Bijkomende voordelen:

  • Consistentie: je kan per ongeluk geen “bijna hetzelfde bruin” gebruiken.
  • Snelheid: in een widget kies je een kleur met één klik uit je eigen palet, je hoeft geen kleurcodes te onthouden.
  • Samenwerken: wie na jou aan de site werkt, ziet meteen welke kleuren en lettertypes erbij horen.

De vuistregel van deze cursus: kies in een widget nooit zomaar een losse kleur of een los lettertype. Kies altijd een globale.

2. De Website instellingen openen

  1. Open een pagina met Elementor (bijvoorbeeld je homepagina).
  2. Klik op het Elementor-logo linksboven (1).
  3. Klik op Website instellingen (2).
Het menu onder het Elementor-logo met Website instellingen gemarkeerd
Klik op het Elementor-logo (1) en kies “Website instellingen” (2).

Het paneel toont nu alle onderdelen van je huisstijl, in drie groepen:

Het paneel Website instellingen met de groepen Ontwerpsysteem, Thema stijl en Instellingen
De drie groepen: Ontwerpsysteem (1), Thema stijl (2) en Instellingen (3).
  1. Ontwerpsysteem: je Globale kleuren en Globale lettertypes, de basis van alles.
  2. Thema stijl: hoe gewone elementen er standaard uitzien: Typografie (tekst, links, koppen H1–H6), Knoppen, Afbeeldingen en Formuliervelden. (Hello thema header en footer gebruiken we niet: onze header en footer komen uit de Thema bouwer.)
  3. Instellingen: Website identiteit (naam, logo, favicon), Achtergrond, Lay-out, Lightbox, Paginaovergangen, Aangepaste CSS en Aanvullende instellingen.

Met het pijltje linksboven ga je terug naar dit overzicht, met het kruisje rechtsboven sluit je de Website instellingen.

Opslaan gebeurt hier met de knop “Wijzigingen opslaan” onderaan het paneel, niet met Publiceren. Zodra je iets wijzigt, kleurt die knop roze. Een wijziging in de Website instellingen geldt meteen voor je hele site, ook voor pagina’s die al online staan. Denk dus even na voor je opslaat.

3. Globale kleuren

Klik in de Website instellingen op Globale kleuren.

Het paneel Globale kleuren met vier systeemkleuren, twee aangepaste kleuren en de knop Kleur toevoegen
Systeemkleuren (1), aangepaste kleuren (2) en de knop “Kleur toevoegen” (3).
  1. Systeemkleuren: vier vaste kleuren die Elementor overal als standaard gebruikt: Primair, Secundair, Tekst en Accent. Je kan hun naam en kleur aanpassen, maar ze niet verwijderen. Bij de bakkerij: Primair (bruin) #7A4A26, Secundair (goud) #C9963C, Tekst #3B3029 en Accent (rood) #B5452B.
  2. Aangepaste kleuren: extra kleuren die je zelf toevoegt. Bij de bakkerij: Crème #F8F1E7 en Wit #FFFFFF.
  3. Kleur toevoegen: voeg een nieuwe aangepaste kleur toe.

Bovenaan staat Show global settings. Staat die op Ja, dan toont het canvas een overzicht van al je globale kleuren en lettertypes. Handig om je palet in één oogopslag te zien.

Een globale kleur aanpassen

  1. Klik op het kleurvakje naast een kleur.
  2. De Kleurenkiezer opent (1). Kies een kleur in het vlak, of typ een kleurcode (bijvoorbeeld #7A4A26) in het veld onderaan. Met HEXA, RGBA en HSLA wissel je tussen notaties.
  3. Klik op de naam van de kleur om ze een duidelijke naam te geven, bijvoorbeeld “Primair (bruin)”.
  4. Klik op Wijzigingen opslaan.
De Kleurenkiezer geopend bij de kleur Primair bruin met de code #7A4A26; het canvas toont het overzicht Globale Kleuren
De Kleurenkiezer (1). Rechts toont het canvas al je globale kleuren.

Geef je kleuren een naam die zegt waarvoor je ze gebruikt, niet alleen welke kleur het is: “Primair (bruin)”, “Achtergrond licht”, “Accent (knoppen)”. Wie later de site aanpast, weet dan meteen welke kleur waar hoort.

4. Globale lettertypes

Klik op het pijltje terug en kies Globale lettertypes.

Het paneel Globale lettertypes met de systeemlettertypes Titels, Ondertitels, Tekst en Knoppen
Systeemlettertypes (1) en aangepaste lettertypes (2). Het canvas toont een voorbeeld van elk lettertype.
  1. Systeemlettertypes: vier vaste stijlen. Bij de bakkerij heten ze Titels, Ondertitels, Tekst en Knoppen.
  2. Aangepaste lettertypes: extra stijlen die je zelf toevoegt met Stijl toevoegen.

Onderaan staat nog Fallback lettertype familie: het lettertype dat de browser gebruikt als jouw lettertype (even) niet geladen kan worden.

Een globaal lettertype aanpassen

  1. Klik op het potloodje naast een lettertype, bijvoorbeeld Titels.
  2. Het venster Typografie opent met alle eigenschappen:
    • Familie: het lettertype zelf (hier Playfair Display).
    • Grootte: de lettergrootte (laat je dit leeg, dan bepaalt de Thema stijl de grootte).
    • Dikte: hoe vet (hier 700 (Vet)).
    • Transformeren: bijvoorbeeld alles in hoofdletters.
    • Stijl: normaal of cursief.
    • Decoratie: onderlijnen en dergelijke.
    • Lijnhoogte en Letterspatiëring: de ruimte tussen regels en tussen letters.
  3. Klik op Wijzigingen opslaan.
Het venster Typografie van het globale lettertype Titels met Familie Playfair Display en Dikte 700
Het globale lettertype “Titels”: Playfair Display, vet.

Het schermicoontje naast Grootte, Lijnhoogte en Letterspatiëring betekent dat je die waarden per toestel kan instellen. Zo maak je titels op gsm automatisch iets kleiner.

5. Thema stijl: typografie, knoppen, afbeeldingen en formuliervelden

Waar je globale kleuren en lettertypes je palet zijn, bepaalt de Thema stijl hoe gewone elementen er standaard uitzien. Zo hoef je niet elke titel, link of knop afzonderlijk op te maken.

Typografie

Kies Typografie onder Thema stijl.

Het paneel Typografie met instellingen voor Body, Link en H1, telkens met een wereldbolletje voor globale kleur en typografie
Typografie: Body (gewone tekst), Link en H1. Overal staat een globale kleur en een globaal lettertype ingesteld.
  • Body: de gewone tekst van je site: Tekstkleur, Typografie en Paragraaf marge (de ruimte tussen alinea’s).
  • Link: de kleur en typografie van links, apart voor Normaal en Hover (als je muis erover beweegt).
  • H1 tot en met H6: per titelniveau een kleur en typografie.

Scroll naar beneden voor de koppen H1 tot H6:

Het paneel Typografie verder gescrold met de instellingen voor H1 en H2
Per titelniveau (H1, H2 …) stel je een kleur en een typografie in.

Waarom koppen hier instellen? Je zet in elke Koptekst-widget de juiste HTML tag (H1, H2, H3). Hier bepaal je één keer hoe groot en in welk lettertype een H1, een H2 of een H3 is. Zo zijn alle H2’s op je site even groot, en blijft je pagina-opbouw logisch voor Google en voor schermlezers. Een goede verhouding is bijvoorbeeld H1 = 48 px, H2 = 36 px, H3 = 24 px, met kleinere waarden op gsm.

Bovenaan sommige Thema stijl-pagina’s staat een oranje melding over standaardkleuren en -lettertypen. Zolang je met globale kleuren en lettertypes werkt, hoef je daar niets mee te doen. Merk je dat een kleur of lettertype uit de Thema stijl niet doorkomt in een widget, kijk dan in het dashboard bij Elementor → Instellingen.

Knoppen

Kies Knoppen onder Thema stijl. Hier bepaal je hoe alle knoppen van je site eruitzien.

Het paneel Knoppen met Typografie, Tekstkleur, Achtergrond type, Kleur, Randtype, Rand radius 40 en Padding
De standaardknop: globaal lettertype, witte tekst, achtergrondkleur uit het palet, rand radius 40 (afgerond) en padding.
  • Typografie: het lettertype van de knoptekst (bij de bakkerij het globale lettertype “Knoppen”).
  • Normaal / Hover: je stelt de kleuren apart in voor gewone knoppen en voor knoppen waar je muis over beweegt. Een iets donkerdere hoverkleur geeft de bezoeker de bevestiging dat hij kan klikken.
  • Tekstkleur, Achtergrond type en Kleur: de kleuren van tekst en achtergrond.
  • Randtype en Rand radius: een randlijn en afgeronde hoeken. Bij de bakkerij staat de rand radius op 40 px: daardoor zijn de knoppen mooi rond.
  • Padding: de ruimte binnen de knop (hier 14 px boven en onder, 30 px links en rechts).

Afbeeldingen

Kies Afbeeldingen. Hier geef je alle afbeeldingen standaard dezelfde rand, afgeronde hoeken, doorzichtigheid, schaduw of filter, apart voor Normaal en Hover.

Het paneel Afbeeldingen met Randtype, Rand radius, Doorzichtigheid, Vak schaduw en CSS filters
De standaardstijl van afbeeldingen.

Formuliervelden

Kies Formuliervelden. Hier bepaal je hoe de invulvelden van formulieren eruitzien: de kleur en typografie van het Label (de tekst boven een veld), en van het Veld zelf: tekstkleur, accentkleur, achtergrondkleur, rand en afronding, apart voor Normaal en Focus (wanneer de bezoeker in het veld klikt).

Het paneel Formuliervelden met instellingen voor Label en Veld en de tabbladen Normaal en Focus
De standaardstijl van formuliervelden: label en veld.

Geef velden in de Focus-toestand een duidelijke rand in je accentkleur. Zo ziet de bezoeker altijd waar hij aan het typen is. Dat is ook belangrijk voor wie de site met het toetsenbord bedient.

6. Instellingen: identiteit, lay-out, lightbox en CSS

Website identiteit

Kies Website identiteit onder Instellingen.

Het paneel Website identiteit met Websitenaam, Websitebeschrijving, Website logo en Website favicon
Websitenaam (1), Websitebeschrijving (2), logo (3) en favicon (4).
  1. Websitenaam: de naam van je site (bijvoorbeeld Bakkerij De Korenaar). Die verschijnt onder andere in het tabblad van de browser en in zoekresultaten.
  2. Websitebeschrijving: een korte slogan (bijvoorbeeld Ambachtelijk brood en gebak uit Leuven).
  3. Website logo: het logo dat de widget Site Logo in je header toont. Elementor raadt 350 × 100 pixels aan.
  4. Website favicon: het kleine icoontje in het tabblad van de browser. Gebruik een vierkante afbeelding van minstens 512 × 512 pixels.

Wijzigingen aan de website identiteit zie je pas na Wijzigingen opslaan en het herladen van de editor. Dat zegt ook de blauwe melding bovenaan het paneel.

Duikt er een venster Elementor AI – Create a unique logo with AI op? Klik op Niet nu. Je logo maak je beter zelf (of laat je door een ontwerper maken) en laad je hier op.

Lay-out

Kies Lay-out onder Instellingen.

Het paneel Lay-out instellingen met Inhoud breedte 1200, Ruimtes 20 en Standaard pagina lay-out
Inhoud breedte (1), Ruimtes (2) en Standaard pagina lay-out (3).
  1. Inhoud breedte: de standaardbreedte van een Boxed container (zie hoofdstuk 2). Bij de bakkerij 1200 px. Tussen 1140 en 1280 px is gangbaar.
  2. Ruimtes: de standaard tussenruimte tussen widgets in een container (hier 20 px).
  3. Standaard pagina lay-out: welke paginalay-out een nieuwe pagina krijgt.

Daartussen staan Container padding (de standaard binnenruimte van containers) en twee technische velden (Selector titel pagina en Uitgerekte sectie past tot) die je best laat zoals ze zijn.

Lightbox

Kies Lightbox. Een lightbox is het venster dat over je pagina opent als je op een afbeelding klikt, zodat je ze groot kan bekijken.

Het paneel Lightbox met schakelaars voor Lightbox afbeelding, Teller, Volledig scherm, Zoom en Delen
De lightbox-instellingen.
  • Lightbox afbeelding: zet de lightbox aan of uit voor alle links naar afbeeldingen.
  • Teller, Volledig scherm, Zoom, Delen: welke knoppen de lightbox toont.
  • Titel en Beschrijving: welke tekst onder de afbeelding verschijnt.
  • Onderaan kies je de kleuren van de achtergrond en de knoppen. Gebruik ook hier je globale kleuren.

Aangepaste CSS

Kies Aangepaste CSS (in het paneel heet de sectie Custom CSS). Hier kan je eigen CSS-code toevoegen die op de hele site geldt.

Het paneel Custom CSS met een leeg codeveld
Een leeg veld voor eigen CSS-code.

Enkel als je weet wat je doet. Alles wat je hier typt, geldt voor je hele site. Eén vergeten haakje kan de opmaak van alle pagina’s in de war sturen, en later weet niemand nog waarom iets er zo uitziet. Bijna alles wat je nodig hebt, kan je met de gewone instellingen van Elementor. Gebruik dit veld alleen voor een kleine, goed begrepen aanpassing, en zet er een commentaarregel bij (bijvoorbeeld /* knoppen in footer iets kleiner */).

7. Globale kleuren en lettertypes gebruiken in een widget

Nu je huisstijl klaar is, gebruik je hem in elke widget. Dat doe je met het wereldbolletje.

  1. Selecteer een widget, bijvoorbeeld een Koptekst.
  2. Ga naar het tabblad Stijl.
  3. Naast Tekstkleur (1) en Typografie (2) staat een wereldbolletje. Is het bolletje gekleurd (paars), dan gebruikt de widget al een globale waarde.
Het tabblad Stijl van een Koptekst met de wereldbolletjes naast Tekstkleur en Typografie gemarkeerd
Het wereldbolletje naast Tekstkleur (1) en Typografie (2).
  1. Klik op het wereldbolletje naast Tekstkleur. Er opent een lijst Globale kleuren (1) met al je kleuren, hun naam en kleurcode. Het vinkje toont welke kleur gekozen is.
  2. Klik op de kleur die je wil gebruiken.
De lijst Globale kleuren met Primair bruin aangevinkt, en daaronder Secundair goud, Tekst, Accent rood, Crème en Wit
Kies een globale kleur (1). Primair (bruin) is aangevinkt.
  1. Doe hetzelfde bij Typografie: het wereldbolletje opent de lijst Globale lettertypes (1), met een voorbeeld van elke stijl: Titels, Ondertitels, Tekst en Knoppen.
De lijst Globale lettertypes met Titels aangevinkt, en daaronder Ondertitels, Tekst en Knoppen
Kies een globaal lettertype (1).

Klik je op het kleurvakje zelf in plaats van op het bolletje, en kies je daar een kleur, dan maak je een losse kleur. Het verband met je huisstijl is dan weg: pas je later de globale kleur aan, dan verandert deze widget niet mee. Twijfel je? Kijk naar het bolletje: gekleurd = globaal, grijs = los.

Hetzelfde geldt voor typografie: open je met het potloodje de typografie en pas je zelf het lettertype aan, dan is het niet meer globaal.

Heb je toch een kleur nodig die niet in je palet staat, en ga je ze vaker gebruiken? Voeg ze dan toe als aangepaste kleur in de Website instellingen, in plaats van ze telkens los in te stellen. Via het tandwieltje in de lijst Globale kleuren kom je snel bij die instellingen.

8. Een kleurenpalet kiezen

Een goed palet maakt je site meteen professioneler. Enkele vuistregels:

  1. Begin bij de inhoud. Waar gaat de site over en wat moet de bezoeker voelen? De bakkerij koos warme aardetinten (bruin, goud, crème): die doen denken aan brood, graan en ambacht. Een tandartspraktijk kiest eerder fris blauw en wit, een speelgoedwinkel felle kleuren.
  2. Beperk je. Een palet heeft meestal:
    • één primaire kleur (de kleur van je merk),
    • één secundaire kleur die daarbij past,
    • één accentkleur die opvalt, voor knoppen en belangrijke links,
    • een donkere tekstkleur (zelden puur zwart: een heel donkere tint van je primaire kleur oogt zachter),
    • een of twee neutrale kleuren voor achtergronden (wit, crème, lichtgrijs).
  3. Gebruik de 60-30-10-regel. Ongeveer 60 % van je pagina is neutraal (achtergrond), 30 % je primaire en secundaire kleur, en 10 % je accentkleur. Zo valt die accentkleur (je knoppen!) echt op.
  4. Vertrek van je logo als je er een hebt: haal de kleuren eruit en bouw daar je palet rond.

Inspiratie: coolors.co

Op coolors.co kan je met de spatiebalk eindeloos paletten laten genereren, kleuren vastzetten die je goed vindt, en de kleurcodes kopiëren. Hieronder het palet van de bakkerij in Coolors:

De website Coolors met vijf kleurbanen: bruin 7A4A26, goud C9963C, donkerbruin 3B3029, roodbruin B5452B en crème F8F1E7
Het palet van De Korenaar in Coolors, met de kleurcodes onderaan elke baan.

Handig: met een kleurpipet (bijvoorbeeld in Photoshop of een browserextensie) haal je kleuren uit een foto of logo, en op Coolors vind je ook kant-en-klare paletten van anderen. Kopieer telkens de hexcode (bijvoorbeeld #7A4A26) en plak die in de Kleurenkiezer van Elementor.

Contrast: kan iedereen het lezen?

Mooie kleuren zijn niets waard als je tekst niet leesbaar is. Het contrast tussen tekst en achtergrond moet groot genoeg zijn, ook voor mensen met een visuele beperking of voor wie in de zon op zijn gsm kijkt.

  1. Surf naar de Contrast Checker van WebAIM: webaim.org/resources/contrastchecker.
  2. Vul bij Foreground je tekstkleur in en bij Background je achtergrondkleur.
  3. Lees de Contrast Ratio af.
De WebAIM Contrast Checker met tekstkleur 3B3029 op achtergrond F8F1E7 en een contrastverhouding van 11.41:1
De tekstkleur van de bakkerij op de crème achtergrond: 11.41:1, ruim voldoende.
  • Gewone tekst heeft minstens 4.5:1 nodig.
  • Grote tekst (vanaf ongeveer 24 px, of 19 px vet) minstens 3:1.
  • Controleer zeker ook de tekst op je knoppen (witte tekst op je accentkleur) en tekst op foto’s.

Lichtgrijze tekst op een witte achtergrond ziet er “strak” uit, maar is vaak onleesbaar. Goud of geel op wit haalt bijna nooit 4.5:1. Gebruik zulke kleuren voor decoratie of grote titels, niet voor lopende tekst.

9. Een lettertypecombinatie kiezen

  1. Maximaal twee lettertypes. Eén voor titels, één voor tekst. Meer lettertypes maken je site onrustig en trager (elk lettertype moet geladen worden).
  2. Contrast tussen de twee. Een klassieke combinatie is een schreeflettertype (met “pootjes”, zoals Playfair Display, Lora of Merriweather) voor titels met een schreefloos lettertype (zoals Inter, Open Sans, Lato of Roboto) voor tekst. Of omgekeerd. Twee lettertypes die bijna op elkaar lijken, werken slecht: dat oogt als een vergissing.
  3. Tekst moet vooral leesbaar zijn. Kies voor lopende tekst een rustig lettertype met een grootte van minstens 16 px, liefst 16 tot 18 px, met een lijnhoogte van ongeveer 1.5 tot 1.7.
  4. Het karakter moet passen. Playfair Display voelt klassiek en ambachtelijk, dat past bij een bakkerij. Een strak, geometrisch lettertype past beter bij een technologiebedrijf.
  5. Gebruik diktes met mate. Normaal (400) voor tekst, vet (600–700) voor titels en knoppen. Dat is genoeg.

Inspiratie: Google Fonts

Op fonts.google.com vind je honderden gratis lettertypes. Alle lettertypes van Google Fonts kan je in Elementor rechtstreeks kiezen bij Familie.

De pagina van het lettertype Playfair Display op Google Fonts met een groot voorbeeld
Playfair Display op Google Fonts: het titellettertype van de bakkerij.

Op de pagina van een lettertype op Google Fonts kan je je eigen voorbeeldtekst typen en de grootte veranderen. Bekijk zo hoe je titel of je bedrijfsnaam eruitziet. Zoek je een passende tekstletter? Probeer combinaties uit door ze naast elkaar te zetten in twee tabbladen, of zoek op het internet naar “font pairing” met de naam van je titellettertype.

Privacy en lettertypes. Worden Google Fonts rechtstreeks van de servers van Google geladen, dan stuurt de browser van je bezoeker zijn IP-adres naar Google. Volgens de GDPR mag dat niet zomaar. Hoe je dat privacyvriendelijk oplost, komt aan bod in het hoofdstuk over privacy.

Veelgemaakte fouten

  • Losse kleuren kiezen in plaats van globale kleuren (het wereldbolletje).
  • Te veel kleuren: als alles opvalt, valt niets op. Hou je bij vier à zes kleuren.
  • Te veel lettertypes: twee is genoeg.
  • Te weinig contrast: lichtgrijs of goud op wit voor lopende tekst.
  • Te kleine tekst: minder dan 16 px is op een gsm moeilijk leesbaar.
  • Vergeten op te slaan: Website instellingen bewaar je met Wijzigingen opslaan, niet met Publiceren.
  • Experimenteren met de huisstijl van een live site: elke wijziging geldt meteen voor de hele site. Noteer de oude waarden voor je iets aanpast.

Vragen

Ik heb een globale kleur aangepast, maar één knop verandert niet mee.

Die knop gebruikt een losse kleur. Selecteer de knop, ga naar Stijl en klik bij de kleur op het wereldbolletje om de globale kleur te kiezen.

Kan ik een systeemkleur verwijderen?

Nee, de vier systeemkleuren (Primair, Secundair, Tekst, Accent) blijven altijd bestaan. Je kan wel hun naam en kleur aanpassen. Aangepaste kleuren kan je wel verwijderen.

Ik verwijder een aangepaste kleur die op mijn site gebruikt wordt. Wat gebeurt er?

De elementen die die kleur gebruikten, verliezen hun koppeling. Controleer daarom eerst of de kleur nog ergens gebruikt wordt, of vervang ze liever door een andere kleur in plaats van ze te verwijderen.

Mijn nieuwe logo verschijnt niet in de header.

Klik op Wijzigingen opslaan en herlaad de editor (of de pagina). Controleer ook of je header de widget Site Logo gebruikt; die toont automatisch het logo uit de Website identiteit.

Opdracht

Maak de huisstijl van je eigen site.

  1. Bedenk waar je site over gaat en welke sfeer ze moet uitstralen. Schrijf drie sleutelwoorden op (bijvoorbeeld warm, ambachtelijk, vertrouwd).
  2. Stel op coolors.co een palet samen van vier à zes kleuren: primair, secundair, accent, tekst en een of twee neutrale achtergrondkleuren. Noteer de hexcodes.
  3. Controleer met de WebAIM Contrast Checker minstens: je tekstkleur op je achtergrond, en witte tekst op je accentkleur (je knoppen). Haal je geen 4.5:1? Pas de kleur aan.
  4. Kies op fonts.google.com twee lettertypes: één voor titels, één voor tekst.
  5. Vul in Elementor bij Website instellingen je Globale kleuren en Globale lettertypes in. Geef elke kleur een duidelijke naam.
  6. Stel bij Thema stijl de Typografie in (tekst en H1 tot H3, met kleinere waarden op gsm) en geef je Knoppen een kleur, afronding en hoverkleur.
  7. Vul bij Website identiteit je sitenaam, beschrijving, logo en favicon in.
  8. Klik op Wijzigingen opslaan. Controleer of al je titels, teksten en knoppen netjes je huisstijl volgen. Zet waar nodig in widgets de kleur en typografie via het wereldbolletje op een globale waarde.

Samengevat

  • Je huisstijl leg je één keer vast in Website instellingen (Elementor-logo linksboven). Opslaan doe je met Wijzigingen opslaan.
  • Globale kleuren (Primair, Secundair, Tekst, Accent + eigen kleuren) en globale lettertypes zijn de basis. Eén keer aanpassen = overal aangepast.
  • In de Thema stijl bepaal je hoe tekst, links, koppen, knoppen, afbeeldingen en formuliervelden er standaard uitzien.
  • Bij Website identiteit staan sitenaam, logo en favicon; bij Lay-out de inhoudsbreedte.
  • In widgets kies je kleuren en lettertypes altijd via het wereldbolletje.
  • Een goed palet: weinig kleuren, één opvallende accentkleur, voldoende contrast (minstens 4.5:1 voor tekst).
  • Maximaal twee lettertypes, met duidelijk verschil tussen titel- en tekstletter.

Alle hoofdstukken