Algemene opmaak van de site

Je gebruikt de huisstijl om de algemene opmaak van je website in te stellen.

Elke grotere onderneming of vereniging hanteert een huisstijl, een verzameling kenmerken zoals logo, lettertypen en kleuren, waarmee ze zich naar de buitenwereld toe presenteren.

Kijk bv. op de website van PXL of het brandbook van Coca Cola.

De Belgische voedselbanken hanteren eveneens een huisstijl:

• Het witte logo moet op een sterk contrasterende achtergrond gebruikt worden. In geval van een witte achtergrond moet het logo in het groen: Panthone 355C.
• Groen is de hoofdkleur; het staat voor gezondheid, vitaliteit, respect voor de anderen en voor het milieu:
• Naast onze hoofdkleur gebruiken we andere, felle kleuren in onze communicatie, zoals rood (#e63c46), roze (#c83c78), felblauw (#0096be), geel (#fac850). U kunt nieuwe kleuren creëren, maar ze moeten levendig en modern zijn.
• Typografie: voor alle hoofdingen en titels, gebruik Bebas Neue in hoofdletters. Om er zeker van te zijn dat onze hoofdtekst gemakkelijk te lezen is, gebruik voor paragrafen en kleine teksten altijd lettertype Raleway.
• Om verschillende inhoud zones te creëren en om de leesbaarheid te bevorderen, kunt u blokken gebruiken. Er kan van een veelkleurig effect gebruik gemaakt worden. Aarzel niet om sterk contrasterende achtergronden met transparante banden te mixen.

Zowel lettertype Bebas Neue als Raleway zijn Google fonts en die zijn standaard ter beschikking in de meeste blokthema's.

DOE Pas de huisstijl van Voedselbank Limburg toe

We beginnen met de lettertypen.

1. Kies in de zwarte WordPressbalk Weergave – Editor – Stijlen.
2. Klik rechts van het woord Stijlen op het potloodje om de standaardstijl te bewerken.
3. Klik in de rechter kolom op Typografie en daar rechts van Lettertypes op de dubbele pijl, Lettertypen Beheren.
4. Kies tab Lettertypes Installeren en geef toegang aan de Google Fonts.
5. Zoek Raleway en selecteer alles. Installeren.
6. Geïnstalleerd? Klik linksboven op het driehoekje langs de fontnaam om terug te gaan.
7. Zoek Bebas Neue en installeer dat ook. Sluit dan dit venster.
8. Nu stellen we de elementen in (klik telkens op het driehoekje om terug te keren naar de hoofdkolom):
   • Tekst: Raleway
   • Links: Raleway
   • Kopteksten: Bebas Neue
   • Onderschriften: Raleway
   • Knoppen: Raleway
9. Klik rechtsboven op Opslaan 2x. Vervolgens linksboven op het vogeltje om terug te keren naar het algemene venster Stijlen.

Volgende stap: het kleurthema instellen.

1. Klik rechts van het woord Stijlen op het potloodje om de standaardstijl te bewerken.
2. Klik nu in de rechter kolom op Kleuren en bewerk het Palet.
3. Breng de cursor op een bolletje en je ziet dat elk bolletje een naam heeft. Die kleuren passen we aan: klik op het bolletje en typ onderaan de hexadecimale code.
   • Basis (de achtergrondkleur) = #efffef (lichtgroen)
   • Contrast (de tekst) = #1b5633 (donkergroen)
   • Accent 1 = #009639 (helder groen)
   • Accent 2 = #ffffff (wit)
   • Accent 3 = #edfeff (lichtblauw)
   • Accent 4 = #fdfdb1 (lichtgeel)
4. Opslaan 2x. Gebruik daarna het driehoekje langs palet om terug te keren naar de kleurenkolom.
5. Elementen Tekst en Achtergrond zijn al in orde. Bij Link kies je Accent 1.
6. Onderschriften krijgen de donkergroene tekstkleur. Bij Knoppen kies je Basis voor de tekst en Contrast voor de achtergrond.
7. Voor de Koptekst kiezen we voorlopig de donkergroene tekstkleur. Opslaan x2.

Nu passen we het menu verder aan.

1. Klik linksboven op het vogeltje, Open Navigatie, vervolgens op het driehoekje links van Stijlen en je bent terug in Ontwerp.
2. Kies Navigatie en klik 2x in de header, zodat je Bewerken kan kiezen.
3. Sluit de stijlenkolom rechts (kruisje) en klik dan bovenaan rechts op Instellingen, zodat je de layout van het geselecteerde element kan instellen.
4. Klik aan de rand in de navigatiebalk, zodat je de hele achtergrond geselecteerd hebt (hoofdblok Groep).
5. Klik nu in de instellingenkolom rechts op het zwartwitte bolletje, Stijlen.
6. Kies voor de tekst lichtgroen (Basis) en voor de achtergrond helder groen (Accent 1).
7. Selecteer blok Navigatie (= de tekstitems), activeer weer tab Stijlen en klik op de drie puntjes aan Typografie.
8. Kies Weergave en dan in de keuzelijst: vet.
9. Klik op het logo om dat te selecteren en stel nu bij Instellingen in: afbeelding breedte 80 pixels. Opslaan en bekijk de website.

Er is nog 1 element wat me stoort: de lege ruimte boven de paginatitel.

1. Kies in kolom Ontwerp Templates – Twenty Twenty-Five en klik op Pagina's.
2. Klik op het lege vak boven de paginatitel en stel bij de Stijlen (rechter kolom) in: marge onder Geen en hoogte 5 px. Opslaan.