Neues zu WordPress 6.7
Neues zum Theme 2025

Standardthemes

WordPress anpassen

Farben in WordPress ändern. Ich zeige ich dir, wie du die Farben in einem Block-Theme änderst. Ohne CSS anfassen. Das Tutorial funktioniert mit jedem Standardtheme ab 2022.

Farben ändern in WordPress

  1. Farben über Stilwechsel ändern
  2. Anleitung: Änderung der Hintergrundfarbe
  3. Anleitung: Änderung der Überschriftenfarbe
  4. Anleitung: Tabellenhintergrund ändern
  5. Anleitung: Button mit Farbverlaufsfüllung
  6. Anleitung: Header-Farbe ändern
  7. Anleitung: Farbpalette anpassen

Farben über Stilwechsel ändern

Zu jedem Stil liefert WordPress eine Farbpalette mit. Eine Palette ist eine Zusammenstellung von Farben. Die Anzahl der Paletten hängt vom Theme ab:

Zur Stilauswahl kommst du über das Dashboard. Klicke rechts unter Willkommen bei WordPress auf Verändere das Aussehen deiner Website mit Stilen.

Anschließend blendet dir WordPress eine Übersicht aller möglichen Stile ein. Die Anzahl der Stile hängt vom jeweiligen Theme ab.

Den passenden Stil wählen

Acht Stile stehen bei Twenty Twenty-Four zur Auswahl:

Standard (mag ich)Ember
Fossil Eis
Malstrom Minze
OnyxRost (mag ich)
Die acht Stile von Twenty Twenty-Four

Der Umfang geht von drei Farben (Stil Rost) bis zehn Farben (Stil Standard). Meine Farb-Favoriten sind Standard und Rost, also die Stile links oben und rechts unten.

Das Bild oben zeigt die Farben vom Stil Rost. Es sind zwar nur drei, aber mir gefällt die Palette trotzdem sehr gut, ich mag den Kontrast und die Nuancen. Und wenn die drei Farben nicht reichen? Kein Problem. Das Gute an aktuellen Themes bzw. WordPress-Versionen ist, dass ich für fast alle Elemente meiner Website die Farben frei wählen kann.

Stile bei Theme Twenty Twenty-Five

Bei Twenty Twenty-Five stehen neun Stile zur Auswahl.

  1. Stil Standard
  2. Stil Noon
  3. Stil Afternoon
  4. Stil Morning
  5. Stil Midnight
  6. Stil Evening
  7. Stil Dusk
  8. Stil Twilight
  9. Stil Sunrise

Farbpalette wechseln

Unabhängig vom Stil kann ich auch nur die Farbpalette wechseln.

  1. Farbpalette Standard
  2. Farbpalette Noon
  3. Farbpalette Afternoon
  4. Farbpalette Morning
  5. Farbpalette Midnight
  6. Farbpalette Evening
  7. Farbpalette Dusk
  8. Farbpalette Twilight
  9. Farbpalette Sunrise

Soweit zu den globalen Änderungen. Weiter geht es mit Farbänderungen an bestimmten Stellen.

Anleitung: Änderung der Hintergrundfarbe

Änderung einer Hintergrundfarbe. Die Aufgabe: Es geht um eine Farbänderung in einem Block. Ein Zitate-Block soll einen Hintergrund erhalten, der nicht von der Stil-Palette abgedeckt wird. So wählst du eine individuelle Farbe:

  1. Klicke den betreffenden Block an.
  2. Klicke rechts auf das Register Block.
  3. Klicke auf das „Halbmond“-Symbol.
  4. Klicke auf Hintergrund.
  5. Klicke auf das Schachbrettmuster.
  6. Wähle deine Wunschfarbe.

Anleitung: Änderung der Überschriftenfarbe

Anpassung der Farbe einer Überschrift. Die Methode ist ähnlich wie bei Tutorial Nummer Eins: Überschriftenblock auswählen, rechts auf das Register Block klicken, auf das „Halbmond“-Symbold, dann auf Text.

Nachdem die Überschriftenfarbe geändert wurde, beschwert sich WordPress über den fehlenden Kontrast – und nennt auch gleich zwei Lösungsmöglichkeiten; „Diese Farbkombination ist unter Umständen für manche Menschen schwer lesbar. Wähle eine hellere Hintergrundfarbe und/oder eine dunklere Textfarbe.“

Jetzt wurde der weiße Hintergrund durch einen schwarzen ersetzt. WordPress ist mit dem Kontrast zwischen Text und Hintergrund zufrieden. Weiter unten kann ich auch noch die Linkfarbe ändern, und zwar in zwei Zuständen:

  • Normale Anzeige des Links.
  • Link beim Überfahren mit der Maus.

Anleitung: Tabellenhintergrund ändern

Tabellenhintergrund ändern. Seit ich Twenty Twenty-Four einsetze, ändere ich subtil sämtliche Tabellenhintergründe. Das Ergebnis siehst du im obigen Bild: Die Tabelle ist leicht hervorgehoben, ohne das Gesamt-Layout zu zerstören. Als Style habe ich Rost eingesetzt. Für den subtilen Effekt genügt mir die Farbpalette von Rost.

Alle Farben stammen alle aus der Farbpalette von Rost:

  1. Themefarbe Basis (#F3F0E7) definiert den Seitenhintergrund.
  2. Für den Hintergrund der Tabelle hab ich die Themefarbe Basis 2 (#ECEADF) ausgewählt.
  3. Themefarbe Kontrast (#A62B0C) definiert die Schrift.

Anleitung: Button mit Farbverlaufsfüllung

Einen Button verschönern. Schöne Buttons werden öfter geklickt und sind wichtig, um die Besucher ein bisschen bei der Hand zu nehmen. Beispiel: Ein Button „Zum Kontaktformular“ ist effektiver als ein einfacher Link. Wir basteln jetzt einen Button mit Farbverlaufsfüllung. Der erste Schritt ist ähnlich wie bei der Tabelle:

  • Im Hauptfenster einen Block anlegen – den Buttonblock
  • Im Hauptfenster der Buttonblock auswählen (anklicken)
  • Im rechten Fenster das Register Block auswählen
  • Im rechten Fenster auf das Design-Icon klicken (den Halbmond)
  • Im rechten Fenster bei den Farben auf Hintergrund klicken

Jetzt geht es weiter mit der Farbauswahl. Zwei Optionen stehen zur Auswahl:

  • Einfarbig – ist voreingestellt
  • Verlauf

Zum Vergleich: Als Stil von Twenty Twenty-Four ist hier Standard im Einsatz. Die Farbpalette ist mit zehn Farben wesentlich größer als oben bei Rost mit drei.

Wie erwähnt: Zur Auswahl der Hintergrundfarbe den Buttons bietet mir WordPress Einfarbig und Verlauf an. Ich wähle Verlauf aus. Dann stehen mir zwei Zeilen für die Auswahl Übergängen zur Verfügung:

  • Obere Zeile: Weiche Farbübergänge
  • Untere Zeile: Harte Farbübergänge

Ausgewählt habe ich zunächst den weichen Übergang von Orange zu Weiß. Dann habe ich die Farben und den Winkel des Übergangs angepasst. Die Farben lassen sich mit einem Klick auf die Kreise im Verlaufsfeld ersetzen. Weiß habe ich durch Schwarz ersetzt. Warum? Weil die Beschriftung weiß wird.

Das Ergebnis ist ein Button mit einem Schwarz-Orange-Farbverlauf. Die weiße Schrift ist darauf gut zu lesen.

PS: Ich hab noch etwas an den Reglern gespielt, dewegen sind die Farben Schwarz und Orange vertauscht.

Anleitung: Header-Farbe ändern

Die Farbe des Headers ändern. Weil der Header auf jeder einzelnen Seite der Website angezeigt wird, klicke ich auf Website bearbeiten. Damit öffnet sich der Website-Editor.

In der linken Spalte des Website-Editors scrolle ich nach unten. Vier Bereiche meiner Website stehen dort zur Auswahl: Header, Beitrags-Meta, Seitenleiste und Footer. Ich klicke auf Header.

In den Bearbeitungsmodus des Headers komme ich mit einem Klick auf das Stift-Icon.

Mit diesen fünf Schritten klicke ich mich zur Farbauswahl für die Hintergrundfarbe:

  1. Linke Spalte: Mit einem Klick auf die „Treppe“ (so nenne ich dieses Listen-Icon) öffne ich die Listenansicht. Die Listenansicht listet mir die Gruppen (von Blöcken) auf, die ich in meinem WordPress verwende.
  2. Ich will den gesamten Header einfärben, also wähle ich die gesamte Gruppe aus.
  3. Rechte Spalte: Ich wähle das Register Block.
  4. Ich klicke auf den „Halbmond“ (so nenne ich dieses Design-Icon).
  5. Ich klicke bei Farben auf Hintergrund.

Die Farbe kann ich frei wählen, ich bediene mich aber aus der vorgegebenen Farbpalette meines Stils (Stil Standard des Themes Twenty Twenty-Four). So vermeide ich den Einsatz zu vieler Farben. Wie du an dem folgenden Autorenkasten siehst, hat er die selbe Farbe wie der Header. Farbpaletten sind prima, um die Einheitlichkeit und damit den Wiedererkennungswert einer Website zu wahren. Marketing-Menschen nennen das „Corporate Identity“, oder kurz CI.

Anleitung: Farbpalette anpassen

Die Farbpalette anpassen. WordPress wird immer besser. Früher war das Anpassen der Farbpalette eine komplizierte Angelegenheit, heute lassen sich die Farben mit ein paar Klicks ändern. Kenntnisse zu CSS oder der Bearbeitung der .json-Datei sind nicht erforderlich. Die Schaltzentrale für globale Anpassungen von Typografie, Farben, Schatten und Abständen nennt sich Stilbuch. So klickst du dich in das Stilbuch von WordPress:

  1. Klicke auf den Website-Editor.
  2. Klicke auf das Design-Symbol (den „Halbmond“).
  3. Klicke auf das Auge.

Das Stilbuch öffnen

Im Stilbuch kannst du links im Hauptfenster zwischen den verschiedenen Registern wechseln: Text, Medien, Design, Widgets und Theme. Für einen schnellen Überblick empfehle ich das Register Theme. In der rechten Spalte durchstöberst du die verschiedenen Stile deines Themes und entscheidest dich dann für einen Stil.

Farbeinstellungen im Stilbuch öffnen

Unterhalb der Stilauswahl findest du diese drei Menüpunkte:

  • Typografie
  • Farben – die sind für unsere geplante Änderung relevant
  • Layout

Farben neu definieren

Im obigen Bild ist der Stil Standard des Themes Twenty Twenty-Four aktiv. Die darin definierten zehn Farben lassen sich sehr einfach ändern. Beispiel für die Änderung der Textfarbe:

  1. Klicke auf Text.
  2. Voreingestellt ist die Farbe #111111, also eine fast schwarze Farbe.
  3. Klicke links auf das Farbfeld.
  4. Ändere die Farbe, zum Beispiel in #000000, also ein reines Schwarz.
  5. Speichere die Farbänderung im Stilbuch ab.

Mit der selben Methode kannst du auch die Hintergrundfarbe deines Stils oder die Linkfarben ändern – im Ruhezustand und beim Anklicken der Links.
Zum Umrechnen der Farben von CMYK nach RGB oder Hexwerten gibt es hier ein schönes Tool.

Stile statt Child-Themes

Für einen alten WordPress-Hasen wie mich ist das Stilbuch eine echte Offenbarung. Die Zeit der Childthemes ist vorbei. Was ich ändern will, erledige ich bequem im Stilbuch.

PS: Das Beitragsbild oben zeigt den Farbkreis von Goethe. Der Dichterfürst hat sich um Farbkombinationen kluge Gedanken gemacht. Die Designerin von TT4 auch. Das ist gut für Stümper wie mich, ich klicke mich durch die WordPress-Stile und freue mich über narrensichere Farb-Paletten. Farbpaletten sind prima, weil unpassende Farbkombinationen vermieden werden.


Bernd Schmitt

Klappt es bei dir mit den Farben in WordPress? Hast du noch Fragen zu Stilen oder dem Stilbuch? Mein Name ist Bernd Schmitt und ich betreibe standardthemes.de.
Wenn du noch ein Problem oder eine Lösung zu Farben oder Paletten hast, schreib einfach einen Kommentar.


Kommentare

2 Antworten zu „Farben ändern in WordPress – ohne CSS anfassen“

  1. Hallo lieber Bernd,

    einleitend erst einmal herzlichen Dank für Deine ausführlichen Erläuterungen. Ich bin auf diese bei einer Online-Recherche aufmerksam geworden.

    Sag bitte, ist es per CSS möglich, eine Farbe die oftmals an verschiedenen Bereichen einer WordPress-Seite zum Einsatz kommt, mit nur einem Befehl komplett gegen eine andere zu ersetzen?

    Danke und LG

    Boris

    1. Hallo Boris,
      über Werkzeuge / Theme-Datei-Editor / Styles kommst du in den Quellecode deines Themes und kannst die Farben via CSS direkt ändern. Allerdings werden diese Änderungen beim nächsten Theme-Update überschrieben. Wennn du das Überschreiben verhindern willst, kannst du mit Child-Themes arbeiten. Notwendig sind Child-Themes nach meiner Meinung nur noch bei älteren Themes .. also Themes, die noch nicht über ein Stilbuch verfügen. Was du im Stilbuch änderst überlebt ja die Updates. 😉
      VG Bernd

Schreibe einen Kommentar

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