In een klassiek thema veranderde je de kleuren in de Customizer. Een blokthema heeft daar geen sectie Kleuren: de kleuren van een blokthema pas je aan in de site-editor, onder Stijlen. Je kunt met één klik het hele uiterlijk wisselen, alleen het palet vervangen, één kleur van het palet aanpassen of één blok een andere kleur geven.
Die mogelijkheden lijken op elkaar, maar werken anders. Klik je ze in de verkeerde volgorde aan, dan raak je je wijzigingen kwijt. Geef je een blok een aangepaste kleur in plaats van een paletkleur, dan gaat de volgende paletwissel eraan voorbij. Hieronder lees je wat elke optie doet en wanneer je die gebruikt.
Alles hieronder heb ik gecontroleerd in WordPress 7.1.4, met mijn thema’s Makani Pro en Kanoa Pro. In WordPress 7 zijn sommige panelen verplaatst, dus oudere handleidingen sturen je soms naar knoppen die er niet meer zijn.
Het korte antwoord
- Een nieuw uiterlijk met één klik: Weergave → Editor → Stijlen → Blader door stijlen. Kies bovenaan een stijl of onder Kleurvariaties een palet en sla op.
- Je eigen kleuren: Stijlen → Kleuren → Palet bewerken. Klik onder Thema op een kleur, typ een nieuwe hexcode en sla op. Alles wat die kleur gebruikt, verandert mee.
- Eén blok: selecteer het, ga in de zijbalk naar het tabblad Blok en open Typografie → Kleur voor de tekst of Achtergrond → Kleur voor de achtergrond. Kies een kleur uit het palet van het thema.
Stijlen, paletten en typesets: wat is het verschil
Een blokthema kan kant-en-klare varianten van zijn ontwerp meeleveren. Elke variant is een klein JSON-bestand in de map styles van het thema, en WordPress sorteert ze naar wat ze veranderen:
| Wat je kiest | Waar je het vindt | Wat het verandert | Voorbeeld |
|---|---|---|---|
| Stijl | Blader door stijlen, bovenste rij | Kleuren, lettertypen en alles wat de auteur van het thema verder heeft ingesteld, zoals witruimte of blokstijlen | Makani Pro: Ink |
| Palet (kleurvariatie) | Blader door stijlen → Kleurvariaties; Kleuren → Palet bewerken → Paletten | Alleen de kleuren | Makani Pro: 9 paletten, Kanoa Pro: 19 |
| Typeset (typografievariatie) | Blader door stijlen → Typografie; Typografie → Typesets | Alleen de lettertypen | Makani Pro: Mono en Regular |
Dat laatste zorgt voor verwarring. Op de pagina van een thema staat misschien ‘20 stijlen’, maar als ze allemaal alleen de kleuren veranderen, toont WordPress ze als paletten en blijft de bovenste rij met stijlen leeg. Zo is het bij mijn Kanoa Pro: alle 20 stijlen zijn paletten. Er ontbreekt niets, ze staan een sectie lager.
1. Een kant-en-klare stijl of een palet kiezen
- Ga naar Weergave → Editor en klik op Stijlen.
- Klik op Blader door stijlen.
- Klik in de bovenste rij op een stijl voor een compleet nieuw uiterlijk, of onder Kleurvariaties op een palet om alleen de kleuren te veranderen. De voorbeeldweergave rechts verandert meteen.
- Er is nog niets opgeslagen. Klik linksonder op Beoordeel 1 wijziging… en daarna op Opslaan.
Eerst de stijl, dan het palet
Ik heb gecontroleerd wat elke klik behoudt en wat hij vervangt:
- Een stijl vervangt alles wat je in Stijlen hebt ingesteld: het palet, de lettertypen, de kleuren van links en knoppen. Alleen je Extra CSS blijft staan.
- Een palet vervangt alleen kleuren: het palet en de kleuren die je voor links, knoppen en kopteksten hebt ingesteld. De lettertypen blijven, ook die van de stijl die je eerder koos.
- Standaard in de bovenste rij zet het eigen ontwerp van het thema terug en gooit je wijzigingen weg, net als een stijl.
Werk dus in deze volgorde: stijl, dan palet, dan je eigen wijzigingen. Pas je eerst dingen aan, dan gooit de volgende klik op een stijl of palet ze weg. Zolang je niet hebt opgeslagen, kun je de editor nog verlaten zonder op te slaan. Na het opslaan blijft de vorige versie bewaard in Revisies. Meer daarover: hoe je de stijlen van een blokthema reset.
2. Een kleur in het palet aanpassen
Het palet van een blokthema is een korte lijst met benoemde kleuren. Makani Pro heeft er zes: Background, Surface, Primary, Secondary, Line en Accent. De templates en patronen van het thema bevatten geen kleurcodes, ze verwijzen naar die namen. Pas je Accent één keer aan, dan verandert elke knop die Accent gebruikt mee.
- Ga naar Stijlen → Kleuren en klik op Palet bewerken.
- Klik onder Thema op een kleur. Wil je zien welke kleur welke is, open dan ⋮ naast Thema en kies Details weergeven: je ziet de namen en hexcodes.
- Typ de nieuwe code in het veld Hex of sleep in de kleurkiezer. Met het menu naast Hex schakel je over naar RGB of HSL.
- Klik op Beoordeel 1 wijziging… en daarna op Opslaan.
Onder de themakleuren staat Aangepast met een knop +. Kleuren die je daar toevoegt, verschijnen in elke kleurkiezer, maar ze veranderen het ontwerp pas als je ze voor een blok kiest. Verder naar beneden, onder Paletten, staan de kant-en-klare paletten van het thema, dezelfde als in Blader door stijlen. Kies je er een, dan vervangt dat de kleuren die je net hebt aangepast.
3. Tekst, achtergrond, links en knoppen
Veel handleidingen sturen je voor de tekst- en achtergrondkleur nog steeds naar Kleuren. In WordPress 7.1 staan die in andere panelen:
- Achtergrond van de site: Stijlen → Achtergrond → Kleur.
- Lopende tekst: Stijlen → Typografie → Tekst → Kleur.
- Links, bijschriften, knoppen en kopteksten: Stijlen → Kleuren, onder Elementen. Kopteksten kunnen één kleur voor alle niveaus krijgen of een eigen kleur voor H1 tot H6.
- Eén soort blok op de hele site, bijvoorbeeld elk citaatblok: Stijlen → Blokken, kies het blok en daarna zijn kleuren.
Kies in al deze panelen een kleur uit het palet, geen aangepaste kleur. In sectie 5 lees je waarom.
4. De kleur van één blok veranderen
Wil je één sectie een andere kleur geven, bijvoorbeeld een groep met een aanbod, selecteer die dan en open in de zijbalk het tabblad Blok. In WordPress 7.1 zijn ook de kleuren van een blok verdeeld:
- de tekstkleur staat bij Typografie → Kleur;
- de achtergrondkleur staat bij Achtergrond → Kleur, naast Afbeelding en Verloop.
Klik op Kleur en je krijgt het palet van het thema. De kleurstaal met een vinkje is de huidige kleur. De grote staal bovenaan opent een kiezer voor elke andere kleur.
5. Waarom paletkleuren beter zijn dan aangepaste kleuren
Kies je een kleurstaal uit het palet, dan slaat WordPress niet de kleur zelf op. Het slaat de naam op, bijvoorbeeld ‘Surface’. Kies je een aangepaste kleur, dan slaat het de code op, bijvoorbeeld #F3E3D3. Het verschil zie je op de dag dat je het palet verandert.
Op de testpagina hieronder gebruikt de eerste sectie Surface en Accent, de tweede een aangepast beige. Met het standaardpalet zien beide er goed uit. Daarna schakelde ik over naar het donkere palet Midnight. De eerste sectie ging mee. De tweede hield de beige achtergrond, maar kreeg de nieuwe lichte tekstkleur, en de tekst verdween bijna.
Houd je in blokken dus aan het palet. Heeft één blok echt een extra kleur nodig, dan is een aangepaste kleur prima, maar controleer dat blok na elke paletwissel. Heeft een blok al een aangepaste kleur, selecteer het dan, open de kleur en klik op een kleurstaal uit het palet.
Waarom een thema-update je palet niet veranderde
Als je een kant-en-klare stijl of palet kiest, kopieert WordPress de kleuren ervan naar de stijlen van je site. Ik heb het gecontroleerd: na één klik op het palet Ocean in Makani Pro stonden in de opgeslagen stijlen alle zes kleurcodes, geen verwijzing naar Ocean. Past de auteur van het thema Ocean in een update aan, dan houdt je site de oude versie. Wil je de nieuwe, open dan Blader door stijlen, klik opnieuw op het palet en sla op.
Een eigen palet toevoegen (voor ontwikkelaars)
Een palet is een JSON-bestand in de map styles van het thema. Bevat het alleen kleuren, dan toont WordPress het onder Kleurvariaties. Zet er elke kleur van het themapalet in, met dezelfde slugs: een palet vervangt het palet van het thema in zijn geheel, en een slug die je weglaat, verliest overal zijn kleur.
{
"$schema": "https://schemas.wp.org/wp/7.1/theme.json",
"version": 3,
"title": "Harbor",
"settings": {
"color": {
"palette": [
{ "slug": "background", "name": "Background", "color": "#F4F7F9" },
{ "slug": "surface", "name": "Surface", "color": "#E6EDF2" },
{ "slug": "primary", "name": "Primary", "color": "#13212C" },
{ "slug": "secondary", "name": "Secondary", "color": "#5A6B78" },
{ "slug": "line", "name": "Line", "color": "#D5DEE5" },
{ "slug": "accent", "name": "Accent", "color": "#0F6E8C" }
]
}
}
}Zet het bestand in een child-thema of in je eigen thema. Een bestand dat je aan het thema van iemand anders toevoegt, verdwijnt bij de volgende update. Schrijf je liever geen JSON, dan kan de plugin Create Block Theme je huidige stijlen omzetten in een nieuwe stijlvariatie.
Vragen
Waar is de sectie Kleuren van de Customizer?
Blokthema’s hebben die niet. Bij blokthema’s haalt WordPress het item Customizer uit het menu Weergave, tenzij een plugin het nog nodig heeft. De kleuren staan in Weergave → Editor → Stijlen.
Waarom zie ik Blader door stijlen niet?
Het thema levert geen stijlen, paletten of typesets mee. Je kunt elke kleur van het palet nog steeds aanpassen via Kleuren → Palet bewerken.
Verandert een nieuw palet mijn berichten?
Alleen hun kleuren, en alleen waar ze paletkleuren gebruiken. Tekst, afbeeldingen en lay-out blijven zoals ze zijn. Blokken met aangepaste kleuren houden die.
Zet een thema-update mijn kleuren terug?
Nee. Je kleuren staan in de database, los van de bestanden van het thema. Hier lees je waar ze staan en hoe je ze reset.
Thema’s met veel paletten
Probeer je graag kleuren uit, begin dan met een thema dat er veel heeft. Makani Pro heeft negen paletten, de stijl Ink en twee typesets. Kanoa Pro heeft 20 paletten, van Arctic Frost tot Warm Sunset. Lei PRO is standaard donker en heeft nog 11 paletten, van Warm Ivory tot Midnight. Meer donkere ontwerpen vind je in 5 donkere WordPress-blokthema’s voor een portfolio. En wil je een palet dat bij je merk past, dan kan ik het voor je instellen.
