Globale Farben in Neve

Farben spielen eine äußerst wichtige Rolle im Webdesign. Sie können die Aufmerksamkeit und das Interesse Ihrer Besucher beeinflussen. Wenn einem Kunden das Design Ihrer Website nicht gefällt, ist es sehr wahrscheinlich, dass er die Seite verlässt und nicht zurückkehrt. Mit der neuen Global Colors-Option in Neve können Sie ganz einfach eine einheitliche Farbpalette für Ihre Website erstellen.

👁 Überblick

Zur besseren Verständlichkeit hier ein kurzer Überblick darüber, was jede Farbe bewirkt:

Hier ist ein Beispiel für eine Starter-Site, die dieselbe Farbpalette verwendet:

⚙️ Erste Schritte mit Global Colors

Um Global Colors zu verwenden, navigieren Sie im WordPress Dashboard zu Design > Anpassen und wählen Sie Farben & Hintergrund aus.

Neve enthält zwei Standard-Farbpaletten: Basis und Dunkelmodus. Jede Farbpalette besteht aus neun Farben, die auf der gesamten Website angewendet werden und an Ihren Geschmack angepasst werden können, wie in den obigen Screenshots beschrieben.

Wenn Sie zum Anfangszustand zurückkehren möchten, klicken Sie auf die Schaltfläche „Alle auf Standard zurücksetzen“.

🎨 Benutzerdefinierte Palette

1

Klicken Sie auf die Schaltfläche „Benutzerdefinierte Palette hinzufügen“ neben den Basis-Paletten.

2

Geben Sie einen Titel für die Palette ein, wählen Sie eine Basis-Palette aus, mit der Sie beginnen möchten, und klicken Sie auf „Hinzufügen“.

Sie haben nun eine neue Farbpalette, die angepasst werden kann. Wählen Sie die Farbe Ihrer Wahl für jede Palettenoption aus und veröffentlichen Sie die Änderungen.

🌈 Benutzerdefinierte Farben

Mit dieser Funktion können zusätzliche Farben zur bestehenden Farbpalette hinzugefügt werden, sodass Sie Ihre Farbpalette erweitern können.

📝 Hinweis: Für jede neue Farbe können Sie die Beschriftung bearbeiten oder sie löschen.

Diese neuen Farben können überall auf Ihrer Website verwendet werden, sei es im Customizer oder in den Page-Editoren (Gutenberg, Elementor):

Wie hier zu sehen ist, ist die neue benutzerdefinierte Farbe (lila) nun im Editor verfügbar.

🎨 Verwendung der Global Colors

🖌 Globale Farben im Customizer

Wie der Name schon sagt, können globale Farben aus den Farbpaletten global auf Ihrer gesamten Website verwendet werden. Wenn Sie im Customizer die Farbe für ein Element auswählen, haben Sie zwei Optionen:

Zugriff auf globale Farben

Um auf die globalen Farben zuzugreifen, klicken Sie auf das 🌐 Symbol vor der Farbauswahl und wählen Sie die gewünschte Farbe aus.

Verwendung des Farbwählers

Klicken Sie auf die quadratische Farbauswahl neben dem Globus-Symbol, um den Farbwähler zu verwenden.

🎨 Globale Farben in Elementor

Die globalen Farben von Neve sind direkt in Elementor integriert. Wenn Sie eine Seite bearbeiten, können Sie eine globale Farbe für die Elemente auf der Seite auswählen.

Klicken Sie auf das Globus-Symbol, um die globalen Farben anzuzeigen und die gewünschte Farbe auszuwählen. Sie sehen dort alle globalen Farben von Elementor sowie die globalen Farben aus Neve.

📝 Hinweis: Um die Farben von Neve leichter zu erkennen, haben diese den Zusatz „Neve“ in ihrem Namen.

🌈 Globale Farben in Gutenberg

Die globalen Farben von Neve können im Gutenberg-Editor für jeden einzelnen Block einfach angewendet werden. Die Farben aus der aktuellen Farbpalette sind automatisch aus den Farbeinstellungen jedes Blocks wählbar. Wählen Sie einfach die gewünschte globale Farbe aus oder verwenden Sie den Farbwähler für eine benutzerdefinierte Farbe.

📝 Hinweis: Hier sehen Sie die Basisfarben der benutzerdefinierten Palette sowie die benutzerdefinierte Farbe, die wir in den vorherigen Schritten hinzugefügt haben.

🗂 Nützliche Ressourcen

Es ist wichtig, auf passende Farben und ausreichenden Kontrast zu achten. Hier sind einige Links, die Ihnen beim Erstellen einer Website helfen:

• Adobe Color Contrast Analyzer – Hilft Ihnen dabei, den Kontrast zwischen Hintergrund und Text oder grafischen Komponenten zu prüfen.

• Colorblind Web Page Filter – Zeigt, wie Ihre Website für Menschen mit verschiedenen Arten von Farbblindheit aussieht.

Geben Sie die URL Ihrer Seite ein, wählen Sie eine Farbsehschwäche aus und sehen Sie, wie die Seite für betroffene Personen aussieht.