Farben ändern

Videoanleitung

Das Anpassen der Farben in deinem Kadence-Theme ist eine der besten Möglichkeiten, um deiner Website ein individuelles Aussehen zu verleihen und sicherzustellen, dass sie deinem Branding entspricht. Kadence bietet eine benutzerfreundliche globale Farbpalette, die es dir ermöglicht, alle Farbbereiche deiner Website effizient zu ändern. Hier ist eine Schritt-für-Schritt-Anleitung, wie du die Farben anpassen kannst und wie die globale Farbpalette funktioniert:

1. Aufruf des Customizers

Melde dich in deinem WordPress-Dashboard an und navigiere zu Design > Customizer. Alternativ kannst du oben in der Admin-Leiste deiner Website auf Customizer klicken, wenn du bereits eingeloggt bist.

2. Farben-Optionen finden

Im Customizer findest du verschiedene Einstellungen, um das Erscheinungsbild deiner Website anzupassen. Klicke hier auf Farben & Schriften und anschließend auf Farben. In diesem Bereich kannst du die Farben für verschiedene Elemente deiner Website festlegen, darunter Hintergrundfarben, Textfarben, Linkfarben und vieles mehr.

3. Globale Farbpalette

Kadence bietet dir eine globale Farbpalette, mit der du die Farben deiner Website zentral festlegen kannst. Die globale Farbpalette umfasst eine Auswahl von 9 Hauptfarben, die du für deine gesamte Website verwenden kannst. Diese Farben werden an verschiedenen Stellen deines Designs angewandt, wie z. B. bei Texten, Buttons, Links oder Hintergründen. Das Besondere an der globalen Farbpalette ist, dass jede Änderung, die du an einer Farbe vornimmst, automatisch auf alle Elemente angewendet wird, die diese Farbe nutzen. Dadurch sparst du viel Zeit und kannst sicherstellen, dass die gesamte Website optisch konsistent bleibt.

4.Aufteilung der globalen Farbpalette

Die globale Farbpalette in Kadence ist in zwei Accent-Farben, drei (helle) Hintergrund-Farben und 4 (meist dunkle) Text-Farben unterteilt.

5. Farben anpassen

Klicke auf die Farbe, die du ändern möchtest. Es öffnet sich ein Farbwähler, mit dem du entweder eine Farbe auswählen oder den Hex-Code deiner Markenfarbe eingeben kannst. Wenn du beispielsweise die Accent-Farbe ändern möchtest, wähle eine Farbe aus, die am besten zu deinem Branding passt. Diese Primärfarbe wird auf viele Elemente der Website angewendet, wie z. B. Buttons und Links.

6. Vorschau und Veröffentlichen

Während du die Änderungen an den Farben vornimmst, kannst du die Auswirkungen in der Vorschau rechts sehen. Dies gibt dir die Möglichkeit, sicherzustellen, dass alle Farben gut zusammenpassen und deine Website professionell wirkt. Wenn du mit den Änderungen zufrieden bist, klicke auf Veröffentlichen, um die neuen Farben live zu schalten. Solltest du noch unsicher sein, kannst du den Customizer jederzeit verlassen, ohne die Änderungen zu speichern.

Tipps zur Verwendung der Farbpalette

Konsistenz wahren: Nutze die globale Farbpalette, um sicherzustellen, dass alle Farben auf deiner Website konsistent sind. Dadurch wird dein Branding gestärkt und die Benutzerfreundlichkeit verbessert.

Kontraste nutzen: Achte darauf, dass genügend Kontrast zwischen Hintergrund- und Textfarben vorhanden ist, um die Lesbarkeit zu gewährleisten. Verwende dazu die Sekundärfarben und Akzentfarben in der globalen Farbpalette.

Mit diesen Schritten kannst du die Farben auf deiner Kadence-Website anpassen und sicherstellen, dass das Design deiner Website deine Marke bestmöglich repräsentiert.

Probleme mit den Farben nach dem Import aus der Cloud

Wenn du ein Element aus der Cloud importierst, kann es sein, dass sich Text- und Hintergrund-Farben nicht genug voneinander unterscheiden. Dies liegt an den unterschiedlichen Farbpaletten der Themes. Die Cloud-Elemente sind mit der globalen Farbpalette verbunden, sodass beim Import die entsprechenden Farben deines Themes verwendet werden. Grundsätzlich ist das eine super Funktion, weil die neuen Elemente sich so direkt deine Website anpassen. Allerdings ist es manchmal nötig für Hintergründe oder Texte eine andere Farbe auszuwählen. Dies ist ganz einfach über die Style-Optionen des Spaltenlayouts bzw. des jeweiligen Abschnitts oder Text-Blocks möglich.