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

Farben ändern

Ganz gleich, ob du ein Schwarzweiß-Design oder gewagte Farbkombinationen bevorzugst, kannst du das Design-Menü und den Stile-Abschnitt verwenden, um die Farben für Text, Linien und Hintergrundbereiche deiner Website zu ändern.

Diese Anleitung bietet eine Übersicht darüber, wie du Farben für die verschiedenen Elemente auf deiner Website ändern kannst. 

Video ansehen

Bevor Sie anfangen

  • Farbänderungen, die du im Design-Menü vornimmst, gelten für die gesamte Website. Wenn du ein Element einer Seite änderst, z. B. den Button-Text, wird es in allen Bereichen geändert, die dieses Design verwenden (Version 7.1), oder auf allen Seiten (Version 7.0).
  • Um die Farbe eines bestimmten Textabschnitts zu ändern, wie beispielsweise ein einzelnes Wort in einem Satz, verwenden Sie einen Markdown-Block.
  • Wenn du Coding-Erfahrung hast, kannst du auch gezielte Farbänderungen über CSS vornehmen. Denke daran, dass benutzerdefinierter Code nicht in den Anwendungsbereich unseres Supports fällt.
  • Wenn deine Website auf Version 7.0 läuft, funktioniert das Ändern der Farben anders. Im folgenden Abschnitt findest du die speziellen Schritte dafür.

Ändern der Farben für die gesamte Website

Um alle Farben auf deiner Website zu ändern, wähle eine Farbpalette aus:

  1. Klicken Sie im Hauptmenü auf Design und anschließend auf Farben.
  2. Klicke neben Palette auf Bearbeiten, um eine Farbpalette auszuwählen.
  3. Klicken Sie oben auf Save (Speichern).

color_palette_-_click_edit.png

Wählen Sie aus einigen Arten von Farbpaletten:

  • Designer-Paletten – Wähle aus einer Reihe von voreingestellten Paletten in Komplementärfarben.
  • Aus Bild ... – Lade ein Bild hoch, um eine Palette basierend auf den markantesten Farben des Bildes zu erstellen.
  • Aus Farbe ... – Wähle mit der Farbauswahl eine Primärfarbe für die Palette aus.
  • Benutzerdefinierte Farben – Wähle mit der Farbauswahl eine Farbe für jeden Teil der Palette aus.

Die Farbpalette erstellt die verschiedenen Farbdesigns für Ihre Seitenabschnitte. So sehen Sie, welches Thema ein Abschnitt verwendet:

  1. Klicken Sie im Hauptmenü auf Design und anschließend auf Farben.
  2. Klicke auf Abschnittsdesigns.
  3. Scrolle durch deine Seitenvorschau und überprüfe die Abschnitts-Design-Label für jeden Abschnitt.

Ändern von Abschnittsfarben

Nachdem du die Farben für die gesamte Website festgelegt hast, kannst du das Farbdesign eines jeden Abschnitts ändern, um ihm ein einzigartiges Aussehen zu verleihen:

  1. Klicken Sie im Hauptmenü auf Seiten
  2. Wählen Sie die Seite aus, die Sie bearbeiten möchten, und klicken Sie oben links auf Bearbeiten.
  3. Klicke auf das Stiftsymbol des Abschnitts.
  4. Wähle im Tab Farben ein Design aus.
  5. Bewege den Mauszeiger im Seiteneditor auf Fertig und klicke auf Speichern .

section_editor.png

Wählen Sie ein Thema:

  • Minimal – Text und Überschriften sind schwarz oder weiß, für den Hintergrund und kleinere Website-Elemente gelten andere Farben.
  • Fett – Die Farbe auf der linken Seite der Palette gilt für alle Texte und Überschriften und für den Hintergrund und kleinere Website-Elemente gelten andere Farben.
  • Akzent – Die Farbe auf der linken Seite der Palette gilt entweder für den Hintergrund (Dunkel) oder Text (Hell), für den Hintergrund und kleinere Website-Elemente gelten andere Farben. 

In einigen Fällen werden Text- und Button-Farben standardmäßig auf Weiß oder Schwarz gesetzt, um einen besseren Kontrast zur Hintergrundfarbe zu erzielen.

Anpassen von Designfarben

Du kannst jedes Design weiter anpassen, indem du bestimmte Farben für verschiedene Website-Elemente festlegst. Alle Änderungen, die an den Farben eines Designs vorgenommen werden, gelten für alle Bereiche deiner Website, die dieses Design verwenden.

So bearbeitest du ein Design:

  1. Klicken Sie im Hauptmenü auf Design und anschließend auf Farben.
  2. Klicke auf Abschnitts-Designs.
  3. Klicke auf das Stiftsymbol neben dem Design, das du bearbeiten möchtest.
  4. Klicken Sie auf die zu ändernde Anpassung und wähle dann eine neue Farbe aus. Du kannst eine voreingestellte Farbe im Tab Palette verwenden oder auf Benutzerdefiniert klicken, um die Farbauswahl zu verwenden. Möglicherweise musst du scrollen, um alle Anpassungen zu sehen.
  5. Verwende den Opazitäts-Schieberegler, um die Transparenz zu ändern.
  6. Du kannst noch nicht gespeicherte Änderungen rückgängig machen, indem du auf das Symbol Rückgängig machen oben im Menü oder auf den Punkt neben einer bestimmten Anpassung klickst.
  7. Klicken Sie auf Speichern.

Die Farbauswahl

Verwende die Farbauswahl, um eine benutzerdefinierte Farbe für ein Element deiner Website auszuwählen. Jede Farbanpassung hat einen Kreis neben dem Label, der die aktuelle Farbe für dieses Element anzeigt.

Um eine neue Farbe auszuwählen, klicke auf den Farbkreis neben der zu ändernden Optimierung. Klicke auf den unteren Schieberegler, um eine Farbe auszuwählen und wähle dann einen Farbton im obigen Quadrat.

pick_a_color.png

Wenn du den Wert für die gewünschte Farbe kennst, kannst du auch auf das Wertefeld klicken, um es zu bearbeiten. Das Wertefeld akzeptiert folgende 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: weiß

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 ausgefüllt, wenn du den Farbschieberegler verwendest, um eine Farbe zu finden. Du kannst diesen Code kopieren und einfügen, um anderen Anpassungen im Design die gleiche Farbe hinzuzufügen.

custom_color_value.png

Transparenz

Um die Transparenz einer Farbe zu verändern, verwendest du den Schieberegler für die Deckkraft durch Ziehen des Kreises unter der Farbauswahl. Der Schieberegler für die Deckkraft ist besonders nützlich für Overlay-Farben, die über Bildern angezeigt werden.

  • In Version 7.1 ist die linke Seite ein sehr leichter Farbton, während die rechte Seite einen dunkleren Farbton hinzufügt. Du kannst nur Transparenz der Palettenfarben ändern.
  • In Version 7.0 ist die linke Seite vollständig transparent, während die rechte Seite komplett undurchsichtig ist. Einige Farbanpassungen bieten keinen Opazitäts-Schieberegler.

adjust_the_opacity.png

Farbe des Einrückungsrands ändern

Wenn ein Abschnitt über ein Hintergrundbild verfügt, kannst du das Bild randlos oder eingerückt anzeigen.

  • Randlos erweitert das Bild von einem Rand deines Browserfensters zum anderen <, sodass es sich über die gesamte Breite deiner Website erstreckt.
  • DurchEinrückung wird das Bild leicht eingerückt und ein Rahmen um das Bild herum erstellt.

Wenn das Bild auf eingerückt gesetzt ist, kannst du die Rahmenfarbe ändern:

  1. Klicken Sie im Hauptmenü auf Design und anschließend auf Farben.
  2. Bewege den Mauszeiger über dein Thema und klicke auf das Bleistiftsymbol.
  3. Klicke unter gesamte Website auf Einrückungsrand und wähle eine Farbe aus.
  4. Klicke oben auf den Pfeil Farben, um zum Farb-Menü zurückzukehren, und klicke dann auf Speichern, um die Änderungen zu speichern.

Ändern der Farben in Version 7.0

Wenn deine Website auf Version 7.0 läuft, funktioniert das Ändern der Farben deiner Website anders.

Tipp: Cover-Seiten haben ihre eigenen Stiloptionen.

Verwende im Menü Design die Anpassungen in Website-Stilen, um die Farben deiner Website manuell festzulegen. Die spezifischen Stil-Anpassungen hängen vom Template deiner Website ab. Lies die Anleitungen deines Template, um detailliertere Hilfe beim Ändern der Farben deiner Website zu erhalten.

Um Farben auf einer Website der Version 7.0 zu ändern, navigiere zuerst zu einer Seite, auf der Änderungen angezeigt werden sollen. Einige Anpassungen werden nur angezeigt, wenn du dich auf der Seite befindest, die sie betreffen. Wenn du zu der Seite navigierst, die du bearbeitest, kannst du die entsprechenden Anpassungen sehen. Du kannst auch die Stilbearbeitungen auf der ausgewählten Seite anzeigen, während du sie vornimmst.

Um Anpassungen für ein spezifisches Element auf der Seite zu finden, klickst du das Element in der Vorschau an. Unter „Website-Stile“ werden dann nur die Stil-Anpassungen für dieses Element angezeigt und alle anderen ausgeblendet. Diese Schnellzugrifffunktion steht in den meisten Templates und für die meisten Bereiche deiner Website zur Verfügung. Klicke auf Alle anzeigen, um wieder alle Anpassungen für die Seite anzuzeigen.

site_styles_-_show_all.png

So ändern Sie die Farben Ihrer Website:

  1. Klicke im Startmenü auf Seiten und dann auf die Seite, die du ändern möchtest.
  2. Wenn in der Seitenvorschau die richtige Seite angezeigt wird, kehre zum Hauptmenü zurück.
  3. Klicke auf Design und dann auf Website-Stile
  4. Scrolle nach unten, um alle Anpassungen auf der aufgerufenen Seite anzuzeigen. Klicke auf die Anpassung, die du ändern möchtest und wähle dann eine neue Farbe aus.
  5. Verwende den Opazitäts-Schieberegler, um die Transparenz zu ändern.
  6. Klicken Sie irgendwo außerhalb des Farbfensters, um die Farbauswahl zu schließen.
  7. Du kannst noch nicht gespeicherte Änderungen rückgängig machen, indem du auf das Symbol Rückgängig machen oben im Menü oder auf den Punkt neben einer bestimmten Anpassung klickst.
  8. Klicken Sie oben auf Save (Speichern).

Ändern der Hintergrundfarbe

Die Optionen für die Hintergrundfarbe variieren je nach Template:

  • Für alle Templates – du kannst die Farbe des Hauptinhaltsbereichs festlegen.
  • Für einige Templates – du kannst separate Farben für die Kopfzeile, den Footer und den Freiraum rund um deinen Inhalt festlegen.

Denken Sie daran:

  • Hintergrundfarben werden beim Wechseln von Templates nicht übernommen.
  • Einige Templates unterstützen auch Hintergrundbilder.
  • Wenn du angemeldet bist, zeigt der Hintergrund beim Laden einer Seite eine weiße Farbe an, unabhängig von der unter Website-Stile gewählten Farbe. Dies ist für Besucher nicht sichtbar.

Weitere Hilfe findest du in der Anleitung für dein Template.

Video ansehen

Dieses Video bezieht sich auf Version 7.0.

War dieser Beitrag hilfreich?
74 von 270 fanden dies hilfreich