De WordPress Customizer is een krachtige tool die is ingebouwd in het WordPress Content Management System (CMS). In deze tool kan je eenvoudig je website aanpassen, zonder dat je kennis hoeft te hebben van programmeren of computercode. In dit artikel bekijk ik de customizer en laat ik de mogelijkheden zien. Het is de bedoeling dat je na het lezen van dit artikel vertrouwd raakt met de customizer, zodat je in het volgende hoofdstuk zelf aan de slag kan gaan met het instellen van jouw website.
Wat is de WordPress Customizer
De WordPress Customizer is een ingebouwde tool, die je gratis kan gebruiken als je WordPress installeert op een website. Je kan hiermee eenvoudig wijzigingen aan je website, zoals aan het uiterlijk. Als je de customizer opent, zie je direct een live-voorbeeld van je website. Voer je een wijziging door, dan zie je dit ook meteen live op je scherm verschijnen. Dit maakt het gemakkelijk om aanpassingen te doen zonder technische kennis of het aanpassen van code.
Goed om te weten: Je kan de customizer vinden via het WordPress dashboard>Weergave>Customizer.
Het interface van de customizer
In de onderstaande afbeelding zie je hoe de customizer er uitziet als je het thema GeneratePress gebruikt. Je ziet goed dat de customizer bestaat uit drie delen. Onder de afbeelding leg ik deze drie delen uit.
- Live-voorbeeld: Hier zie je jouw website. Wijzigingen die je maakt op je website zie je altijd meteen in dit voorbeeld verschijnen. Als je gebruikmaakt van een caching plugin, zoals LiteSpeed Cache, wordt deze preview nooit in cache gezet. Deze is altijd uitgesloten. Zo weet je zeker dat je direct de aangepaste website ziet.
- Menu: In dit gedeelte navigeer je door alle opties die je in kan stellen. Dit gedeelte bestaat uit een aantal hoofdmenu’s, met daaronder meerdere opties. Zo zitten er onder het kopje Lay-out weer meerdere menu’s die je open kan klappen, zoals Container, Header, Zijbalken etc.
- Apparaat: Veel mensen vergeten dit wel eens. Linksonder de customizer stel je de weergave in van het voorbeeld. Zo kun je meteen checken of jouw website goed wordt weergeven op meerdere schermen. Je wisselt eenvoudig tussen mobiel, tablet en desktop qua schermweergave.
Slim: je kan in het live voorbeeld gedeelte gewoon rondklikken op je website. Handig als je bijvoorbeeld een element wilt bewerken dat alleen op bepaalde delen van je website voorkomt. Je ziet dan direct live een voorbeeld.
De verschillende onderdelen op een rij
Ik maak gebruik van GP Premium in combinatie met het GeneratePress thema. Dit zorgt, in combinatie met de supersnelle hosting van Cloud86, voor een snelle website én een snelle customizer. De basis-versie van de customizer wordt uitgebreid als je gebruikmaakt van een thema, zoals GeneratePress. Hieronder zie je de diverse onderdelen die ik in mijn Customizer heb.
Site-identiteit
In de ‘Site-identiteit’-sectie in de Customizer van GeneratePress stel je de titel en tagline van je website in. Ook kun je hier een logo en favicon (site-icoon) toevoegen. Het logo wordt getoond in de header van je website. De favicon wordt weergegeven in het tabblad van de browser bovenaan. Hieronder zie je de instellingen die ik voor deze website heb ingesteld voor deze website.
Lay-out
De ‘Lay-out’-sectie van GeneratePress bevat opties om verschillende elementen van je website aan te passen, zoals de containerbreedte, zijbalkindeling, headerindeling en voettekstwidgets. Hier kun je ook de indeling van blogberichten en archiefpagina’s aanpassen, zoals het aantal kolommen en de weergave van metadata (zoals de auteur en publicatiedatum)
Kleuren
In de ‘Kleuren’-sectie van GeneratePress kun je de kleuren van verschillende elementen van je website aanpassen, zoals achtergronden, tekst, links en knoppen. Hier gaan we later natuurlijk uitgebreid mee aan de slag. Een goede huisstijl is namelijk erg belangrijk voor een website. De kleuren zijn daar een belangrijk onderdeel van.
Typografie
In dit tabblad kan je de lettertypen en lettergrootte van verschillende tekstuele elementen op je website aan te passen, zoals koppen, alinea’s en links. Voor het lettertype kan je bij GeneratePress kiezen uit een breed scala aan Google Fonts
Algemeen
Dit tabblad gebruik je eigenlijk het minst als je een website instelt of ontwerpt in WordPress. Het is bij elk thema weer anders wat hier staat. In het geval van GeneratePress staan hier wat CSS-opties en linkopties. Dit tabblad laat je eigenlijk vaak gewoon met rust.
Menu’s
Menu’s zijn erg belangrijk voor een website. In WordPress maak ik gebruik van drie menu’s:
- Headermenu: Dit is de belangrijkste navigatie.
- Footermenu: Hier kan ik links kwijt naar pagina’s zoals Disclaimer, Privacybeleid, Advertentiebeleid en Contact.
- Sidebarmenu: Op sommige websites maak ik ook gebruik van een submenu in een zijbalk. Een voorbeeld kan zijn op een website over planten. Dat je in de zijbalk alleen de pagina’s wilt weergeven waarop je mooie content hebt geschreven over specifieke planten.
Widgets
Je kan in dit menu widgets toevoegen aan plekken, zoals in de zijbalk en footer. Dit zijn speciale blokken, zoals een blok waarin je de laatste berichten toont. WordPress voegt – net zoals GeneratePress en veel andere plugins – regelmatig nieuwe widgets toe die je kan gebruiken op een website.
Homepage-instellingen
In het gedeelte met ‘Homepage-instellingen kun je bepalen welke inhoud op de homepagina van je website wordt weergegeven. Je kunt kiezen tussen het tonen van je nieuwste berichten (een blog-indeling) of het selecteren van een statische pagina als startpagina. Ik ben zelf fan van een statische pagina, omdat je hier net wat meer controle over hebt wat je er wilt tonen.
Extra-CSS
Een optie die beginners nog niet veel gebruiken, maar die wel erg handig is. Door aangepaste CSS toe te voegen, kun je specifieke stijlen toepassen die mogelijk niet beschikbaar zijn via de andere Customizer-opties. Ik vind het bijvoorbeeld mooi als alle widget-titels in de zijbalk gecentreerd staan. Hier is geen optie voor in de customizer zelf. Ik heb dit op sommige websites met een CSS-code toegevoegd.
.widget-title {
text-align: center;
}Deze code selecteert de titels van de widgets met de klasse .widget-title en past de text-align eigenschap toe met de waarde center, waardoor de titels gecentreerd worden.
Huiswerkopdracht
In GeneratePress (en andere thema’s) vind ik persoonlijk de afbeeldingen soms wat te dicht op de tekst staan. Hier is geen goede optie voor te vinden in de customizer. Dit gaan we met een CSS-code aanpassen. Open de customizer, ga naar Extra-CSS en voeg de volgende code toe:
.wp-block-image {
margin-bottom: 1em;
}Druk op publiceren en vergelijk het resultaat van voor en na de wijziging. Verander eventueel de waarde 1em naar een hoger getal als je meer ruimte wilt tussen de afbeeldingen en het volgende element.
Raak verder vertrouwd met de customizer. Klik in het rond en bekijk elk tabblad. Probeer te begrijpen wat elke optie doet. Je hoeft verder nog niets aan te passen.
Uitleg van de code die je hebt toegevoegd
Deze code bestaat uit een CSS-selector en een regel binnen de accolades {}.
- .wp-block-image: Dit is de CSS-selector die elementen met de klasse wp-block-image selecteert. In dit geval worden afbeeldingen in WordPress-blokken, zoals de Gutenberg-editor, getarget.
- margin-bottom: 1em;: Dit is de CSS-regel die wordt toegepast op de geselecteerde elementen. De eigenschap margin-bottom bepaalt de ondermarge van een element. De waarde 1em is een relatieve eenheid die afhankelijk is van de grootte van het huidige lettertype. In dit geval wordt er een ondermarge van 1em toegevoegd aan de afbeeldingselementen met de klasse wp-block-image.
