Aanpassingen doen aan de layout van je WordPress website

Je hebt een website, gemaakt in WordPress. Je wilt hier aanpassingen in maken. Bijvoorbeeld een net iets ander lettertype, andere kleuren. Dat soort zaken pas je aan met CSS.

WordPress is tegenwoordig voorzien van een tool om aanpassingen te doen met CSS waarmee je simpel deze veranderingen kunt maken.

1. Ga naar Weergave → Customizer
2. Kies voor ‘Extra CSS’
3. Aanpassingen doen, meteen te zien in het voorbeeld
4. Publiceren

Ga naar Weergave → Customizer

Vanuit het Dashboard van je WordPress website kies je in het linkermenu voor ‘Weergave‘.
Je ziet dan in het submenu ‘Customizer‘ staan. Daarmee kun je werken aan het op dat moment actieve thema (de layout van je website).

Vanuit het Dashboard naar de Customizer in WordPress

Extra CSS

Vanuit de Customizer kun je desgewenst aanpassingen doen aan het thema wat je op dat moment gebruikt. Onderaan in dit menu kun je kiezen voor ‘Extra CSS‘.

De code die je hier plaatst zal aanpassingen doen en voorrang hebben op de CSS code die normaal geschreven is voor het thema (in het eigen CSS bestand van dat thema).

Klik op Extra CSS om aanpassingen in de layout te kunnen doen

Aanpassingen doen, meteen te zien in het voorbeeld

Je kunt nu in het veld onderaan de aanpassingen doen die je wilt. Je zult zien dat de aanpassingen, mits je ze correct invoert (anders krijg je ook nog een melding), meteen in het scherm ernaast te zien zijn.

Dit blijft echter een voorbeeld totdat je ‘Publiceren’ klikt. Daarna is het definitief.

Voordeel van deze manier van aanpassingen doen aan de layout, is dat deze bewaard blijven, ook als het thema een update krijgt.

De aanpassingen doe je in het vak onderaan

In de afbeelding hieronder heb ik een aanpassing gedaan aan de titel van een artikel. Ik heb opgezocht dat dit een h2 koptekst is. Deze koptekst heeft een class meegekregen met de naam: entry-title. Dit ga ik als volgt in het vak zetten:

h2.entry-title {
  background-color: #000; /* achtergrond kleur aanpassen naar zwart */
  color: white; /* letterkleur aanpassen naar wit */
  padding: 0 0 10px 5px; /* ruimte om de tekst heen vergroten, boven 0, rechts 0, onder 10 pixels en links 5 pixels */
  font-family: 'Times new roman'; /* Lettertype aanpassen */
  font-size: 85px; /* Lettergrootte aanpassen */
}

n.b. Dat wat tussen /* en */ is extra informatie om jou als lezer uit te leggen wat de betekenis is. Dit is in onderstaand voorbeeld weggehaald voor de leesbaarheid.

Dit geeft het volgende beeld weer, met meteen het voorbeeld aan de rechterkant.

De CSS is toegevoegd aan het tekstvak en wordt meteen weergegeven in het voorbeeld.

Een foutje maken is menselijk

Stel dat je een foutje maakt in de code, iets vergeet. Ook daar is aan gedacht…

Foutmelding CSS

Zie je de regel onderaan staan (h1)? Daar heb ik nog geen accolades ({...}) toegevoegd en dus komt er een foutmelding. Een rode cirkel met een kruisje. Daar moet je dus nog wat aan doen.

Publiceren maar

Als alles naar wens is, klik je op publiceren en op je ‘echte’ website is je aanpassing nu ook te zien. Mocht je dit onverhoopt vergeten, dan krijg je ook nu weer een foutmelding in beeld!

Succes!