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 😉

 

In een paar simpele stappen headings van kleur veranderen in wordpress gutenberg - www.gezellie.nl

  

Volg:

9 Reacties

  1. Jessica - Foodie Feest
    november 6, 2018 / 10:35 am

    Leuk dat je hier mee bezig bent! 🙂 Ik heb voor mijn blog een thema gekocht en verder helemaal gecustomized met css en wat html classes. Maar ik werk voor mijn baan dagelijks met css, dus ik weet de weg 😀

    • GezEllie
      Auteur
      november 6, 2018 / 11:43 am

      Leuk om te lezen, ik ben benieuwd wat je er allemaal nog meer mee kan doen… (just getting started)

  2. november 6, 2018 / 11:22 am

    haha ik zou mij ook nerdy en vooral trots voelen als zoiets gelukt is. Voor sommige is dit appeltje eitje. Maar voor mij is dit allemaal abracadabra. Goed uitgelegd. Ik kon het in ieder geval volgen. Zelf heb ik een “gratis” account waarmee ik vooralsnog prima uit de voeten kan.

  3. november 7, 2018 / 7:59 am

    Ik ben niet zo goed hierin, maar je uitleg is heel duidelijk! Goed om te onthouden

  4. november 7, 2018 / 10:01 am

    Wat een duidelijke en fijne uitleg zo stap voor stap! Ik moet zelf nog over op Gutenberg, maar kijk er eigenlijk als een berg tegenop. Zal er toch een keer aan moeten geloven, haha!

    • GezEllie
      Auteur
      november 7, 2018 / 10:28 am

      Ik vind het ook best wel wennen, maar wat wel heel fijn is dat je met kolommen bijvoorbeeld meerdere fotos naast elkaar kan plaatsen. Ik hoop wel dat er nog verbeteringen worden doorgevoerd, want anders zijn er heel veel van dit soort trucjes nodig om het zelfde te kunnen doen als in de klassieke editor.

  5. november 7, 2018 / 2:49 pm

    Heeeeel erg nerdie! 😉
    Dank voor de heldere uitleg, Gutenberg zit er sowieso aan te komen dus heel handig om dit alvast te weten!

  6. november 7, 2018 / 6:07 pm

    Ik zou me echt trots voelen als ik dit zo gefixt had haha, alleen ik wil niet teveel kleuren hanteren in de tekst dus ik denk dat ik het zo maar laat.

  7. LifestylebyLinda
    november 10, 2018 / 11:10 am

    Ik was het haast alweer vergeten dat dit omgezet gaat worden. Handig artikel, ga ik even opslaan! Heb namelijk zo’n idee dat ik de huidige versie heel erg ga missen haha!

Geef een reactie

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Onderwerpen