So erstellen Sie ein Farbsystem mit Divi 5

Zufällige Farbentscheidungen führen selten zu einem zusammenhängenden Design. Wenn Sie professionell Websites erstellen, benötigen Sie ein absichtliches System. Sie können ein echtes Farbsystem in Divi 5 mit Farbmanagement- und Designvariablen erstellen. Dies sind Farben, die Sie direkt in den visuellen Editor festlegen, in jedem Farbfeld zugreifen können und viele andere Annehmlichkeiten ausgestattet sind (die Sie Ihnen unten zeigen).

In diesem Beitrag wird angezeigt, wie Sie ein flexibles, skalierbares Farbsystem in Divi 5 einrichten.

Was ist ein Farbsystem?

Ein Farbsystem ist im Grunde eine vorgeplante Palette von Farben, die konstant auf Ihrer Website verwendet werden. Es hilft, alles absichtlich gestylt zu haben, anstatt zufällig zusammengeworfen zu werden. Für ein gutes System brauchen Sie normalerweise:

• Primärfarbe : Hauptmarkenfarbe.
• Sekundärfarbe : Unterstützt und kontrastiert mit dem Primär.
• Textfarbe : Klar und lesbar für Überschriften und Absätze.
• Akzent : Andere Farben für Warnungen, Mitteilungen und andere wichtige Dinge (optional).
• Hintergrundfarben : Typischerweise neutrale oder subtile Farbtöne.

Die Regel von 60-30-10 gilt für die Farbe im Webdesign. Im Allgemeinen würden neutrale Farben (wie Abschnitt Hintergründe und negativer Raum) für 60%des Designs, eine Primärfarbe für 30%und Sekundär-/Akzentfarben für die restlichen 10%verwendet.

So wählen Sie Website -Farben aus

Markenfarben und die auf Ihrer Website verwendeten Farben sind keine Entscheidungen, die leicht genommen werden können. Die Schaffung einer zielgerichteten Farbpalette hängt von den Fähigkeiten, der Farbpsychologie, der Branche und der Markendifferenzierung Ihres Designers ab. Sobald Sie jedoch Ihre Grundfarben und Markengüter (wie Logo -Variationen) haben, können Sie ein Designsystem erstellen.

Sie können ein paar schnelle Aufgaben erledigen, um sich auf Ihre Website -Erstellung vorzubereiten, wenn Sie über begrenzte Designressourcen verfügen. Erstens lesen Sie flüchtig von Farbpsychologie. Achten Sie darauf, welche Markenwerte Sie vermitteln möchten (Vertrauen, Jugendlichkeit, Innovation usw.) und versuchen Sie, Farben basierend auf diesen Werten abzustimmen. Schauen Sie sich dann einige Marken, die Sie für Ihre Markenwerte halten, einige Haushaltserkennungsmarken an. Welche Farben verwenden sie? Wie nutzen sie sie über ihre Website, Werbespots und soziale Beiträge?

Ihre Unternehmenswerte können sogar durch die Art der Arbeit bestimmt werden, die Sie erledigen. Schlosser und Klempner müssen zuverlässig sein, also ist Blau eine großartige Möglichkeit, dies zu vermitteln. Finanzplaner und Landschaftsgestalter handeln von Wachstum und Nachhaltigkeit (in ihren jeweiligen Bereichen), so dass grün dort ein guter Anker ist. Blumenbauern, Kinderbetreuungszentren und Restaurants können sich auf Rot- und Gelbtöne stützen, um Energie und Vitalität mit ihren Marken zu verbinden. Sobald Sie eine allgemeine Idee haben, verwenden Sie so etwas wie Coolors, um eine einfache Palette zu erstellen.

Erstellen Sie Ihr Farbsystem in Divi 5

Divi 5 ist mit dem Design -Variablenmanager geliefert, was der einfachste Weg ist, um globale Farben zu bewältigen. Darin haben Sie vier vorab zugewiesene globale Farben, mit denen Sie aus der Schachtel arbeiten können. Sie sind:

1. Grundfarbe
2. Sekundäre Farbe
3. Überschrift Textfarbe
4. Körpertextfarbe

Schritt 1: Definieren Sie Ihre Grundfarben als Variablen

Öffnen Sie in der linken Seitenleiste von Divi den Entwurfsvariablenmanager. Suchen Sie den Abschnitt Farben , und Sie sollten diese vier verschiedenen Standardeinstellungen sehen.

Diese vier Etiketten können nicht gelöscht werden, aber Sie können auswählen, welche Farbe jeweils festgelegt werden soll. Zusätzlich zu diesen vier können Sie so viele Farben hinzufügen, wie Sie möchten, indem Sie auf die Schaltfläche Global Color hinzufügen . Gehen Sie voran und geben Sie die Hex -Werte der Farben aus dem Farbgenerator ein.

Diese Variablen werden sofort überall in Divis visueller Bauherrin erhältlich, was super praktisch ist. Aber stellen Sie sicher, dass Sie sie retten!

Schritt 2: Erstellen Sie Farben und Farben mit HSL -Farben

Mit den HSL -Filtern von Divi können wir Tönungen (leichtere Versionen unserer Farben) und Farbtöne (dunklere Versionen unserer Farben) erstellen. Für dieses Projekt werden wir nur Variationen für die primären und sekundären Farben vornehmen. Sie können einen Farbpalettengenerator verwenden, um diese Farbvariationen zu erstellen.

Der erste Schritt hier ist, eine weitere globale Farbe zu erstellen. Anstatt jedoch einen Hex -Wert einzufügen, wählen Sie eine vorhandene Farbe aus, um Variationen (Farbtöne und Farbtöne) zu erstellen.

Jetzt müssen wir einen Filter auf diese Grundfarbe anwenden, um eine Variation zu erstellen. Klicken Sie auf den Farbchip und wählen Sie dann „Farbe filtern“ oder auf das Farbmarkt für Ihre neue relative Farbvariable.

Tun Sie dies für jede Ihrer Farbvariationen. Stellen Sie sicher, dass Sie Ihre Farbvariationen erkennbaren Namen geben und speichern.

Da die Primärfarbe beispielsweise ziemlich dunkel ist, können wir ein paar leichtere Farbtöne und ein paar dunklere Farbtöne hinzufügen. Das sollte mir viele Optionen geben, wenn wir mein Farbsystem auf ein Seitendesign anwenden.

Wiederholen Sie die obigen Schritte für Ihre sekundären und/oder Akzentfarben. Wählen Sie beim Erstellen dieser Variationen immer eine Grundfarbe aus und wenden Sie dann Filter darüber an. Auf diese Weise folgen diese Variationen, wenn Sie jemals Ihre Primärfarbe ändern.

Wenden Sie Ihre Farben in Designs mit Divi an

Ihre Variablen existieren jetzt. Zeit, sie zu benutzen. Wir beginnen mit einer leeren Divi -Seite und arbeiten nacheinander ein gut gestaltetes Layout.

Schritt 1. Erstellen Sie einen Drahtmodus Ihrer Seite

Sie können anstelle einer leeren Seite von einem Drahtrahmen aus starten, mit dem Sie Ihr Farbsystem besser verstehen können. Sobald Sie die allgemeine Struktur und den Fluss einer Seite verstanden haben, können Sie Ihre Designentscheidungen treffen. Sie können auch eines der vielen vorgefertigten Layout -Packs oder Starter -Sites von Divi verwenden. Es spielt keine Rolle, ob sie bereits Farben definiert haben. Wir können diese leicht ändern.

In diesem Beispiel haben wir uns für die Änderung des Beratungslayout -Pakets entschieden und das Homepage -Layout verwenden. Wenn Sie etwas Ähnliches tun, können Sie die Voreinstellungen importieren. Sie möchten jedoch die Farben in diesen Voreinstellungen bearbeiten. Um der Einfachheit willen werden wir die Stile direkt auf der Ebene der Modul/Element ändern.

Schritt 2. Typografie und Farbe

Standardmäßig verwendet Divi Ihre globalen Farben zur Überschrift und Ihren Körpertext, wodurch Ihr Text sauber und lesbar wird. Sie können diese vorgegebenen Farbauswahl jederzeit überschreiben, indem Sie die Textfarbe auf Modulen oder Voreinstellungen ändern, aber Sie sollten dies nicht zu oft tun müssen.

Beachten Sie, wie die Kopffarbe im Modul nicht festgelegt ist. Divi weist Ihnen automatisch die globale Farbe und den Körpertext zu. Natürlich können Sie es überschreiben, indem Sie eine andere Farbe auswählen.

Sie können die Farbe anpassen, die Links erleiden, um sie spürbarer zu machen und Klicks anzuziehen.

Möglicherweise gibt es andere Module (neben den Überschriften und Textmodulen) mit Text, die Sie stylen möchten. Module wie das Kontaktformular, das Countdown -Timer und das Blog -Modul erfordern möglicherweise, dass Farben einzigartig angewendet werden.

Schritt 3. Styling -Tasten

Die Tasten von Divi sind standardmäßig einfach und nehmen Ihre primäre Farbe an. Aber Sie werden nicht in diese Entscheidung gezwungen, wenn Sie etwas anderes wollen. Öffnen Sie das Einstellungsfeld des Moduls, navigieren Sie zur Registerkarte Entwurf und wählen Sie die Schaltfläche . Aktivieren Sie unter Schaltflächeneinstellungen "Benutzerdefinierte Stile für die Schaltfläche verwenden". Setzen Sie Ihren Hintergrund auf Ihre globale Farbe Ihrer Wahl und Ihren Schaltflächentext in eine lesbare Farbe wie Weiß.

Wenn Sie zwei Schaltflächen nebeneinander oder mehrere Schaltflächen auf der Seite haben, können Sie mit Ihrer sekundären Farbe oder einem anderen Akzent eine separate Taste für einen sekundären Schaltflächenstil erstellen.

Erstellen Sie schwebende Zustände mit Farbtönen und/oder Farbtönen

Schwebezustände verleihen Interaktion und Sinn für Zweck. Verwenden Sie Ihre früheren Farbtöne und Farbtöne mit den Schwebstilen. Es ist offensichtlich, auf Schaltflächen zu implementieren, kann aber auch anderswo subtil verwendet werden.

Klicken Sie auf das Cursor -Symbol neben der Option Hintergrundfarbe, um die Schwebezustände zu aktivieren. Stellen Sie Ihre schwebende Hintergrundfarbe ein. Wenn Benutzer über die Taste schweben, reagiert sie visuell und führt die Interaktion auf natürliche Weise.

Schritt 4. Erstellen von Abschnitten mit Farbvoreinstellungen und Gradienten

Abschnitte in Divi haben standardmäßig transparente Hintergründe. Dies bedeutet, dass sie normalerweise als weiß zeigen, wenn sie nicht festgelegt werden. Sie können einige Intrigen hinzufügen, indem Sie neutrale Farbvariationen basierend auf dem Farbton einer Ihrer Hauptfarben erstellen.

Diese Hintergrundfarbe ist nahe an Schwarz, teilt jedoch den gleichen Grundfarbton wie die primäre Farbe, um sie subtil zu dem Zusammenhalt des Themas zu verleihen.

Sie können auch mit Gradienten mit Ihren Farbvarianten experimentieren. Der Trick hier ist nicht, zu viele Farbenkombinationen zu verwenden. Sie möchten ein diszipliniertes, zusammenhängendes Design, das auf Farbpaarungen und Hierarchie basiert.

Eine Erinnerung ist an dieser Stelle in Ordnung. Sie möchten die meisten dieser Farbpaarungen und Entscheidungen in Voreinstellungen speichern (entweder Optionsgruppen- oder Elementvoreinstellungen). Sobald Sie Ihre Designvariablen in Ihrem Design über Voreinstellungen erstellt und implementiert haben, können Sie Ihr Designsystem verwenden, um nachfolgende Seiten viel schneller zu erstellen. Dies stellt auch sicher, dass Sie mit konsistenten Designmustern auf Ihrer Website arbeiten.

Und wenn Sie später feststellen, dass eine Farbe geringfügig ausgeschaltet ist, können Sie die HSL -Werte der Grundfarbe anpassen, und alle Instanzen dieser Farbe (und alle Farben, die basierend auf dieser Farbe basierend auf dieser Farbe erstellt werden) ändern sich für Sie.

Wickeln Sie Ihr Divi 5 -Farbsystem ein

Ein nachdenkliches Farbsystem ist eines der einfachsten Siege im Webdesign, und Divi 5 bietet Ihnen die Werkzeuge, damit es für Sie funktioniert. Mit nur ein paar Schritten können Sie:

• Definieren Sie Ihre Kernmarkenfarben als wiederverwendbare Designvariablen
• Erweitern Sie sie in nützliche Farbtöne und Farbtöne mit HSL -Filtern
• Wenden Sie sie konsequent auf Text, Schaltflächen, Formulare und Abschnitte an
• Speichern Sie Ihre Auswahl als Voreinstellung, damit jede neue Seite dieselben Regeln befolgt

Die Auszahlung ist größer als die Ästhetik. Ein solides Farbsystem schafft Klarheit, lenkt die Besucher auf Handlungen und lässt Ihre Marke in jeder Ecke Ihrer Website kohärent fühlen. Und weil alles in Divi variabel angetrieben ist, kann eine Einstellung an eine Basisfarbe sofort eine ganze Stelle durchlaufen. Das bedeutet weniger Basteln und mehr Selbstvertrauen, dass Ihr Design im Skalieren zusammenhält.