Opmaak en customizer: een aantal instellingen goed zetten

Je hebt nu een huisstijl voor je website gemaakt met daarbij een mooi logo. Nu is het tijd om kleine aanpassingen te gaan doen op je website. We beginnen in de customizer. In dit gedeelte staan standaard een aantal dingen niet zoals ik het wil hebben. Ik maak (nog steeds 😉) gebruik van de GeneratePress in combinatie met GP Premium. Heb je een ander thema? Dan kun je het beste zelf door de customizer lopen om te kijken hoe je de instellingen wilt zetten. Sommige stappen kan je echter in elk thema instellen net zoals ik dat in dit hoofdstuk van de cursus doe.

Het lichtgewicht WordPress-thema dat wij gebruiken 

GeneratePress

Snel thema

geschikt voor vrijwel alle projecten

Gratis versie beschikbaar

Wij gebruiken de Premium versie van GeneratePress voor al onze grote websites

MijnOnlineInkomen is ook gebouwd in GeneratePress

Bekijk mijn uitgebreide GeneratePress review

Bekijk dit thema

Site-identiteit

Open de customizer van je website. Belangrijk is om nu eerst nogmaals te controleren of je echt een child theme gebruikt. Heb je dit? Dan kunnen we aan de slag! De website begint nu echt vorm te krijgen. We beginnen meteen bij het eerste tabblad genaamd Site-identiteit. Hier upload je het logo dat je hebt ontworpen en de favicon (ook wel Site Pictogram genoemd. Vergeet niet om het logo qua grootte te checken op tablet en mobiel (verander de weergave met de pictogrammen onderin) In de onderstaande afbeelding zie je de instellingen die ik heb gedaan. Ik druk zelf na elk tabblad op Publiceren om tussentijds op te slaan.

Goed om te weten: Ik heb in een eerder hoofdstuk van deze cursus een startersite geïmporteerd. Sommige elementen in de customizer zijn daarmee wellicht anders dan bij jou. Je ziet in dit artikel verder de instellingen die ik heb gedaan. Bepaal per instelling of jij dit ook wilt. Ik ben voor dit project gegaan voor het template genaamd Info uit de GeneratePress library.

Lay-out

Dit onderdeel van de WordPress customizer bestaat uit meerdere tabbladen. Ik werk ze hieronder allemaal stuk voor stuk af. Vergeet niet bij elke stap de instellingen ook apart te bekijken op mobiel en tablet. Als hier bij mij grote wijzigingen tussen zitten, zal ik dat erbij vermelden.

Container

Hieronder zie je mijn instellingen voor de container en padding.

Header

Deze instelling wordt meestal aangepast als je een starter site of demosite hebt geïmporteerd. Zo ook bij mij. Als je hier iets wijzigt, dan heeft dit vaak gevolgen voor de lay-out.

Hoofdnavigatie

Hier heb ik de volgende instellingen staan voor de website.

De volgende twee tabbladen staan op uit. Dit geldt zowel voor Plakkende navigatie als Off Canvas paneel.

Zijbalken

Dit is een instelling waar ik vaak nog wat mee aan het stoeien ben. Dan verschijnt bijvoorbeeld ergens geen zijbalk, waar ik deze eigenlijk wel wil hebben. Ik ben uiteindelijk uitgekomen op de volgende instellingen.

De twee laatste tabbladen Footer en Blog mag je laten staan. De footer en bloginstellingen gaan we opbouwen in GeneratePress elementen. De instellingen die er staan doen er niet toe.

Kleuren & Typografie

Hier vul je de kleuren in die je hebt bedacht voor je website als huisstijl. Je kan hier gewoon de hex-code van de kleur invullen. Je hebt bij GeneratePress enorm veel mogelijkheden voor de kleuren. Stel in ieder geval de kleuren in die je hebt bedacht voor je website als globale kleuren. Speel daarna met elke instelling. Verzin in ieder geval een kleur voor de achtergrond, header, hoofdnavigatie, knoppen, tekst en linkkleur. Bij typografie vul je in wat je bij de huisstijl hebt verzonnen. Je kan eventueel ook mijn typografie overnemen. Dit is een redelijk standaard instelling voor websites.

Let op: De linkkleur moet goed opvallen in de tekst. Ik kies vaak voor een zwarte kleur tekst (niet helemaal zwart, maar met een klein beetje grijs erin) en een blauwe linkkleur. Laat tevens de buttons lekker opvallen. Dit doe ik vaak door een witte achtergrond te nemen. De buttons knallen er dan snel uit, ongeacht de kleur die je gebruikt.

Menu’s

Vervolgens laat je de algemene instellingen ongemoeid. Je gaat echter wel een hoofdmenu aanmaken in het tabblad menu. Dit doe je door op de button Nieuw menu aanmaken te klikken. Noem het menu iets van primair of hoofdmenu. Voeg daarna de pagina’s Home, blog en contact, toe aan het menu. Je kan eventueel ook meteen een footermenu maken met de pagina’s Advertentiebeleid, Contact, Disclaimer en Privacybeleid. Vink vervolgens in het primaire menu onderaan het vinkje Hoofdmenu aan, zoals op de onderstaande afbeelding.

Klaar!

Widgets en Homepage-instellingen laten we vooralsnog ongemoeid. De Extra CSS gaan we in een volgend hoofdstuk toevoegen. Publiceer alle instellingen die je hebt gewijzigd en kijk je website even goed na op een mobiele telefoon en op een laptop of pc. Pas waar nodig nog wat aan.