Eine Marke hat meist zwei, drei Farben, und die tauchen auf jeder Seite wieder auf: in Überschriften, Buttons, Linien, Hintergründen. Wer den Farbwert überall einzeln einträgt, sucht später bei jeder Anpassung alles zusammen. Globale Farben lösen das. Du legst eine Farbe einmal an, gibst ihr einen Namen und verknüpfst die Felder damit. Änderst du die Farbe, ändert sie sich überall.
In Divi 5 hat sich der Ort dafür verschoben. Globale Farben sind jetzt ein Teil der Variablen und liegen im Variablenmanager in der linken Leiste des Visual Builders, nicht mehr nur im Farbwähler. Ich zeige dir, wie du eine Farbe anlegst, einsetzt und später für die ganze Website änderst. Getestet mit Divi 5.13 (deutsche Oberfläche), Stand Oktober 2026. Beschriftungen stehen so da, wie Divi sie anzeigt, auch wenn manche holprig übersetzt sind.
Variablenmanager öffnen
Öffne eine Seite im Visual Builder. In der schmalen Leiste links ist das vierte Symbol von oben ein kleiner Datenbank-Zylinder. Fährst du mit der Maus darüber, steht dort „Variablenmanager“. Ein Klick öffnet ein Fenster namens „Variablen“. Darin liegen sieben Gruppen: „Farben“, „Schriftarten“, „Verläufe“, „Bilder“, „Links“, „Zahlen“ und „Text“.
Das vierte Symbol der linken Leiste öffnet den Variablenmanager.
Klapp „Farben“ auf. Divi bringt fünf Farben mit: „Primärfarbe“, „Sekundärfarbe“, „Überschriftentextfarbe“, „Fließtextfarbe“ und „Linkfarbe“. Primär-, Sekundär- und Linkfarbe sind bei dieser Installation hellblau (2EA3F2), Überschriftentext- und Fließtextfarbe grau (666666). Du kannst sie umbenennen oder umfärben, ich lege aber lieber eigene an und lasse die Standardfarben in Ruhe.
Eine eigene globale Farbe anlegen
- Klick unter der Farbliste auf „Globale Farbe Hinzufügen“. Es erscheint eine neue Zeile mit einem Namensfeld und dem Feld „Farbe Auswählen“.
- Tipp einen Namen ein, der sagt, wofür die Farbe steht, zum Beispiel „Markenblau“ statt „Blau 2“. Ich habe meine Testfarbe „G1a Markenblau“ genannt, so heißt sie auch auf den Bildern. Mit Tab springst du weiter.
- Trag den Hex-Wert ein, ich habe
1d4ed8 ohne Raute getippt, und bestätige mit Enter. Rechts daneben steht die Deckkraft, sie bleibt bei 100 %.
Die neue Farbe steht als sechste Zeile unter den Standardfarben.
Jetzt klickst du unten auf „Variablen Speichern“. Divi fragt nach: „Bist du sicher?“ Der Hinweis lautet, dass Änderungen an Variablen sich auf alle Instanzen der gesamten Website auswirken. Mit „Änderungen Übernehmen“ geht es weiter, „Weiter Bearbeiten“ bringt dich zurück.
Die Abfrage erscheint bei jedem Speichern von Variablen.
Stolperfalle: Das Fenster bleibt nach dem Übernehmen offen. Schließ es, indem du das Symbol in der Leiste noch einmal anklickst. Bei mir tauchte einmal eine zweite, identische Farbe auf, als der Manager beim anschließenden Speichern der Seite noch offen war. Schau nach dem Speichern kurz in die Liste, ob alles einfach da ist.
Die Farbe in einem Modul benutzen
Wähl ein Text-Modul über das Zahnrad in der kleinen Leiste, die beim Überfahren erscheint. Geh in den Reiter „Design“, öffne die Gruppe „Text“ und such das Feld „Text Textfarbe“.
Fahr mit der Maus über die Beschriftung des Feldes. Rechts erscheinen kleine Symbole: Info, Responsive, ein Datenbank-Symbol und drei Punkte. Das Datenbank-Symbol ist der Weg zu den Variablen. Es öffnet eine Liste mit dem Titel „Mein Globales Farben“, in der alle sechs Farben samt Hex-Wert stehen. Darunter liegen der Knopf „Globales Farben Verwalten“ sowie „Standard“ und „Benutzerdefiniertes Feld“.
Über das Datenbank-Symbol am Feld wählst du eine globale Farbe.
Klick auf deine Farbe. Im Feld steht jetzt ihr Name in einem kleinen Kasten statt eines Hex-Werts, und die Beschriftung bekommt einen blauen Punkt.
Das Feld zeigt den Namen der verknüpften Farbe.
Wiederhole das bei einem zweiten Modul. In meinem Test sind es zwei Text-Module in zwei Spalten, beide mit derselben Farbe.
Beide Texte nutzen die globale Farbe.
Farbe ändern, überall auf einmal
Das ist der Grund, warum du den Aufwand betreibst. Öffne den Variablenmanager wieder, klapp „Farben“ auf, ändere den Hex-Wert deiner Farbe, zum Beispiel auf be185d, und bestätige mit Enter. Dann wieder „Variablen Speichern“ und „Änderungen Übernehmen“. Beide Texte wechseln sofort die Farbe, ohne dass du ein Modul anfasst.
Nach der Änderung im Manager sind beide Texte rot.
Auf der Live-Seite habe ich nachgeprüft: Der Absatztext hatte die neue Farbe, also rgb(190, 24, 93). Es reicht also, den Wert an einer Stelle im Manager zu ändern.
Eine ganze Palette erzeugen lassen
Neben der Überschrift „Farben“ sitzt rechts ein kleines Paletten-Symbol, Tooltip „Farbpaletten-Variablen generieren“. Es öffnet den „Variablen-Generator“. Als „Variablentyp“ steht dort „Farbpalette“, und Divi erklärt: Er generiert eine Farbpalette aus einer Primärfarbe mithilfe relativer HSL-Filter.
Du gibst die „Primärfarbe“ ein, wählst den „Palettentyp“ (voreingestellt ist „Komplementär“) und stellst mit Reglern ein, wie viele Schattierungen, Tönungen und Tonwerte entstehen. Standard sind jeweils vier. Rechts zeigt eine Vorschau alle Ergebnisse mit ihren Namen: primary, secondary, primary-tint-1 bis 4, primary-shade-1 bis 4 und so weiter.
Der Generator macht aus einer Farbe eine ganze Palette.
Ich habe den Generator nur angesehen und nichts übernommen. Meine Einschätzung: Für eine einzelne Marke mit zwei, drei Farben brauchst du ihn nicht. Bei größeren Designsystemen mit Abstufungen ist er praktisch, weil die Töne zueinander passen.
Meine Empfehlung
- Benenn Farben nach ihrer Aufgabe oder nach der Marke, nicht nach dem Farbton.
- Lass die fünf Standardfarben unberührt oder pass sie bewusst an, sie steuern Divis Grundwerte.
- Leg die Farben an, bevor du Seiten baust. Nachträglich jedes Feld einzeln zu verknüpfen ist mühsam.
- Denk bei jeder Änderung daran: Sie gilt für die gesamte Website. Das ist der Zweck, aber auch das Risiko.
Noch kein Divi? Preise und Lizenzen findest du direkt bei Elegant Themes (Werbung).
