Hinweis: Während unsere beliebtesten Anleitungen ins Deutsche übersetzt wurden, sind einige Anleitungen nur auf Englisch verfügbar.

Farben ändern

Unabhängig davon, ob Sie ein Schwarzweiß-Design oder gewagte Farbkombinationen bevorzugen, können Sie das Menü „Website-Stil“ verwenden, um die Farben für Text, Linien und Hintergrundbereiche Ihrer Website anzupassen.

Diese Anleitung bietet einen Überblick darüber, wie Sie die Farben für die verschiedenen Elemente auf Ihrer Website anpassen können.

Hinweis: Cover-Seiten haben ihre eigenen Stil-Optionen.
Diese Schritte gelten für die Version 7.0. Wenn Ihre Website Version 7.1 nutzt, gehen Sie zu Stil- und Design-Optionen für Version 7.1, um Hilfe zu erhalten.

Ein Video anschauen

Bevor Sie beginnen

  • Farbänderungen gelten für die gesamte Website, sodass das Ändern der Farbe für ein Element einer Seite, wie z. B. den Textkörper, sich auch auf alle anderen Seiten auswirkt.
  • Um die Farbe eines bestimmten Textabschnitts zu ändern, wie beispielsweise ein einzelnes Wort in einem Satz, verwenden Sie einen Markdown-Block.
  • Jede Farb-Anpassung muss individuell vorgenommen werden.
  • Farbänderungen werden nicht übertragen, wenn Sie das Template wechseln. Sie erscheinen jedoch wieder, wenn Sie zum entsprechenden Template zurückwechseln.
  • Es gibt keine Möglichkeit innerhalb von Website-Stil, die Farben für eine einzelne Seite oder einen Block anzupassen. Wenn Sie Programmiererfahrung haben, können Sie versuchen, die Änderung mit CSS vorzunehmen. Bitte nehmen Sie jedoch zur Kenntnis, dass wir keinerlei Hilfestellungen für erweiterte Modifizierungen wie diese anbieten können.

Schritt 1 – Eine Seite auswählen

Gehen Sie zunächst auf eine Seite, auf der Sie Änderungen vornehmen möchten. Klicken Sie im Hauptmenü auf Seiten. Klicken Sie dann auf eine Seite, deren Farben Sie anpassen möchten.

Es gibt zwei Gründe dafür, zuerst eine Seite zu öffnen:

  1. Einige Anpassungen werden nur angezeigt, wenn Sie sich auf einer Seite befinden, die davon betroffen ist. So kann beispielsweise Ihre Blogseite titelspezifische Anpassungen aufweisen, die nur im Menü „Website-Stil“ angezeigt werden, wenn Sie eine Blog-Seite in der Vorschau anzeigen.
  2. Selbst wenn Ihre Änderungen für die gesamte Website gelten, können Sie sich Ihre Stil-Bearbeitungen auf der ausgewählten Seite ansehen, während Sie diese vornehmen.

Nachdem Sie die richtige Seite im Seiten-Menü ausgewählt haben, kehren Sie zum Hauptmenü zurück. Klicken Sie dort auf Design und dann auf Website-Stil.

Schritt 2 – Eine Farb-Anpassung finden

Die spezifischen Stil-Anpassungen hängen von Ihrer Vorlage ab. Scrollen Sie innerhalb von Website-Stil nach unten, um alle Optimierungen zu sehen, die auf der angezeigten Seite verfügbar sind.

Jede Farb-Anpassung hat einen Kreis neben dem Label. Dieser Kreis zeigt die aktuelle Farbe für dieses Element an.

Hinweis: Der Kreis zeigt nicht an, ob die Farbe transparent ist oder ob sie im gleichen Grau wie der Hintergrund des Website-Stil-Menüs gehalten ist.

 

Um spezifische Anpassungen für ein Element auf der Seite zu finden, klicken Sie in der Vorschau auf das Element. Website-Stil zeigt daraufhin nur die Stil-Anpassungen für dieses Element an und blendet den Rest aus. Diese Abkürzung steht in den meisten Vorlagen und für die meisten Bereiche Ihrer Website zur Verfügung. Klicken Sie auf Alle anzeigen, um wieder alle Anpassungen für die Seite anzuzeigen.

Wenn Sie die Anpassung gefunden haben, klicken Sie darauf, um die Farbauswahl zu öffnen.

Schritt 3 – Eine Farbe auswählen

Verwenden Sie die Farbauswahl, die sich öffnet, um die gewünschte Farbe zu finden. Klicken Sie auf den unteren Schieberegler, um die Farbe auszuwählen, und passen Sie den Farbton (hell/dunkel) an, indem Sie auf das Quadrat in der Mitte klicken.

color-sliders.png

Wenn Sie den Wert für die gewünschte Farbe kennen, können Sie diesen alternativ auch im Wertfeld eingeben. Das Wertfeld akzeptiert jedes dieser Formate:

  • HEX – Beispiel: #FFFFFF
  • RGB oder RGBa – Beispiel: rgba(255, 0, 149, 1)
  • HSL/HSLA – Beispiel: hsla(325, 100 %, 50 %, 1)
  • HTML (muss kleingeschrieben sein) – Beispiel: white

Um einen bestimmten Farbwert zu finden, können Sie externe Websites wie z. B. color-hex.com oder imagecolorpicker.com besuchen.

Tipp: Das Wertefeld wird automatisch gefüllt, wenn Sie den Farb-Schieberegler verwenden, um eine Farbe zu finden. Sie können diesen Code kopieren und einfügen, um dieselbe Farbe in Website-Stil zu anderen Anpassungen hinzuzufügen.

value-field.png

Schritt 4 – Die Transparenz ändern

Um die Transparenz einer Farbe anzupassen, verwenden Sie den Schieberegler für die Deckkraft, indem Sie den Kreis unter der Farbauswahl ziehen. Die linke Seite ist völlig transparent, während die rechte Seite völlig undurchsichtig ist.

change-the-opacity.png

Hinweis: Manche Farb-Anpassungen beinhalten keinen Schieberegler für die Deckkraft.

Der Schieberegler für die Deckkraft ist besonders nützlich für Overlay-Farben, die über Bildern angezeigt werden.

overlay-opacity.png

Wenn Sie eine Farbe oder ein Bild haben, die/das eine andere überlagert, bleibt die untere Ebene sichtbar, wenn Sie die obere Ebene transparent machen.

opacity-overlap.png

Schritt 5 – Abschließen und speichern

Klicken Sie irgendwo außerhalb des Farbfensters, um die Farbauswahl zu schließen.
 
Um Änderungen vor dem Speichern rückgängig zu machen, klicken Sie auf das Rückgängig-Symbol oben im Menü oder auf den Punkt neben einer bestimmten Anpassung. Unter Stil-Änderungen vornehmen finden Sie weitere Informationen.

undo_and_dot_icons.jpg

Wenn Sie Ihre Änderungen vorgenommen haben, klicken Sie auf Speichern.

click_save.jpg

War dieser Beitrag hilfreich?
60 von 175 fanden dies hilfreich