tl;dr: Farben sind das wichtigste Gestaltungselement. Erfahre in diesem Beitrag, wie du in WordPress Farben definierst und anwendest und wo du sie verwaltet. Ich beschreibe hier das Farbmanagement mit dem Blockeditor und dem Theme Twenty Twenty-Four.
Der WordPress Farbwähler taucht immer auf, wenn Farben für Schriften, Hintergründe oder Ränder eingestellt werden können. Es lohnt sich ein genauerer Blick auf dieses wichtige Werkzeug.
Im oberen Bereich (hier mit dem Transparent-Pattern dargestellt) wird die Farbauswahl getroffen.
Das Feld darunter zeigt, solange keine Farbe gewählt wurde, No color selected an. Sobald eine Farbe gewählt wurde können hier die Farbwerte abgelesen werden bzw. wird hier der Name der Farbe – wenn es eine Theme-Farbe ist – angezeigt.
Die Kreise mit den Farbfeldern darunter zeigen die Farben des gewählten Stils im aktuellen Theme an. Die Anzahl dieser voreingestellten Farben ist je nach Stil unterschiedlich.
Die Funktion Leeren löscht eine getroffene Farbwahl.
Durch klicken in das Farbfeld oder verschieben des weissen Kreises weg von Links oben (weiss) wird die Farbwahl eingeleitet. Das Farbquadrat zeigt oben links weiss, unten links und rechts schwarz und oben rechts jene Grundfarbe, die im ersten der beiden Schiebereglern ausgewählt ist (default rot).
Durch Verschieben des Anfassers im Schieberegler über den Grundfarbenverlauf wird das Farbfeld verändert.
Der zweite Schieberegler ist für die Alphawerte zuständig, wird er von der Grundeinstellung rechts (=voll Deckend, 100) nach links bewegt wird zusätzlich zum Farbwert noch eine Alphawert im Farbcode ergänzt. Dadurch entsteht eine durchscheinende Farbe (Semitransparenz) die mit der Farbe des darunter liegenden Blocks reagiert.
WordPress bietet 3 Farbwert-Codierungen an: Hex, HSL und RGB. Je nach gewähltem Modell tauchen zu den einzelnen Werten Schieberegler und Eingabefelder auf.
Das Icon Rechts erlaubt das einfache Kopieren des Farbwertes in die Zwischenablage.
Farbverläufe können – vorsichtig eingesetzt – eine sehr einfach Möglichkeit sein effektvolle Gestaltungen zu erzeugen. Immer dann, wenn Verläufe möglich sind (zB. bei Hintergründen) kann man diese definieren.
Wenn möglich wird die Option Verlauf angeboten. Damit kann man 2 Farben definieren, zwischen denen der Verlauf generiert wird. Statt einem gibt es jetzt 2 weisse Kreise, die zur Definition von Start- und Endwert benötigt werden. Das Festlegen der beiden Farben funktioniert analog wie oben.
Hat man diese beiden Werte definiert, kann der Typ des Verlaufs festgelegt werden.
Belässt man die Voreinstellung Linear wird dieser im angegeben Winkel gezeichnet. Dieser kann numerisch oder über den Steuerkreis rechts angegeben werden.
Der Typ Radial lässt keine weiteren Einstellungen zu.
Auch bei den Verläufen kann es Definitionen aus dem Theme geben, die hier angezeigt werden und gewählt werden können.
Der Abstand der beiden weissen Kreise im Farbfeld bestimmt, wie weit der Volltonwert angezeigt wird und wo der Übergang zur zweiten Farbe beginnt.
Wählt man einen Verlauf aus der unteren Zeile (jene mit den geteilten Farbkreisen) liegen die beiden Punkte des Farbübergangs übereinander: zuerst Farbe 1, dann Farbe 2. Schiebt man nun die Punkte auseinander ist zwischen diesen Punkten der Farbübergang.
Also: bei einem Farbverlauf kann man einstellen, zwischen welchen 2 Farben ab wann der Übergang von der ersten zur zweiten Farbe erfolgt und ab wann die 2 Farbe alleine über ist. Bei Linearen Verlauf kan auch der Winkel dieser Farbachse definiert werden.
Natürlich gibt es eine zentrale Stelle, an der man die Farben und Verläufe für seine Website einstellen kann: den Stil. Moderne Blockthemes wie das kostenlose Standardtheme Twenty Twenty-Four haben mehrere Stile zur Auswahl, die man individuell anpassen kann.
Die Vorgangsweise ist also die: zuerst unter
Dashboard > Design > Website-Editor > Stile
die Übersicht über die vorhandenen Stile aufrufen.
Aus den 8 mit dem Theme installierten Stilen wählt man nun jenes aus, das am besten zum eigenen Projekt passt. Um einen besseren Überblick über die einzelnen Stile zu bekommen gibt es das Stilbuch.
Das Stilbuch enthält alle wichtigen Blöcke und erlaubt eine Vorschau des gewählten Stils.
Um einen Stil zu bearbeiten wählt man das Icon Stil bearbeiten.
Das Stilbuch ist eine Sammlung von 5 Bereichen: Text, Medien, Design, Widgets, Theme. Damit erhält man eine kompakte Vorschau, wie denn die eigentlichen Inhalte, Überschriften etc. mit dem jeweilig genutzten Stil aussehen.
Wenn man im Stil-Editor gelandet ist kann man aus den 3 Bereichen Typographie, Farben und Layout wählen.
Es gibt übrigens auch andere Wege um zur Stilbearbeitung zu gelangen: Das Stile Icon findet man rechts oben im Fenster immer dann, wenn Templates oder Vorlagen bearbeitet werden.
Über dieses Panel kann man auch die anderen Stile über den Link Durchstöbere die Stile auswählen.
WordPress nennt diese Sammlungen von Farben Farbpaletten. In der Default-Einstellungen ist bei Twenty Twenty-Four (TT4) der Stil Standard mit 10 Farben eingestellt.
Über die Palette lassen sich nun die Grundfarben ändern und weitere Farben dem Stil hinzufügen.
Farbe darunter zeigt nun wo diese Farben bestimmten Anwendungen zugeordnet wurden: Text, Hintergrund, Link, Beschriftungen, Button und Überschrift. Manchmal ist ein Farbkreis angezeigt, manchmal auch 2 oder 3, wenn es zusätzliche Möglichkeiten der Anzeige gibt wie zB. Hover (Bei Mauszeigerkontakt) oder Aktiv.
Neben dem Titel Farbe gibt es auch das Icon (2 vertikale Punkte) das zu den Farbe-Optionen führt. Damit lassen sich zusätzlich zu den 6 oben angeführten Anwendungen weitere der Liste hinzufügen, bei den Farben sind das H1 bis H6.
Praktisch bedeutet das, dass man zuvor zB. für Überschriften eine Farbe für den Standard und eine zweite für den Mauskontakt (Hover) einstellt, zusätzlich aber über die Optionen die H3 mit einer anderen Farbe als die anderen Überschriften definieren kann.
Klickt man nun auf die Box mit den angezeigten Palettenfarben kann man diese Farben bearbeiten sowie neue Farben und Verläufe zu dem Stil hinzufügen. Zusätzlich werden hier auch die definierten Duotone-Einstellungen angezeigt, sie sich im Augenblick aber nicht berarbeiten lassen.
Klickt man nun auf die Box mit den angezeigten Palettenfarben kann man diese Farben bearbeiten sowie neue Farben und Verläufe zu dem Stil hinzufügen. Zusätzlich werden hier auch die definierten Duotone-Einstellungen angezeigt, sie sich im Augenblick aber nicht berarbeiten lassen.
Wenn man nun Farben auf einzelne Blöcke anwenden will ist es sinnvoll, die Farben aus der Farbpalette zu wählen. Damit erhält man einerseits ein konsistentes Erscheinungsbild, andererseits kann man durch Änderung einer Farbe im Stil alle Anwendungen dieser Farbe mit ändern.
Die Anwendung ist erwartbar einfach: Block auswählen und danach Farbe rechts aus dem Tab Farbe auswählen für den Text und den Hintergrund. Sobald eine Textfarbe gesetzt wird taucht automatisch das Optionsfeld für das Setzen von Linkfarben auf.
Natürlich funktioniert das Einfärben nicht nur bei Inhaltsblöcken sondern auch bei solchen die für Layout verwendet werden. Bei verschachtelten Konstruktionen muss immer beachtet werden wo genau eine Farbe definiert wurde. Es wird immer die Farbe verwendet die „näher dran“ ist.
Bei dem Beispiel oben wurden sowohl beim Block Spalten (grün) sowie bei beiden Blöcke Spalte (schwarz und weiss) eine Hintergrundfarbe gesetzt. Zusätzlich wurde beim zweiten Block Spalte auch noch die Textfarbe gesetzt.
Nun hat der Block Spalte selber gar keinen Text, aber innerhalb des Blocks können Texte vorkommen: hier wurde eine Überschrift, ein Absatz und noch eine Überschrift in die Spalte gesetzt. Die eingestellte Textfarbe (braun) wirkt jedoch nur beim Absatz! Die beiden Überschriften bleiben schwarz. Das liegt einfach daran, dass es im aktuellen Stil eine Farbdefinition für Überschriften gibt die wichtiger ist als die in der Spalte gesetzte Farbe. Beim Absatz ist das nicht so.
Will man nun auch die Farbe der Überschiften ändern muß man entweder den Stil bearbeiten (für alle Überschriften oder zB. für die Überschriften der Größe H2) oder aber man ändert die Farbe für jeden einzelnen Block extra, wo das eben notwendig ist.
Es hängt vom jeweiligen Block ab wo man Farben anwenden kann und wo nicht. Wichtig für eine rationelle Arbeit mit dem Blockeditor ist es, seine Farben im Stil einzustellen und von dort aus die Anwendung zu starten. Nur im Ausnahmefall sollten Farben direkt beim Block gesetzt werden müssen.
Veröffentlicht am: 22. Januar 2024
Letztes Update: 10. Februar 2024
