Bei einem klassischen Theme haben Sie die Farben im Customizer geändert. Ein Block-Theme hat dort keinen Bereich Farben: Um die Farben im Block-Theme zu ändern, öffnen Sie den Website-Editor und dort die Stile. Sie können mit einem Klick das ganze Aussehen wechseln, nur die Palette austauschen, eine Farbe der Palette ändern oder einen einzelnen Block umfärben.
Diese Möglichkeiten sehen ähnlich aus, verhalten sich aber unterschiedlich. Klicken Sie sie in der falschen Reihenfolge an, sind Ihre Änderungen weg. Geben Sie einem Block eine individuelle Farbe statt einer Farbe aus der Palette, geht der nächste Palettenwechsel an ihm vorbei. Hier lesen Sie, was jede Möglichkeit bewirkt und wann Sie sie nutzen.
Alles in diesem Artikel habe ich in WordPress 7.1.4 auf Deutsch mit meinen Themes Makani Pro und Kanoa Pro geprüft. In WordPress 7 sind einige Bereiche umgezogen, deshalb schicken ältere Anleitungen Sie womöglich zu Buttons, die es nicht mehr gibt.
Die kurze Antwort
- Ein neues Aussehen mit einem Klick: Design → Editor → Stile → Stile durchstöbern. Wählen Sie oben einen Stil oder unter Farbvarianten eine Palette und speichern Sie.
- Eigene Farben: Stile → Farben → Palette bearbeiten. Klicken Sie unter Theme auf eine Farbe, geben Sie einen neuen Hex-Code ein und speichern Sie. Alles, was diese Farbe verwendet, ändert sich mit.
- Ein einzelner Block: Wählen Sie ihn aus und öffnen Sie in der Seitenleiste im Tab Block den Punkt Typografie → Farbe für den Text oder Hintergrund → Farbe für den Hintergrund. Wählen Sie eine Farbe aus der Palette des Themes.
Stile, Paletten und Schriftsätze: Was ist der Unterschied?
Ein Block-Theme kann fertige Varianten seines Designs mitbringen. Jede davon ist eine kleine JSON-Datei im Ordner styles des Themes, und WordPress sortiert sie danach, was sie ändern:
| Was Sie wählen | Wo Sie es finden | Was es ändert | Beispiel |
|---|---|---|---|
| Stil | Stile durchstöbern, obere Reihe | Farben, Schriften und alles andere, was der Theme-Autor festgelegt hat, etwa Abstände oder Block-Stile | Makani Pro: Ink |
| Palette (Farbvariante) | Stile durchstöbern → Farbvarianten; Farben → Palette bearbeiten → Paletten | Nur die Farben | Makani Pro: 9 Paletten, Kanoa Pro: 19 |
| Schriftsatz (Typografie-Variante) | Stile durchstöbern → Typografie; Typografie → Schriftsätze | Nur die Schriften | Makani Pro: Mono und Regular |
Dieser letzte Punkt sorgt oft für Verwirrung. Eine Theme-Seite verspricht vielleicht „20 Stile“, aber wenn alle nur die Farben ändern, zeigt WordPress sie als Paletten, und die obere Reihe der Stile bleibt leer. So ist es bei meinem Kanoa Pro: Alle seine 20 Stile sind Paletten. Es fehlt nichts, sie stehen nur einen Abschnitt tiefer.
1. Zu einem fertigen Stil oder einer Palette wechseln
- Öffnen Sie Design → Editor und klicken Sie auf Stile.
- Klicken Sie auf Stile durchstöbern.
- Klicken Sie auf einen Stil in der oberen Reihe, um das Aussehen komplett zu wechseln, oder auf eine Palette unter Farbvarianten, um nur die Farben zu ändern. Die Vorschau rechts ändert sich sofort.
- Gespeichert ist noch nichts. Klicken Sie unten links auf 1 Änderung überprüfen … und dann auf Speichern.
Zuerst den Stil wählen, dann die Palette
Ich habe geprüft, was jeder Klick behält und was er ersetzt:
- Ein Stil ersetzt alles, was Sie unter Stile eingestellt haben: die Palette, die Schriften, die Farben von Links und Buttons. Nur Ihr Zusätzliches CSS bleibt erhalten.
- Eine Palette ersetzt nur Farben: die Palette und die Farben, die Sie für Links, Buttons und Überschriften festgelegt haben. Die Schriften bleiben, auch die Schriften des zuvor gewählten Stils.
- Standard in der oberen Reihe stellt das ursprüngliche Design des Themes wieder her und verwirft Ihre Änderungen genauso wie ein Stil.
Gehen Sie also in dieser Reihenfolge vor: Stil, dann Palette, dann Ihre eigenen Änderungen. Ändern Sie zuerst etwas, verwirft der nächste Klick auf einen Stil oder eine Palette es wieder. Solange Sie nicht gespeichert haben, können Sie den Editor noch verlassen, ohne zu speichern. Nach dem Speichern bleibt die vorherige Version in den Revisionen. Mehr dazu im Artikel Stile eines Block-Themes zurücksetzen.
2. Eine Farbe der Palette ändern
Die Palette eines Block-Themes ist eine kurze Liste benannter Farben. Makani Pro hat sechs: Background, Surface, Primary, Secondary, Line und Accent. Die Templates und Vorlagen des Themes enthalten keine Farbcodes, sie verweisen auf diese Namen. Ändern Sie Accent einmal, und jeder Button, der Accent verwendet, ändert sich mit.
- Öffnen Sie Stile → Farben und klicken Sie auf Palette bearbeiten.
- Klicken Sie unter Theme auf eine Farbe. Um zu sehen, welche Farbe welche ist, öffnen Sie ⋮ neben Theme und wählen Sie Details anzeigen: Dann sehen Sie Namen und Hex-Codes.
- Geben Sie den neuen Code in das Feld Hex ein oder ziehen Sie den Regler im Farbwähler. Über das Menü neben Hex wechseln Sie zu RGB oder HSL.
- Klicken Sie auf 1 Änderung überprüfen … und auf Speichern.
Unter den Farben des Themes steht Individuell mit einem Button +. Farben, die Sie dort hinzufügen, erscheinen in jedem Farbwähler, ändern das Design aber erst, wenn Sie sie für einen Block wählen. Weiter unten, unter Paletten, liegen die fertigen Paletten des Themes, dieselben wie in Stile durchstöbern. Wählen Sie eine davon, ersetzt sie die Farben, die Sie gerade bearbeitet haben.
3. Text, Hintergrund, Links und Buttons
Viele Anleitungen schicken Sie für Text- und Hintergrundfarbe noch zu Farben. In WordPress 7.1 liegen sie in anderen Bereichen:
- Hintergrund der Website: Stile → Hintergrund → Farbe.
- Fließtext: Stile → Typografie → Text → Farbe.
- Links, Beschriftungen, Buttons und Überschriften: Stile → Farben, unter Elemente. Überschriften können eine Farbe für alle Ebenen haben oder eigene Farben für H1 bis H6.
- Ein Blocktyp auf der ganzen Website, zum Beispiel jedes Zitat: Stile → Blöcke, den Block wählen, dann seine Farben.
Wählen Sie in jedem dieser Bereiche eine Farbe aus der Palette, keine individuelle. Warum, zeigt Abschnitt 5.
4. Die Farbe eines einzelnen Blocks ändern
Um einen einzelnen Abschnitt umzufärben, zum Beispiel eine Gruppe mit einem Angebot, wählen Sie ihn aus und öffnen Sie in der Seitenleiste den Tab Block. Auch beim Block sind die Farben in WordPress 7.1 aufgeteilt:
- die Textfarbe finden Sie unter Typografie → Farbe;
- die Hintergrundfarbe unter Hintergrund → Farbe, neben Bild und Farbverlauf.
Klicken Sie auf Farbe, und die Palette des Themes erscheint. Das Farbfeld mit dem Häkchen ist die aktuelle Farbe. Das große Farbfeld oben öffnet einen Farbwähler für jede andere Farbe.
5. Warum Farben aus der Palette besser sind als individuelle
Wählen Sie ein Farbfeld aus der Palette, speichert WordPress nicht die Farbe selbst. Es speichert den Namen, zum Beispiel „Surface“. Wählen Sie eine individuelle Farbe, speichert es den Code, zum Beispiel #F3E3D3. Den Unterschied sehen Sie an dem Tag, an dem Sie die Palette wechseln.
Auf der Testseite unten verwendet der erste Abschnitt Surface und Accent, der zweite ein individuelles Beige. Mit der Standard-Palette sehen beide gut aus. Dann habe ich zur dunklen Palette Midnight gewechselt. Der erste Abschnitt hat sich angepasst. Der zweite hat seinen beigen Hintergrund behalten, aber die neue helle Textfarbe bekommen, und der Text ist fast verschwunden.
Bleiben Sie in Blöcken also bei der Palette. Braucht ein Block wirklich eine zusätzliche Farbe, ist eine individuelle Farbe in Ordnung, prüfen Sie diesen Block dann nur nach jedem Palettenwechsel. Um einen Block zu korrigieren, der schon eine individuelle Farbe hat, wählen Sie ihn aus, öffnen seine Farbe und klicken auf ein Farbfeld.
Warum ein Theme-Update Ihre Palette nicht geändert hat
Wenn Sie einen fertigen Stil oder eine Palette wählen, kopiert WordPress deren Farben in die Stile Ihrer Website. Ich habe es geprüft: Nach einem Klick auf die Palette Ocean in Makani Pro standen in den gespeicherten Stilen alle sechs Farbcodes, kein Verweis auf Ocean. Passt der Theme-Autor Ocean in einem Update an, behält Ihre Website die alte Version. Um die neue zu bekommen, öffnen Sie Stile durchstöbern, klicken die Palette erneut an und speichern.
Eine eigene Palette hinzufügen (für Entwickler)
Eine Palette ist eine JSON-Datei im Ordner styles des Themes. Enthält sie nur Farben, zeigt WordPress sie unter Farbvarianten. Führen Sie jede Farbe der Theme-Palette mit denselben Slugs auf: Eine Palette ersetzt die Palette des Themes als Ganzes, und ein Slug, den Sie weglassen, verliert überall seine Farbe.
{
"$schema": "https://schemas.wp.org/wp/7.1/theme.json",
"version": 3,
"title": "Harbor",
"settings": {
"color": {
"palette": [
{ "slug": "background", "name": "Background", "color": "#F4F7F9" },
{ "slug": "surface", "name": "Surface", "color": "#E6EDF2" },
{ "slug": "primary", "name": "Primary", "color": "#13212C" },
{ "slug": "secondary", "name": "Secondary", "color": "#5A6B78" },
{ "slug": "line", "name": "Line", "color": "#D5DEE5" },
{ "slug": "accent", "name": "Accent", "color": "#0F6E8C" }
]
}
}
}Legen Sie die Datei in ein Child-Theme oder in Ihr eigenes Theme. Eine Datei in einem fremden Theme verschwindet mit dem nächsten Update. Wenn Sie lieber kein JSON schreiben möchten, kann das Plugin Create Block Theme Ihre aktuellen Stile in eine neue Stilvariante umwandeln.
Fragen
Wo ist der Bereich Farben im Customizer?
Block-Themes haben ihn nicht. Bei ihnen entfernt WordPress den Eintrag Anpassen aus dem Menü Design, es sei denn, ein Plugin nutzt ihn noch. Die Farben finden Sie unter Design → Editor → Stile.
Warum sehe ich Stile durchstöbern nicht?
Das Theme bringt keine Stile, Paletten oder Schriftsätze mit. Trotzdem können Sie jede Farbe seiner Palette unter Farben → Palette bearbeiten ändern.
Ändert eine neue Palette meine Beiträge?
Nur deren Farben, und nur dort, wo sie Farben aus der Palette verwenden. Texte, Bilder und Layout bleiben, wie sie sind. Blöcke mit individuellen Farben behalten diese.
Setzt ein Theme-Update meine Farben zurück?
Nein. Ihre Farben sind in der Datenbank gespeichert, getrennt von den Dateien des Themes. Hier lesen Sie, wo sie liegen und wie Sie sie zurücksetzen.
Themes mit vielen Paletten
Wenn Sie gern mit Farben experimentieren, beginnen Sie mit einem Theme, das viele davon hat. Makani Pro hat neun Paletten, den Stil Ink und zwei Schriftsätze. Kanoa Pro hat 20 Paletten, von Arctic Frost bis Warm Sunset. Lei PRO ist standardmäßig dunkel und hat 11 weitere Paletten, von Warm Ivory bis Midnight. Mehr dunkle Designs finden Sie in 5 dunkle WordPress-Block-Themes für ein Portfolio. Und wenn Sie eine Palette für Ihre Marke möchten, richte ich sie für Sie ein.
