Text-Farbe ändern und neue Vorschau-Funktion

Von Jola, am 25. September 2020, Lesedauer: Warning: Undefined variable $post in /home/.sites/617/site1500155/web/gb20/wp-content/themes/jwp5buch/functions.php on line 211 Warning: Attempt to read property "ID" on null in /home/.sites/617/site1500155/web/gb20/wp-content/themes/jwp5buch/functions.php on line 211 4 Minuten

Text in einem Absatz mit verschiedenen Farben
Einzelne farbige Wörter sind nett – aber bitte kein Farbkastl erstellen!

Seit WordPress 5.4 ist es (endlich) möglich, einzelne Wörter innerhalb eines Absatz-Blocks und im Überschriften-Block in einer gewünschten Farbe einzufärben. Davor war nur die Änderung der Text-Farbe des gesamten Absatzes bzw. der gesamten Überschrift möglich (siehe Buch Seite 211). Zudem steht nun auch eine neue Vorschau-Funktion zur Verfügung (Stand Sept 2020, WordPress 5.5.1).

1. Textfarben im Block-Editor

Standardmäßig stehen im Block-Editor zwölf Farben und eine individuelle Farbe zur Auswahl zur Verfügung. Theme-spezifisch kann diese Auswahl eingeschränkt sein und die Verwendung von individuellen Farben gänzlich unterbunden werden.

2. Textfarbe einzelner Wörter ändern

Um die Textfarbe einzelner Wörter zu ändern, markieren Sie das gewünschte Wort bzw. den gewünschten Textbereich. Klicken Sie anschließend in der Werkzeugleiste oberhalb des Absatz- bzw. des Überschriften-Blocks auf den kleinen Pfeil und wählen Sie Textfarbe:

Dialogfenster Textfarbe auswählen
Wählen Sie Textfarbe

Danach können Sie die gewünschte Farbe aus der Farbpalette auswählen:

Auswahl einer Farbe für den markierten Text
Hier können Sie die gewünschte Farbe festlegen

3. Textfarbe wieder entfernen

Zum Entfernen der gewählten Textfarbe markieren Sie den eingefärbten Text. Klicken Sie anschließend auf Textfarbe d.h. das große A unterstrichen mit der gewählten Farbe:

DIalogfeld Textfarbe öffnen
Zuerst markieren Sie den Text, danach klicken Sie auf Textfarbe

Es öffnet sich das Fenster mit der Farbauswahl. Hier nicht auf Schwarz klicken, sondern auf Leeren! Nur so wird die Formatierung entfernt, die im Theme vorgesehene Schriftfarbe wird wieder angezeigt.

Textfarbe entfernen
Zum Entfernen der Farbe klikcen Sie auf Leeren!

4. Neue Vorschau-Funktion

Auch eine neue Vorschau-Funktion steht nun zur Verfügung (Stand 25. Sept 2020, WordPress 5.5.1). Mit Klick auf Vorschau öffnet sich ein kleines Fenster mit Desktop, Tablet und Mobil sowie Vorschau im neuen Tab zur Auswahl:

Dialogfenster Vorschau
Dialogfenster Vorschau des Block-Editors

Bei Desktop wird die Desktop-Version der Seite im Block-Editor angezeigt. Möchten Sie sich die Vorschau des Beitrages oder der Seite im Browser anschauen d.h. wie die Seite bzw. der Beitrag im Browser tatsächlich angezeigt wird, klicken Sie auf Vorschau in neuen Tab. Tipp: Verlassen Sie sich nicht auf die „korrekte“ Anzeige im Block-Editor. Überprüfen Sie immer, wie die fertige Versionen im Browser Ihren Besucherinnen und Besuchern präsentiert wird. Das Motto „testen, testen, testen“ ist auch heute noch aktuell!

Mit Klick auf Tablet wird im Block-Editor die Seite bzw. der Beitrag in einer schmäleren Version angezeigt, mit Klick auf Mobil in einer schmalen Version für Smartphones. Tipp: auch hier ist es ratsam, die Vorschau in einem neuen Tab anzeigen zu lassen und dann die Browserbreite zu reduzieren.

Anzeige Vorschau im Block-Editor für Tablet und für Mobilgeräte
Anzeige Vorschau im Block-Editor für Tablet (oben) und für Mobilgeräte (unten)

5. Zusammenfassung

Das Einfärben von einzelnen Wörtern zur Hervorhebung kann rein optisch sehr hilfreich sein. Im Sinne der Zugänglichkeit wäre eine zusätzliche semantische Auszeichnung mit fett und/oder kursiv wichtig, damit Screenreader die Wörter beim Vorlesen entsprechend betonen können.

Mit der neuen Vorschau-Funktion können Sie sich eine Vorschau der Seite bzw. des Beitrags für Desktops, Tablets und Smartphones im Block-Editor sowie die Desktop-Version in einem neuen Tab anzeigen lassen.

Nach oben

Veröffentlicht in der Kategorie Änderungen | Tags: , , , | Keine Kommentare


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert