Vergleich der Farbpflücker von Divi 4 und Divi 5

Farbe gibt den Ton an, bevor ein einzelnes Wort gelesen wird, aber traditionelle Farbpflücker machen es schwierig, echte Markenkonsistenz zu erreichen. Anstelle von Präzision erhalten Sie oft Vermutungen und genauso genügend Annäherungen.

Deshalb hat Divi 5 sein Farbsystem vollständig neu interpretiert. In diesem Beitrag werden wir es direkt mit dem Farbwähler von Divi 4 vergleichen und zeigen, wie viel leistungsstärker und flexibler es ist.

Die Farbpflücker verglichen

Stellen Sie sie nebeneinander und Sie werden sofort sehen, wie leistungsfähig die neue Schnittstelle ist. Die Farbwählerin von Divi 4 hat uns mit seinem vertrauten Regenbogenspektrum und dem Ansatz von Drag-to-Select gut bedient.

Sie würden diesen weißen Kreis ziehen, um Farben zu wählen, mit Hex -Codes zu arbeiten und die Dinge durch die gespeicherten, globalen und jüngsten Registerkarten zu organisieren. Diese kleinen weißen Dreiecke auf Farbmustern sagten Ihnen, welche globalen Farben waren.

Jenseits des Aussehens hatte die Farbwählerin von Divi 4 ein großartiges Fundament. Das Magic Color Tool war ziemlich klug und zog aus Ihren Seitenfarben und den letzten Picks, um Paletten vorzuschlagen, die tatsächlich zusammengearbeitet haben. Dieser Beat beginnt jedes Mal von vorne.

Wo Divi 4 begrenzt wurde

Es war jedoch nicht alles perfekt. Alles verwendete nur Hex- oder RGBA -Codes. Eine leichtere Version Ihres Blaues zu erhalten, bedeutete, sie zu erraten oder eine andere App zu verwenden, um sie herauszufinden. Wenn Ihr Branding oft 20% dunklere oder 40% hellere Farben als die Hauptmarkenfarbe benötigt, konnte Divi 4 dies nicht für Sie tun.

Jede Farbe lebte von selbst. Sie konnten keine intelligenten Farbsysteme erstellen, bei denen Farben innerhalb von Divi selbst miteinander verbunden sind. Das Aufbau der richtigen Kontrastverhältnisse erforderte manuelle Arbeiten außerhalb von Divi.

Was sind Divis 5 visuelle Veränderungen

Divi 5 hält den visuellen Farbwähler, fügt aber präzise Schieberegler mit vielen weiteren Optionen hinzu (wir werden dies weiter diskutieren). Die globale Registerkarte hat sich zu einem dynamischen variablen Symbol entwickelt, das direkt mit dem variablen System von Divi verbunden ist, das Farben enthält.

Die Farbmuster selbst wurden schlauer; Sie zeigen Ihnen tatsächlich, mit welcher Art von Farbe Sie arbeiten und wie es sich mit Ihrem System verbindet.

Was Sie sehen, ist, dass Divi sich von der individuellen Farbauswahl zu einem Farbsystem bewegt. Divi 4 wurde für "Ich brauche dieses spezielle Blau" gebaut. Divi 5 wurde für "Ich brauche ein Blau, das 20% leichter als meine Primärfarbe ist und automatisch aktualisiert, wenn ich meine Markenfarben insgesamt ändere."

Die Schnittstelle musste sich ändern, weil sich das, was sie tut, geändert hat.

Divi 5s neuer Farbwähler

Unser Team hat das Farbsystem umgebaut, weil der alte Ansatz keine modernen Design -Workflows abwickeln konnte. Diese neue Picker dreht sich um Farbton, Sättigung und Leichtigkeit (HSL), relative Farbbeziehungen und eine tiefe Integration in das variable System von Divi 5.

Anstatt mit isolierten Hex -Codes zu arbeiten, können Sie jetzt verbundene Farbfamilien erstellen, bei denen das Ändern einer Farbe automatisch alle verwandten Variationen aktualisiert. Es gibt separate Schieberegler für Farbton, Sättigung, Leichtigkeit und Deckkraft, mit denen Sie genaue Anpassungen vornehmen können. Die Schnittstelle zeigt Ihnen genau, mit welcher Art von Farbe Sie durch visuelle Indikatoren arbeiten.

Farbmuster zeigen nun Informationen über sich selbst an. Sie können sehen, ob eine Farbe ein statischer Wert, eine Variable oder eine relative Farbe mit HSL -Modifikationen ist. Das System zeigt alle Farbdetails an, die Sie wissen müssen.

Wie das neue System tatsächlich funktioniert

Relative Farben beginnen mit einer Basisfarbvariablen und ermöglichen es Ihnen, Variationen anzuwenden. Wählen Sie Ihre primäre blaue Variable, verringern Sie die Leichtigkeit um 20%und speichern Sie sie als die Variable „Royal Deep Blue“.

HSL Color Picker gegen Divi 5 von Divi 5 von Divi 4 von Divi 4's Color Picker

Beide Systeme helfen Ihnen dabei, Farben auf Ihrer Website zu verwalten, aber ganz unterschiedlich zu arbeiten. Das Verständnis dieses Unterschieds erklärt, warum sich die Schnittstelle so dramatisch verändern musste und warum der neue Ansatz aufgebaut wird.

Wie die globalen Farben von Divi 4 funktionieren

Die Global Colors von Divi 4 funktionierten wie ein einfaches Palettensystem. Speichern Sie Ihre Marke einmal blau und klicken Sie dann darauf, wenn Sie genau diesen Farbton benötigen. Tauschen Sie dieses Blau später gegen einen anderen aus und schauen Sie sich alle Tasten, jeden Kopf- und Hintergrund -Update auf Ihrer gesamten Website an.

Die meisten Menschen haben auf diese Weise drei oder vier Hauptfarben der Marke eingerichtet. Es übertrifft die Jagd durch Hex -Codes oder versucht sich zu erinnern, ob Sie #2E86C1 oder #3498DB für Ihre Links verwendet haben.

Das Problem kam später, als Sie acht Global Colors hatten und sich nicht erinnern konnten, warum Sie diesen besonderen Graustatten gerettet haben. War es für Text? Grenzen? Hintergrundüberlagerungen? Globale Farben hatten keine Etiketten oder Beschreibungen, um Ihr Gedächtnis zu joggen.

Warum Divi 5 sich auf Designvariablen bewegte

Designvariablen verarbeiten jetzt mehr als nur Farben. Schriftarten, Abstandsnummern, Bilder und Textzeichenfolgen erhalten alle die gleiche Behandlung. Alles lebt in einem variablen Manager, anstatt um verschiedene Panels zu schweben.

Jede Variable erhält einen richtigen Namen und eine Beschreibung. Anstelle von "Global Color 3" können Sie es "Header Text Grey" oder "subtile Hintergrundüberlagerung" nennen. Sechs Monate später wissen Sie genau, wofür es ist.

Aber hier werden die Dinge interessant. Variablen können sich gegenseitig verweisen und Beziehungen formen. Stellen Sie Ihr primäres Grün als Fundament ein. Erstellen Sie ein „verbranntes Moos“, das dieses Grün nimmt und seine Helligkeit verringert. Bauen Sie dann einen „Schatten (verbrannten Moos)“, der diese verbrannte Moosfarbe bringt und die Deckkraft auf 15%fallen lässt.

Und natürlich aktualisieren alle drei Variationen automatisch, wenn Sie Ihr primäres Grün in Orange ändern. Die verbrannte Version bleibt weniger hell als die Farbe, die Sie auswählen, und der Schatten passt sich entsprechend an. Die Beziehungen kleben.

Der wichtigste Unterschied in der Praxis

Globale Farben bedeuteten, an mehreren Stellen die gleiche Farbe zu haben. Variablen bedeuten Farbbeziehungen, die sich zusammen anpassen. Schwebezustände bleiben mit Grundfarben verbunden. Schattenfarben beziehen sich auf Ihre Markenpalette, anstatt als zufällige Grautöne zu leben. Das System behält diese Verbindungen bei, ohne dass Sie zusätzliche Arbeit erledigen müssen.

Einrichten Ihres Farbsystems in Divi 4 gegen Divi 5 einrichten

Das Erstellen eines richtigen Farbsystems bestimmt, ob Ihre Website professionell aussieht oder wie ein Patchwork mit zufälligen Auswahlmöglichkeiten. Beide Divi -Versionen bieten Möglichkeiten, Ihre Farben zu organisieren, aber ihre Ansätze könnten nicht unterschiedlicher sein. Hier erfahren Sie, wie Sie Farbsysteme in jeder Version erstellen und warum der Prozess für Ihren Design -Workflow von Bedeutung ist:

Farben in Divi 4 einrichten

Ihre Farbauswahl formen, wie Besucher Ihre Website erleben. Schauen Sie sich den Ansatz zu Farbmanagement Divi 4 an:

1. Fügen Sie Ihre Global Colors hinzu

Das Farbaufbau von Divi 4 stützte sich auf das globale Farbsystem und die manuelle Organisation. Sie würden zunächst zu den Farboptionen eines Elements navigieren, dann Global Colors erstellen, indem Sie zur Registerkarte „Global“ navigieren, auf das Plus -Symbol neben dem Farbwähler klicken oder eine vorhandene globale Farbe bearbeiten, indem sie darauf klickt. Mit der Schnittstelle können Sie HEX -Codes direkt eingeben oder den Visual Picker verwenden, um Farben auszuwählen.

Haben Sie bereits eine Farbe angewendet, die Sie konvertieren möchten? Klicken Sie mit der rechten Maustaste darauf und wählen Sie "zu Global Convert". Dies fügt genau diese Farbe Ihrer globalen Palette hinzu und wechselt das Modul, um die globale Version zu verwenden. Es ist super hilfreich, wenn Sie feststellen, dass Sie von Anfang an etwas Globales gemacht haben sollten.

Zauber Farbvorschläge

Die Magic Color -Funktion von Divi 4 baut koordinierte Paletten aus Ihren vorhandenen Designentscheidungen auf. Anstatt zu erraten, welche Farben zusammenarbeiten, entsteht dieses Tool Vorschläge, basierend auf dem, was Sie bereits verwendet haben.

Suchen Sie nach den drei Punkten (Ellipsen) unter dem Augenedropper Ihrer aktiven Farbe. Klicken Sie auf diese Punkte, um eine Reihe von Farbpaletten -Vorschlägen zu erhalten. Divi befasst sich mit den Farben, die Sie bereits auf Ihrer Seite und in den letzten Projekten verwendet haben, und zeigt Ihnen Kombinationen, die zusammenarbeiten sollten.

2. Anwenden Sie Ihre Global Colors an

Die Verwendung von ihnen ist ziemlich unkompliziert, sobald Sie einige globale Farben eingerichtet haben. Klicken Sie in ein beliebiges Modul, in dem Sie eine Farbe anwenden möchten. Gehen Sie dann zur Registerkarte "Design" und finden Sie die Farbeinstellung, die Sie ändern möchten.

Klicken Sie auf Global, um Ihre globale Farbpalette zu sehen. Klicken Sie auf ein globales Farbmarkt und gilt sofort für Ihr Modul.

3.. Ändern Sie Ihre globalen Farben

Hier werden die Dinge interessant. Wenn Sie eine globale Farbe ändern möchten, müssen Sie nicht jedes Modul durchsuchen, das sie verwendet. Gehen Sie einfach zu jeder Farbeinstellung, klicken Sie auf die Registerkarte Global und suchen Sie die Farbe, die Sie bearbeiten möchten.

Richten Sie Ihre Farben in Divi 5 ein

Das Aufbau eines richtigen Farbsystems in Divi 5 erfordert vier Schritte. Nach diesem Ansatz überträgt die alte Methode, Farbcodes zu erraten, wenn Sie einen etwas anderen Farbton benötigen:

1. Erstellen Sie Ihre Basisfarbvariable

Öffnen Sie den Designvariablenmanager und fügen Sie Ihre primären Markenfarben als vorhandene primäre und sekundäre Farbvariablen hinzu. Sie können auch weitere Farben hinzufügen, wie z. B. Tertiär- oder Akzentfarben. Diese werden zu Ihren Fundamentfarben. Ihre Grundfarben sollten Ihre Hauptmarkenpalette darstellen, die Ihre visuelle Identität definiert.

2. Erstellen Sie relative Farben von Ihrer Basis aus

Jetzt können Sie Farbvariationen erstellen, die mit Ihren Grundfarben verknüpft sind. Fügen Sie eine neue Farbe im Designvariablenmanager hinzu und wählen Sie Ihre Grundfarbe.

Verwenden Sie die HSL -Schieberegler, um sie anzupassen: niedrigere Helligkeit um 25% für den Kopftxt, 20% für den Körpertext; Erhöhen Sie die Leichtigkeit um 20% für Schweberzustände oder ändern Sie die Sättigung für gedämpfte Hintergründe. Geben Sie diesen Variationen klare Namen wie „Deep Orange“ und „Bright Crimson“ oder „Schwebezustand (Primärfarbe)“, „gedämpfter Hintergrund (sekundäre Farbe)“.

Alle Designvariablen können gestapelt werden, sodass Sie mehr Farben aus Ihren geschaffenen erstellen können. Sie alle bleiben mit dem System verbunden.

Wenn Sie später Ihre Grundfarbe ändern, aktualisieren diese zugehörigen Farben automatisch und halten die Beziehungen intakt.

3. Anwenden Sie Variablen auf Ihre Elemente

Verwenden Sie das dynamische Inhaltsymbol in jedem Farbfeld, um auf Ihre Variablen zuzugreifen. Die Schnittstelle zeigt, ob jede Farbe statisch, eine Variable oder eine relative Farbe mit HSL -Modifikationen ist.

Wählen Sie aus Ihrem organisierten Farbsystem, anstatt zufällige einmalige Farben zu erstellen, die die Konsistenz brechen.

Wenn Sie die Eigenschaften einer Ihrer Basis oder konstruierten Farben ändern, passt sich alles, was von diesen geerbt wurde, automatisch an die neuen Änderungen an. Es ist nicht erforderlich, Farben manuell zu schrubben und zu ersetzen, wenn Sie sich für eine Marken -Aktualisierung entscheiden.

4. Erstellen von Voreinstellungen, die auf HSL -Farbvariablen verweisen

Erstellen Sie Ihre Strategie mithilfe der Option Group Presets für bestimmte Designteile. Diese Voreinstellungen unterscheiden sich von Elementvoreinstellungen. Option Group Presets Zielstilgruppen wie Hintergrund-, Rand- oder Textfarben mit Ihren Variablen.

Speichern Sie einen Schatten als Optionsgruppe Preset mit einer Schattenfarbenvariable basierend auf Ihrer primären Farbe.

Verwenden Sie dieses Voreingang auf Spalten, Abschnitten, Zeilen und Modulen.

Erstellen Sie separate Optionsgruppenvoreinstellungen für verschiedene Farben: eines für Grenzen mit Ihrer Akzentfarbe, ein anderer für Text mit Ihrer sekundären Farbe usw. Mischen Sie diese Voreinstellungen über Elemente hinweg, ohne andere Stile zu ändern.

Elementvoreinstellungen speichern vollständige Modul -Setups, einschließlich Inhalte und aller Stile. Erstellen eines Elements Voreinstellung für einen gestalteten Knopfschleusen in den verwendeten Optionengruppenvoreinstellungen und Farbvariablen. Wenn Sie es sofort anwenden, erhalten Sie genau die gleiche Taste.

5. Farben auf Ihrer Website ausrollen

Die Feature von Extend Attributen wird weiterhin weiter übernommen, indem Sie die Entwurfseigenschaften zwischen Elementen kopieren können. Wenn Sie das Farbschema eines Symbols mithilfe Ihrer Variablen perfektioniert haben, können Sie diese Attribute auf andere Symbole auf Ihrer Zeile, Ihrer Seite oder Ihrer gesamten Website erweitern.

Dies behält Ihre Farbbeziehungen bei und verbreitet gleichzeitig das konsistente Styling ohne manuelle Arbeit.

Das Finden und Ersetzen von Divi 5 beschleunigt den Konvertierungsprozess für vorhandene Standorte mit verstreuten statischen Farben. Klicken Sie mit der rechten Maustaste auf jedes Farbfeld und wählen Sie "Finden und Ersetzen".

Legen Sie Ihren Geltungsbereich auf bestimmte Elemente, ganze Abschnitte oder die gesamte Seite fest. Unter „Ersetzen mit“ wählen Sie Ihre neue Variable auf der Registerkarte Global. Überprüfen Sie "Alle gefundenen Werte ersetzen", um jede Instanz dieser Farbe mit Ihrer Variablen auszutauschen.

Dies funktioniert perfekt bei der Migration älterer Designs in das neue Farbsystem. Sie können Dutzende ähnlicher, aber nicht identischer Orangen in Sekunden durch eine konsistente Variable ersetzen.

Alle Aspekte arbeiten zusammen: Stellen Sie Ihre Farbvariablen fest, verwenden Sie Find und Ersetzen, um vorhandene Inkonsistenzen zu säubern, und verwenden Sie dann Erweiterungsattribute, um die Designstandards bei der Erstellung neuer Abschnitte aufrechtzuerhalten. Erstellen Sie dann normalerweise Seiten, da die Stile einfach mithilfe der Optionsgruppen- und Elementvoreinstellungen angewendet werden können.

Der neue Farbwähler passt zu Ihrem Workflow

Das Farbsystem von Divi 5 behebt die Workflow -Probleme, die Projekte seit Jahren verlangsamt haben. Sie müssen keine externen Werkzeuge mehr verwenden, um den richtigen Farbton zu finden. HSL -Schieberegler geben Ihnen eine genaue Kontrolle, ohne den Bauunternehmer zu verlassen.

Ihre Farbentscheidungen bleiben durch Designvariablen verbunden. Wenn Sie Ihre primäre Markenfarbe ändern, aktualisieren die verwandten Farben automatisch aktualisiert, während Sie ihre Beziehungen aufbewahren. Dies schlägt manuell auf jede blaue Variation, die Sie durch das Auge geschaffen haben.

Probieren Sie noch heute das neue Farbsystem in Divi 5 aus!