So wenden Sie Farbpaletten auf Ihre Divi-Website an

Es gibt nur wenige Dinge im Internet, die schlimmer sind als eine langweilige Website. Sicher, einige Websites setzen absichtlich auf den brutalistischen oder minimalistischen Look (wenn man sich Craigslist ansieht), aber selbst diese sind nicht langweilig . Eine feste Farbpalette zu haben , ist eine todsichere Methode , Ihre Website abheben von den beigeen Massen, jene uninspiriert monochromatische E - Shops , dass de Presse mehr als im Presse zu machen. Zum Glück hat Divi Sie mit einer Kombination aus unserem Magic Color-System und der Global Colors-Funktion abgedeckt. Sie können ganz einfach Farbpaletten auf Ihre Divi-Website anwenden. Die Ergebnisse werden Ihre Besucher beeindrucken.

Allgemeine Tipps zu Farbpaletten

Unabhängig davon, wie einfach es ist, Ihrer Divi-Website eine Farbpalette hinzuzufügen, ist es unerlässlich, dass Sie die richtige Farbpalette für Ihre Branche und Marke verwenden. Wenn Sie bereits Markenfarben haben, sind diese die naheliegende Wahl. Abgesehen davon, dass Sie tief in die Farbtheorie einsteigen (was übrigens sehr interessant ist), haben wir ein paar Tipps, die Ihnen helfen können, herauszufinden, wo Sie mit Ihren anfangen sollen neue Farbpalette.

1. Entscheiden Sie sich für eine dunkle oder helle Website

In der Farbpalette, die Sie verwenden werden, werden Sie zweifellos helle und dunkle Farben haben. Kontrast ist in einer Farbpalette obligatorisch, damit der geschriebene Inhalt nicht verloren geht.

Das führt uns sofort zu der ersten Frage, die Sie sich stellen müssen, wenn Sie eine Farbpalette auf Ihre Website anwenden möchten. Möchten Sie eine dunkle oder helle Website erstellen? Nur weil Sie sich für eine entscheiden, heißt das nicht, dass Sie sie nicht kombinieren können, aber eine Auswahl hilft Ihnen, Ihre Farbpalette leichter auszuwählen.

2. Farbauswahl

Theoretisch können Sie selbst bestimmen, wie viele Farben Ihre Farbpalette haben soll. Es gibt keine Standardmethode zum Anwenden oder Bestimmen von Farbpaletten. Um jedoch mit Divi eine schöne Farbbalance zu erzielen, empfehlen wir die Verwendung von fünf Farben.

Um Ihnen zu helfen, die Farbpaletten mit fünf Farben auf Ihre Website anzuwenden, haben wir uns für eine Methode entschieden, die wir bei der Präsentation der verschiedenen Farbpaletten konsequent auf dasselbe Layout anwenden. Aber bevor wir uns damit befassen, werfen wir einen Blick auf die verschiedenen Arten von Farben, die Sie in Ihrer Farbpalette haben müssen, wenn Sie unserer Methode folgen möchten.

Hintergrundfarben

Stellen Sie sicher, dass die von Ihnen gewählten Hintergrundfarben zueinander passen. Sie werden diese Hintergrundfarben nahe beieinander verwenden und schöne Ergebnisse erzielen. sie müssen eine gewisse Harmonie haben.

Schriftfarbe

Als nächstes müssen Sie die Schriftfarbe auswählen. Die Schriftfarbe hängt logischerweise von den gewählten Hintergrundfarben ab. Wenn Sie helle Hintergrundfarben gewählt haben, stellen Sie sicher, dass Ihre Schriftfarbe dunkel ist und umgekehrt.

Hyperlink- und CTA-Farbe

Die von Ihnen gewählte Hyperlink-Farbe ist eine der Farben, die Ihre Website zum Leben erwecken. Stellen Sie sicher, dass sich diese Farbe von den anderen Farben in Ihrer Palette abhebt, da Sie sie für die Calls-to-Action auf Ihrer Website verwenden.

Farbe für den letzten Schliff

Zu guter Letzt können Sie eine andere Standardfarbe auswählen, die Ihrer Website Farbe verleiht. Obwohl diese Farbe nicht so wichtig ist wie die Hyperlink-Farbe, hilft sie Ihnen, die Farbbalance auf Ihrer Website zu vervollständigen.

3. Stellen Sie sicher, dass genügend Kontrast vorhanden ist

Wie bereits erwähnt, ist es wichtig, einen Kontrast zwischen einigen Farben in Ihrer Farbpalette zu schaffen. Wenn Sie eine Farbpalette für eine Website verwenden, hilft Ihnen dieser Kontrast in erster Linie dabei, den geschriebenen Inhalt, den Sie teilen, lesbar zu machen. Denn wenn Ihre Inhalte nicht einfach zu lesen sind, wozu dienen sie dann?

4. Finden Sie die richtige Farbbalance

Es gibt verschiedene Möglichkeiten, um festzulegen, wie oft Sie eine bestimmte Farbe in Ihrer Farbpalette verwenden möchten. Eine gute Farbbalance ist notwendig, wenn Sie nicht möchten, dass sie sich von den Farben, die Sie auf Ihrer Website verwenden, überfordert fühlen.

Stellen Sie sicher, dass Sie die meiste Zeit die neutraleren Farben in Ihrer Farbpalette verwenden, und verwenden Sie die anderen Farben, um den von Ihnen bereitgestellten Inhalt hervorzuheben.

So fügen Sie Ihrer Divi-Website eine Farbpalette hinzu

Vor diesem Hintergrund ist es an der Zeit, sich mit Divi zu befassen und die neue Farbpalette Ihrer Website anzuwenden!

Die Standard-Divi-Palette

Gehen Sie zunächst in Ihr WordPress-Dashboard und gehen Sie zu Divi – Theme Options . Auf der Registerkarte Allgemein sehen Sie einen Eintrag mit dem Titel Color Pickers Default Palette . Dadurch können Sie 8 beliebige Farben auswählen, auf die Sie jederzeit schnell zugreifen möchten, wenn Sie die Farboptionen im Divi-Builder öffnen. Standardmäßig sind dies leuchtende Farben, die viele Leute verwenden, aber sie sind keine vollständige Palette, die auf einer einzelnen Website verwendet werden sollte.

Bitte beachten Sie, dass dies die Farben nicht auf Ihre Site selbst anwendet. Es präsentiert sie nur als schnelle Optionen im Builder.

Betreten Sie den Divi Builder

Unabhängig davon, ob Sie die Palette in den Divi-Einstellungen festlegen oder nicht, haben Sie immer noch die Möglichkeit, den Elementen auf Ihrer Site verschiedene Farben zuzuweisen. Gehen Sie dazu in den Divi Builder und geben Sie die Einstellungen eines beliebigen Moduls ein, das Sie in Ihrer neuen Palette anpassen möchten.

Unter der aktuell ausgewählten Farbe für ein beliebiges Element sehen Sie das Ellipsensymbol (drei Punkte) . Wenn Sie darauf klicken, rufen Sie das Magic Color-Tool von Divi auf. Der Builder berücksichtigt Ihre zuletzt verwendeten Farben und die Farben auf der Seite selbst, um Ihnen eine Reihe von mehreren Paletten zu bieten, die aus Komplementärfarben bestehen, die ziemlich gut zusammenarbeiten sollten.

Farben als global festlegen

Sobald Sie sich entschieden haben, welche Farben Sie verwenden möchten, ist es an der Zeit, sie als global festzulegen. Globale Farben können so eingestellt werden, dass sie sich über eine ganze Seite hinweg ändern, unabhängig von Modul oder Element . Das heißt, wenn Sie 5 verschiedene Farben austauschen möchten, müssen Sie dies nicht mehr als 100 Mal tun, einzeln über Instanzen dieser Farbe. Sie werden es 5 Mal tun.

Um zu beginnen, gehen Sie in ein beliebiges Modul mit einem Farbwähler. Darunter sehen Sie einen Link namens Global . Klicken Sie darauf und die Gesamtpalette verschwindet. Von hier aus legen Sie fest, welche Farben global verfügbar sein sollen, indem Sie auf das Plus- Symbol + klicken.

Wenn die neue Auswahl angezeigt wird, klicken Sie auf das grüne Häkchen , um die aktuelle Farbe als globale Option hinzuzufügen.

Es spielt keine Rolle, wo der weiße Kreis ist. Der Hex-Wert wird zu den globalen Farben hinzugefügt. Sie sehen nun die Standardfarbe, die neben dem Plussymbol hinzugefügt wurde. Und Sie können sehen, dass die Farbe auf die Website angewendet wurde, da das Tropfenformsymbol auf der Farbe anstelle des üblichen Kreises angezeigt wird.

Darüber hinaus können Sie mit der rechten Maustaste auf eine ausgewählte Farbe klicken und „In Global konvertieren“ auswählen, um sie der Liste hinzuzufügen.

Wiederholen Sie diesen Vorgang für jede Farbe in Ihrer gewählten Palette, damit schließlich Ihre gesamte Palette unter dem Global-Link gespeichert wird. Dies ist sehr wichtig, wenn Sie die neue Palette auf alle Elemente auf einer Seite anwenden.

Globale Farben anwenden

Als nächstes möchten Sie alle Instanzen derselben Farbe auf Ihrer Seite ersetzen können global angepasst werden. Was Sie tun möchten, ist, in das Element mit der Farbe zu gehen, die Sie ändern möchten, und mit der rechten Maustaste darauf klicken. Sie wählen dann im Kontextmenü Suchen und Ersetzen . Wandeln Sie diese Farbe hier nicht in global um . Das ist Teil des nächsten Schritts.

Auf dem nächsten Bildschirm können Sie diese Farbe durch Ihre globale Farbe ersetzen. Stellen Sie sicher, dass Sie unter Ersetzen durch auf Global klicken und dann die globale Farbe auswählen, die Sie über die Seite ausdehnen möchten. Achten Sie darauf, das Kontrollkästchen "Alle gefundenen Werte innerhalb jedes Optionstyps ersetzen, nicht beschränkt auf [aktuellen Elementtyp einfügen]" zu aktivieren. Dadurch wird sichergestellt, dass diese Farbe auf jeden Fall ersetzt wird.

Jetzt können Sie diese bestimmte globale Farbe bearbeiten, und wenn Sie dies tun, ändert sich jede Instanz davon. Beachten Sie, dass Sie keine neue Farbe aus der Palette auswählen. Dadurch wird nur die aktuelle Farbe getauscht. Sie bearbeiten die Farbe, um sie an allen Stellen zu ändern, da Sie jedes Vorkommen dieser einzelnen Farbe als global markiert haben.

Sie können es als Kollektiv mit der Farbauswahl bearbeiten. Klicken Sie einfach auf das Tröpfchen, um ein neues auszuwählen.

Danach wird dieser Vorgang nur für jede Farbe in Ihrer neuen Palette wiederholt. Nur eine einzige Änderung für jede Farbe in Ihrer Palette. Kein Austausch jedes einzelnen Elements einer bestimmten Farbe.

Einpacken

Das Auswählen und Anwenden einer globalen Farbpalette auf Ihre Divi-Website war noch nie so einfach. Sie können unsere Magic Color-Funktion verwenden, um Ihnen bei der Auswahl einer Palette zu helfen, und diese dann als globale Farben für Ihre Site festlegen. Sobald dies erledigt ist, wählen Sie einfach die Farbe aus, die Sie austauschen möchten, und verwenden die integrierte Funktion zum Suchen und Ersetzen von Divi, um diese Farben auf der Seite zu ersetzen. Mit diesem Workflow sparen Sie beim Umgestalten verschiedener Websites und beim Ändern einiger unserer Freebie-Layout-Pakete sicher jede Menge Zeit.

Genießen!

Beitragsbild des Artikels von ART.ICON / shutterstock.com