Verwandeln Sie die Markenfarben Ihres Kunden in ein Divi 5 -Farbsystem

Markenfarben beginnen normalerweise mit den HEX -Codes, die auf Überschriften, Schaltflächen und Hintergründe angewendet werden. Es ist anfangs einfach genug, aber wenn das Layout wächst, benötigen Sie oft leichtere Farbvariationen, Schwebezustände oder komplementäre Akzente. Das manuelles Management kann chaotisch werden.

Das neue Farbsystem in Divi 5 erleichtert dies, indem Sie einmal eine Palette definieren und verbundene Farbtöne aus Ihrer anfänglichen Farbpalette bauen. Jede Farbe bleibt synchron, auch wenn sich das Design entwickelt. In diesem Leitfaden lernen Sie, wie Sie ein flexibles, skalierbares Farbsystem erstellen, das alles auf der Website Ihres Kunden konsistent hält.

Das Farbsystem von Divi 5 verstehen

Wenn Sie mit Global Colors in Divi 4 gearbeitet haben, wissen Sie bereits, wie nützlich es ist, eine Farbe einmal zu definieren und auf Ihre Website anzuwenden. Divi 5 baut auf derselben Idee auf, aber diesmal verwandelt es Farbe in ein vollständiges System, das mit Ihnen skaliert wird.

Abonnieren Sie unseren YouTube -Kanal

Hier sind die drei Hauptaufrüstungen:

Es beginnt mit Designvariablen. Sie definieren Ihre Markenpalette in der Registerkarte "Farben" im Variablen -Manager, und diese Werte werden zu Ihrer Grundlage. Nach der Definition sind sie in jedem Modul oder Abschnitt bereit. Und wenn sich die Marke auf der ganzen Linie entwickelt, müssen Sie die Variablen nur an einem Ort aktualisieren. Alles, was mit ihnen verbunden ist, passt sich selbst an.

Das zweite Upgrade ist der HSL -Farbfilter. Mit den Schiebereglern können Sie Farbton, Sättigung und Leichtigkeit einstellen und Ihnen mehr Kontrolle geben, wenn Sie mit Ton und Kontrast arbeiten.

Wenn sich Ihr primäres Grün für einen Hintergrund zu hart anfühlt, können Sie es leicht erweichen, die Helligkeit anpassen und diese Version als ihre Variable speichern. Dies wird eine brandneue Farbe sein, aber sie ist immer noch mit der ursprünglichen Farbe verbunden.

Dies eröffnet auch Raum, um in Beziehungen zu denken, anstatt in isolierten Werten zu denken. Sie können Variablen miteinander verbinden, damit man immer einen bestimmten Abstand von einem anderen bleibt, wie z. B. dunkler, leichter, leicht wärmer oder gedämpfter. Diese werden als relative Farben bezeichnet, was die dritte Verbesserung darstellt.

Beispielsweise kann eine Schwebefarbe als 20% dunkler als die primäre definiert werden. Wenn sich die Primärfarbe ändert, hält der Schwebstatus seine Beziehung, ohne manuelle Anpassungen zu benötigen.

Dieses dreiteilige System erstellt ein flexibles und geerdetes Arbeitsfarbsystem. Sie verwenden nicht nur Farben ein Modul gleichzeitig. Sie bauen eine Palette, die sich nach Bedarf verschieben kann und gleichzeitig Ihr Design konsequent und sauber hält.

Erfahren Sie alles über Divis neues Farbsystem

Wenn Sie sich bisher auf Hex -Codes verlassen haben, ist dies der Punkt, an dem sich dieser Workflow begrenzt anfühlt. Und das ist Ihr Stichwort, um sich auf ein zukünftiges Farbsystem zu verschieben.

Verwandeln Sie die Markenfarben Ihres Kunden in ein Divi 5 -Farbsystem

Nachdem Sie wissen, wie das Farbsystem von Divi 5 funktioniert, gehen wir durch, wie es in einem echten Projekt aussieht. In diesem Beispiel haben wir das Augmented Reality -Homepage -Layout aus der Divi -Bibliothek importiert.

Lassen Sie uns ein Szenario erstellen. Angenommen, ein Kunde möchte eine ergänzende Farbe hinzufügen, um das fettgedruckte Grün auszugleichen, das auf dem gesamten Standort verwendet wird. Anstatt es an einigen Stellen manuell hinzuzufügen, nutzen wir dies als Chance, das Layout auf das Farbsystem von Divi 5 zu verlagern, damit wir in Zukunft keine manuellen Änderungen vornehmen müssen, wenn wir erneut gefragt werden.

Wenn Sie das Layout durchsehen, werden Sie feststellen, dass das gleiche Grün an mehreren Stellen erscheint, z. B. Überschriften, Tasten und Akzentelemente. Jeder verwendet einen festen Hex -Code. Unser Ziel ist es, diejenigen mit Farbvariablen zu ersetzen und eine Palette zu erstellen, die sich später an Änderungen anpassen kann.

Normalerweise würde das Aktualisieren eines solchen Layouts bedeuten, jedes Modul von Hand zu bearbeiten. In den nächsten Schritten verwenden wir jedoch Farbvariablen, HSL -Filter und angeschlossene Farblogik, um etwas Stabileres zu erstellen. Sie können dem gleichen Layout folgen oder Ihr Projekt als Basis verwenden.

1. Speichern Sie die primäre Farbe Ihres Kunden als Designvariable

Wenn Ihr Kunde einen neuen Hex -Code geteilt hat oder Sie an einer vorhandenen Markenfarbe festhalten, besteht der erste Schritt darin, ihn dem Entwurfsvariablenmanager hinzuzufügen. Dies wird zu Ihrer Grundfarbe und ist die Grundlage für die Farbvariationen, die Sie darum bauen.

Hinzufügen einer Primärfarbe

Öffnen Sie zunächst den Variablenmanager und wechseln Sie zur Registerkarte "Farben" .

Das Panel kann bereits Standardwerte für Primär-, Sekundär-, Überschrift- und Körpertext enthalten. Geben Sie im Primärfarbenfeld den Hex -Code für die Hauptmarkenfarbe ein und klicken Sie auf Variablen speichern.

Hinzufügen einer sekundären Farbe

Als nächstes erstellen wir eine relative Version dieser sekundären Farbe mit der Primär als Basis. Auf diese Weise werden zukünftige Änderungen der Grundfarbe automatisch übertragen.

Da wir in diesem Beispiel eine ergänzende Farbe hinzufügen, um das vorhandene Grün auszugleichen, werden wir dies als sekundäre Farbe zuweisen. Der Hintergrund des Layouts ist schwarz, so dass diese Paarung deutlich auffällt.

Wenn Sie vorerst nur mit einer Farbe arbeiten, können Sie den Sekundärschlitz auf schwarz einstellen.

Klicken Sie auf das sekundäre Farbmuster, um das Farbfenster zu öffnen. Alle Ihre gespeicherten Werte werden unter globalen Farben aufgeführt, wobei die primäre Farbe zuerst aufgeführt ist.

Wählen Sie es aus. Dies bringt die Grundfarbe als Ausgangspunkt ein.

Klicken Sie nun erneut auf das Swatch, um das Fenster wieder zu öffnen, und öffnen Sie dann den Dropdown -Bereich der Farbfilter . Dies zeigt die HSL -Schieberegler, wo Sie Farbton, Sättigung und Leichtigkeit einstellen können.

Verwenden Sie diese Schieberegler, um die neue Farbe zu formen. Sobald Sie damit zufrieden sind, sparen Sie. Und einfach so haben Sie eine sekundäre Farbe mit der Primäranlage verbunden.

Wenn Sie die sekundäre Farbe schwarz halten möchten, sie aber trotzdem mit der Primäranlage verbinden möchten, wenden Sie sich sowohl die Leichtigkeit als auch die Sättigungsschieberegler bis zu -100.

Um stattdessen einen dunkleren Farbton zu erzeugen, lassen Sie den Farbton und die Sättigung als IS und reduzieren Sie nur die Leichtigkeit.

Zu diesem Zeitpunkt können Sie frei experimentieren. Passen Sie die Werte an, bis sich der Ton für Ihr Design richtig anfühlt. Egal, ob sich die neue Farbe sanft mit der Marke Palette einfügt oder als Kontrast heraussticht, sie bleibt mit der Primäranlage verbunden und entwickelt sich damit weiter.

2. Erstellen Sie unterstützende Farben mit HSL -Anpassungen

Mit Ihren primären und sekundären Farben besteht der nächste Schritt darin, die Palette zu erweitern. Diese unterstützenden Farben geben Ihrem Designraum zum Atmen. Sie bieten Flexibilität, subtile Kontrast und visuellen Rhythmus während des gesamten Layouts.

Öffnen Sie, um diese Variationen zu erstellen, das HSL -Panel und passen Sie die Schieberegler an:

• Erstellen Sie leichtere Farbtöne für Abschnitte oder Hintergründe, die Kontrast benötigen, ohne Aufmerksamkeit zu erregen.
• Verwenden Sie leicht dunklere Töne für Tasten, Schwebezustände oder fette Schlagzeilen, die sich abheben müssen.
• Verschieben Sie den Farbton oder die Sättigung leicht, um Akzentfarben zu bilden. Diese Farbe eignet sich hervorragend für Trenner, Ikonen oder andere kleine visuelle Highlights.

Wir zeigen Ihnen, wie man es einmal macht, und Sie können den gleichen Ansatz befolgen, um alle gewünschten neuen Farben zu definieren. Nehmen wir an, wir möchten eine Schwebeversion der sekundären Farbe erstellen. Wir erstellen eine neue Farbvariable , geben ihr einen klaren Namen, passen Sie die Schieberegler an, um den Ton richtig zu machen, und speichern Sie ihn.

Nachdem die Variable gespeichert ist, können wir sie wie jede andere Farbe auf den Schwebstatus einer Knopf anwenden.

Wenn Sie unterstützende Farben hinzufügen, versuchen Sie, sie als tonale Ausdrücke der Marke zu betrachten, Variationen, die unterschiedliche Schwerpunkte, Kontrast oder Stimmung widerspiegeln. Zum Beispiel eignen sich weiche Töne gut für Hintergründe, mutige Aufmerksamkeit auf die Handlungsanforderungen lenken für Overlays oder Sekundärtext nützlich.

Sie können alle diese manuell mit Hex -Codes technisch manuell erstellen. Und wenn Sie nur eine einseitige Website bauen, kann dies in Ordnung sein. In dem Moment, in dem Ihr Kunde eine Kernfarbe ändern möchte, zeigt jede Abkürzung seine Grenzen. Was wir meinen, ist, dass Sie nicht verfolgen würden, wie viele Orte Sie auf einer Website einen Hintergrundschatten verwendet haben. In diesem Szenario dauert das Erstellen dieser Variationen als vernetzte Variablen im Voraus etwas mehr Zeit, aber sobald sie vorhanden sind, halten sie Ihr Design konsistent, egal wie oft sich die Dinge ändern.

3. Ersetzen Sie vorhandene statische Farben durch Variablen

Wenn Ihre neuen Farbvariablen gespeichert sind, ist es an der Zeit, die im gesamten Layout verwendeten hartcodierten Hex -Werte zu ersetzen. Hier beginnt der Wechsel von statischer zur Dynamik einen wirklichen Unterschied, nicht nur in Konsistenz, sondern auch, wie einfach es ist, das Design im Laufe der Zeit aufrechtzuerhalten.

Beginnen Sie mit dem Scannen des Layouts nach Elementen, die noch feste Farbwerte verwenden. Dies kann Schaltflächen, Überschriften, Hintergründe, Symbole oder Abschnittsteiler umfassen. Überall, wo die Markenfarbe manuell angewendet wurde, ist jetzt eine Gelegenheit, sie mit Ihrem neuen System zu verbinden.

Dazu gibt Divi Ihnen zwei Optionen: Erweitern Sie Attribute und suchen und ersetzen. Mit beiden können Sie mehrere Elemente schnell aktualisieren, aber jeder scheint in einer etwas anderen Situation.

• Verwenden Sie Extend -Attribute, wenn Sie bereits die richtige Variable auf ein Element angewendet haben und den Rest übereinstimmen möchten.
• Verwenden Sie Find und Ersatz, wenn Sie einen bestimmten Hex -Wert tauschen möchten, wo immer er erscheint, auch wenn er auf verschiedene Elemente angewendet wird.

Beginnen wir mit Erweiterungsattributen.

Verwenden von Erweiterungsattributen

In diesem Beispiel möchten wir alle H2S im Layout die neue sekundäre Farbe zuweisen. Wir werden es zunächst nur auf einen von ihnen anwenden.

Sobald dies erledigt ist, klicken wir mit der rechten Maustaste auf das Element und wählen Erweiterungsattribute. In dem angezeigten Feld setzen wir den Umfang auf die gesamte Seite und den Elementtyp auf Text.

Mit einem Klick nimmt jede H2 auf der Seite die gleiche sekundäre Farbe an, die synchronisiert bleibt, da sie an Ihre Primärfarbe gebunden ist, wenn sich diese Grundfarbe jemals ändert.

Verwenden von Find und Ersetzen

Versuchen wir nun versuchen wir zu finden und zu ersetzen, was besonders gut funktioniert, wenn Sie einen bestimmten Farbwert über die Website austauschen möchten.

In diesem Fall möchten wir die Karosserie -Textfarbe aktualisieren. Dazu wechseln wir zu Einstellungen> Design> Körpertextfarbe , klicken Sie mit der rechten Maustaste und wählen Sie Find & Ersatz. Dann schweben wir über das Feld Ersetzen Sie das Wert ersetzen und wählen unsere neue Variable aus.

Das ist alles, was es braucht. Jede Instanz dieser alten Farbe wird jetzt mit Ihrer neuen Variablen aktualisiert.

Es gibt keine einzige Methode, die Sie hier folgen müssen. Erweiterungsattribute sind die schnellere Möglichkeit, diese Änderung über ähnliche Elemente hinweg zu führen, wenn Sie bereits ein Modul manuell aktualisiert haben. Wenn Sie immer noch mit statischen Hex -Codes arbeiten und sie in loser Schüttung ändern möchten, können Sie sich schnell bewegen.

Wählen Sie den Ansatz aus, den die Reinigung erleichtert. Sobald dies erledigt ist, werden Sie den wirklichen Vorteil dieses Systems sehen: Wie Ihr Design reagiert, wenn Sie nur eine Farbe ändern.

Testen Sie Ihr neues Farbschema

Alles, was Sie getan haben, war mit der Einrichtung. Jetzt, wenn das gesamte Setup seinen Wert zeigt.

Versuchen Sie mit Ihrem System, die Primärfarbe zu ändern. Das gesamte Layout wird in Sekunden lang reagiert - Hintergründe, Schaltflächen, Schwebeffekte und andere angeschlossene Elemente werden sofort aktualisiert.

Zukünftige Updates sind auch einfacher als je zuvor. Angenommen, Ihr Kunde möchte von Neongrün auf ein wärmeres Gelb wechseln, was bedeutet, die gesamte Website, jede Seite und jedes Modul manuell zu aktualisieren.

Klingt schmerzhaft, aber nicht für Sie. Sie aktualisieren einfach die primäre Farbe, und der Rest der Website folgt.

Oder vielleicht ist es schwarzer Freitag und sie haben um ein rotgoldschwarzes Farbschema gebeten. Sie aktualisieren die Primärstärke in einem Goldton und optimieren die Sekundarstufe in ein tieferes Rot. Das Layout passt sich sofort an das letzte Detail an.

In einigen Fällen kann die Markenfarbe gleich bleiben, aber die Sekundäranlage braucht eine Aktualisierung. Das ist nur eine Frage der Anpassung der HSL -Schieberegler. Sie müssen nicht jede Taste oder den Hintergrund einzeln berühren.

Bei so viel Farbarbeit geht es darum, das Gleichgewicht aufrechtzuerhalten. Sie halten die Variationen auch dann ausgerichtet, wenn sich die Kernfarbe ändert. Dieses System bietet Ihnen eine Möglichkeit, den Ton, den Kontrast und die Betonung Ihres Designs zu kontrollieren, ohne Ihre Schritte zurückzuverfolgen.

Und denken Sie daran, was wir hier getan haben, ist nur eine Seite. Da Designvariablen global sind, erstreckt sich dieses Setup auf Ihre gesamte Website, einschließlich Header, Fußzeilen, Blog -Posts, Landing Pages und allem anderen, was mit Ihrer Palette verbunden ist.

Das bedeutet, dass jedes zukünftige Update, egal ob eine saisonale Kampagne, eine Markenauffrischung oder eine neue Farbrichtung, von einem einzigen Ort startet. Sie aktualisieren einige Variablen und sehen, wie alles zu Ihrem neuen Farbschema passt.

Divi macht Ihren Farb-Workflow zukunftssicher

Es ist nicht schwer, einen Blauschatten zu wählen. Was schwierig ist, ist, dass das Blau über Dutzende von Modulen, Layouts, Seiten und Kampagnen konsistent ist und später aktualisiert wird, ohne etwas zu brechen.

Divi 5 vereinfacht das komplett. Mit Tools wie dem neuen Farbsystem, HSL -Filtern und Designvariablen können Sie Ihre gesamte visuelle Identität von einem Ort von einem Ort aus verwalten. Zu wissen, dass jede Farbe in jedem Layout konsequent und leicht zu aktualisieren bleibt, ist das, was Divi 5 verspricht.

Und das ist nur einer von vielen, die wir in den letzten Monaten gemacht haben, einschließlich Loop Builder, Flexbox -Layout und einer vollständig neu gestalteten Schnittstelle für moderne Webdesigner. Wenn Sie sie noch nicht erkundet haben, ist jetzt die perfekte Zeit.