Die Farben, die du auswählst, machen einen großen Teil des Designs deiner Website aus. In diesem Ratgeber erfährst du, wie du die Farbpaletten deiner Website verwalten kannst.
In diesem Ratgeber
Wenn deine Website ein Theme verwendet, das den Website-Editor unterstützt, kannst du die Farben deiner Website mithilfe von Stilen ändern. Um schnell herauszufinden, ob deine Website den Website-Editor verwendet, sieh in deinem Dashboard unter Design nach. Wenn dir hier der Editor angezeigt wird, kannst du die Farben deiner Website mit den folgenden Schritten ändern:
- Navigiere in deinem Dashboard zu Design → Editor.
- Klicke links auf Stile oder wähle das Stile-Icon aus, wie hier gezeigt. Das Icon sieht aus wie ein schwarz-weißer Kreis.
- Wähle Farben aus.
- Wähle Palette aus, um die Standardfarben deiner Website festzulegen, oder wähle folgende Elemente deiner Website aus:
- Text
- Hintergrund
- Link
- Untertitel
- Button
- Überschrift
Im weiteren Verlauf dieses Ratgebers werden diese Elemente im Detail erläutert.
Die Farbpalette deiner Website legt die Standardfarben fest, die auf deiner Website verwendet werden. Du kannst zwar immer noch die Farbe eines einzelnen Elements festlegen, aber die Definition deiner Farbpalette gewährleistet ein konsistentes Farbschema auf deiner Website.
Hier kannst du das Theme, die Standardfarben und die individuellen Farben bearbeiten:
- Theme: Farben, die von den Designern deines Themes beim Erstellen des Themes festgelegt wurden und im gesamten Design deines Themes verwendet werden.
- Standard: Die Farben, die beim Bearbeiten deiner Seiten und Beiträge in den Farbeinstellungen des Blocks angezeigt werden.
- Individuell: Lege zusätzliche Farben fest, die in deiner Farbpalette verwendet werden sollen, und gib ihnen einen Namen.
Befolge die unten stehenden Anweisungen, um die Farben des Themes zu aktualisieren:
- Klicke auf eine beliebige Stelle im Feld unter Palette.
- Klicke auf die drei Punkte neben Theme und wähle dann Details anzeigen aus, um die Liste der Farbbereiche in der Palette zu erweitern.
- Jedes Theme definiert seine eigenen Farbbereiche. In unserem Beispiel können wir zum Bearbeiten der Farbe zwischen Primär, Sekundär, Vordergrund, Hintergrund und Tertiär wählen:
- Wähle mithilfe der daraufhin angezeigten Farbauswahl die gewünschte Farbe aus.
- Klicke auf Fertig, um deine gewählte Farbe festzulegen.
- Klicke oben rechts auf den Button Speichern, um deine Änderungen zu speichern.
Du kannst auch mehrere individuelle Farben zur Palette deiner Website hinzufügen. Diese werden gespeichert und stehen dir in den Farbeinstellungen deiner Blöcke zur Auswahl zur Verfügung.
Befolge diese zusätzlichen Schritte, um individuelle Farben hinzuzufügen:
- Klicke unter Individuell auf den Button +.
- Wähle deine Farbe aus der Farbauswahl aus oder gib einen HEX-, RGB- oder HSL-Farbwert ein.
- Klicke auf den Namen der Farbe (standardmäßig „Farbe 1“) und gib einen Namen für deine neue Farbe ein.
- Klicke auf Fertig.
Diese Schritte werden im folgenden Video veranschaulicht:
In den Farbeinstellungen direkt unter der Palette wird dir die Option zum Bearbeiten der Farbe verschiedener Elemente deiner Website angezeigt. Diese Elemente sind:
- Text: Wähle eine Farbe für den normalen Basistext auf deiner Website aus, ohne Links, Untertitel, Button-Text oder Überschriften.
- Hintergrund: Wähle eine Volltonfarbe oder einen Farbverlauf für den Hintergrund deiner Website aus. Weitere Informationen findest du in unserem Ratgeber zum Anpassen des Hintergrunds deiner Website.
- Link: Wähle eine Farbe für alle Links auf deiner Website aus. Hier kannst du die Standardfarbe auswählen, die für alle Links angezeigt wird, sowie die Farbe bei Mauszeigerkontakt, die angezeigt wird, wenn der Mauszeiger über einem Link platziert wird:
- Untertitel: Wähle die Textfarbe aus, die in Bildblock-Untertiteln verwendet wird.
- Buttons: Lege die Farbe für Buttons-Blöcke fest. Du kannst die Textfarbe auswählen und eine Volltonfarbe oder einen Farbverlauf für den Hintergrund der Buttons festlegen.
- Die Farbe von Buttons bei Mauszeigerkontakt kann derzeit nicht geändert werden. Du kannst CSS-Code verwenden, um auf einen Button eine Farbe bei Mauszeigerkontakt anzuwenden.
- Überschriften: Lege eine Farbe für Überschriftsblöcke auf der gesamten Website fest. Du kannst die Textfarbe auswählen und eine Volltonfarbe oder einen Farbverlauf für den Hintergrund der Überschriften festlegen.
- Um für jede Überschriften-Ebene (H1 bis H6) eine andere Farbe auszuwählen, klicke auf die drei Punkte neben Farbe, um die Optionen zu erweitern, und dann auf die gewünschte Überschriften-Ebene. Neben der Überschriften-Ebene wird ein Häkchen angezeigt. Anschließend kannst du die Optionen schließen, um auf die Farbeinstellungen für diese Überschriften-Ebene zuzugreifen.
Wenn du die Farbe nur für einen bestimmten Text (und nicht für alle Elemente) überschreiben möchtest, kannst du in den Farbeinstellungen des jeweiligen Blocks in diesem Beitrag oder auf dieser Seite eine andere Farbe festlegen.