De kleur van Headings veranderen in WordPress Gutenberg

Ik gebruik sinds kort de wordpress Gutenberg Editor. Het is wennen, maar sommige functies, zoals de kolommen, vind ik wel handig. Maar ik had een probleem, ik kan wel een paragraaf tekst van kleur laten veranderen, maar de kleur van mijn headings (Koppen) niet. Aangezien headings bijdragen aan de leesbaarheid wilde ik toch graag de kleur van de headings kunnen veranderen. Het gebruiken van tekst in een groter lettertype is niet echt een optie, omdat dat een ander lettertype is en omdat het de tekst ook minder toegankelijk maakt voor zoekmachines (geloof ik, ik ben gen expert op dit gebied, misschien kan iemand me dit nog uitleggen?). Ik wil graag een kleurrijk blog, dus die headings moeten van kleur te veranderen zijn.

Een zoektocht op het web leverde een oplossing op, die wil ik dus graag met jullie delen, zodat ook jij de kleur van headings makkelijk kunt veranderen in WordPress Gutenberg.  Ik heb deze oplossing dus niet zelf bedacht, maar wel zelf gevonden en getest (klik hier voor de site waar ik de oplossing vond).

Wat moet je doen?

Zoals je ziet is de kleur van deze Heading roze, terwijl deze in mijn thema standaard zwart is. Om de heading roze te maken moet je het volgende doen:

Ga naar de Customizer

• Ga naar je Customizer, dit is waar je je thema live kunt aanpassen waarbij je de wijzigingen gelijk ziet. Je kan hier komen door op je Dashboard op Weergave te klikken, en vervolgens op Customizer.

• In je Customizer druk je op Extra CSS >. Wanneer je dit hebt gedaan krijg je een schermpje waar je codes in kan typen. Ik vind dit zelf er nog best eng uit zien, maar stay with me als je deze stappen volgt komt het goed!

• Typ in het schermpje de volgende tekst:

    

.class-name-here {
	color: rgb(255, 0, 0);
}
.another-class-name {
	color: rgb(0, 0, 255);
}

(je kan deze tekst kopiëren)

Pas de bovenstaande code aan naar wens:

• waar .class-name-here staat kun je een eigen naam van de kleur geven, in mijn geval heb ik hier getypt  .roze (let op dat je de punt niet weghaalt). Het zelfde kun je doen waar staat .another-class-name, als je meerdere kleuren wilt toevoegen. Gebruik geen spaties in de namen die je gebruikt, maar streepjes zoals in het voorbeeld.

• Vervolgens voer je de kleur in, in RGB codes. Als je deze code niet weet kun je dit op internet opzoeken. Ik heb deze op internet op gezocht door te zoeken op convert Hex color to RGB (dit kan bijvoorbeeld op deze site).

Voorbeeld:

De kleur Roze die ik veel gebruikt is Hex kleur: #FF5682, dit is RGB kleur: (255, 86, 130). Om deze kleur aan mijn headings te kunnen geven moet ik het volgende intypen:

 

.roze {	
    color: rgb(255, 86, 130);
}

  

• Doe het zelfde voor eventuele andere kleuren die je aan je headings wil geven (zoals ik hieronder heb gedaan voor de belangrijkste kleuren van mijn site).

 Zo ziet het er bij mijn site uit:

Publiceer je veranderingen

• Dit doe je door rechts bovenin de Customizer op publiceer te drukken
• Je hebt nu een CSS klasse gemaakt die je in het vervolg kan gebruiken bij de opmaak van je Headings  (maar ook voor andere tekst, zoals lijsten etc, zie mijn Tip onderaan)
  

Aan de slag in Gutenberg

• Maak een Heading (Kop) door op het blok met de T te drukken. Je kan kiezen welk niveau heading je wil, H1, H2, H3 etc. Dit zegt iets over de grote van je heading.
• Vervolgens kun je bij de blokinstellingen kiezen hoe je de tekst uitgelijnd wil hebben.
  

Nu komt het:

• Klik onder de tekstuitlijning op Geavanceerd
• Je ziet nu een tekstveld waar boven staat Extra CSS class
• Hier typ je de naam in van de kleur die je hebt opgegeven in de customizer. In mijn geval als ik een roze heading wil vul ik hier in: roze
• Let op: nu moet er geen punt voor het woor roze (dit had ik eerst wel gedaan maar toen werkte het niet 😉 )
  

Dat is alles!

Je zult niet meteen een verandering zien wanneer je je bericht in de Editor typt, maar in je voorbeeld of in het gepubliceerde bericht heb je wel degelijk gekleurde headings. Ik wordt daar wel vrolijk van, en het maakt mijn blog gezelliger vind ik 🙂

Tip:

Dit werkt niet alleen voor headings (kopjes) maar ook voor andere tekst zoals lijsten. Deze kun je met dezelfde CSS class een andere kleur geven. Ik vind het zelf vooral handig dat je niet elke keer de kleur codes op hoeft te zoeken van de belangrijkste kleuren in je thema, dus gebruik dit vanaf nu ook voor normale tekst.

Heb jij al eens dingen aangepast met behulp van CSS? en zo ja wat?

Als je tips hebt voor mij op dit gebied dan zijn die heel erg welkom!

Ik voel me nu wel heel erg Nerdy en trots dat ik dit werkend kreeg 😉