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: Du kannst Website-Stile und Abschnittsstile verwenden, um die Farben für den Text, die Hintergrundbereiche und andere Elemente 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 unter Website-Stile vornimmst, gelten für die gesamte Website. Wenn du ein Element einer Seite änderst, z. B. den Button-Text, wird dieses Element in allen Bereichen, die dieses Design verwenden (Version 7.1), oder auf allen Seiten (Version 7.0) geändert.
  • Um die Farbe eines bestimmten Textabschnitts zu ändern, wie etwa ein einzelnes Wort in einem Satz, verwende 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 Version 7.0 nutzt, funktioniert das Ändern der Farben anders. Im folgenden Abschnitt findest du die konkreten 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. Während du eine Seite bearbeitest, öffne Website-Stile und klicke dann auf Farben.
  2. Klicke neben Palette auf Bearbeiten, um eine Farbpalette auszuwählen. Die Designer-Paletten werden standardmäßig angezeigt. Klicke auf Designer-Paletten, um alle Optionen anzuzeigen.  
  3. Um deine Änderungen zu speichern, bewege den Mauszeiger oben links im Seiten-Editor über Fertig und klicke auf Speichern.

edit_color_palette.png

Wähle im Paletten-Menü aus folgenden Farbpaletten aus:

  • Designer-Paletten – Wähle aus einer Reihe von voreingestellten Paletten in kuratierten Farben.
  • Aus Bild ... – Lade ein Bild hoch, um eine Palette basierend auf den markantesten Farben des Bildes zu erstellen. 
  • Aus Farbe ... – Wähle eine Primärfarbe mit der Farbauswahl und erstelle Paletten, um diese Farbe zu ergänzen. 
  • Benutzerdefinierte Farben – Passe jede Farbe in der Palette mit der Farbauswahl an.

Deine Farbpalette generiert die verschiedenen Farbdesigns für deine Seitenbereiche. Um zu sehen, welches Design ein Abschnitt verwendet:

  1. Während du eine Seite bearbeitest, öffne Website-Stile und klicke dann 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. Klicke im Tab Farben auf ein Design, um es auf diesen Abschnitt anzuwenden. 
  5. Deine Änderungen bleiben erhalten, während du andere Seiteninhalte bearbeitest. Um deine Änderungen zu speichern, bewege den Mauszeiger oben links im Seiten-Editor über 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. Während du eine Seite bearbeitest, öffne Website-Stile und klicke dann 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. Deine Änderungen bleiben erhalten, während du andere Seiteninhalte bearbeitest. Um deine Änderungen zu speichern, bewege den Mauszeiger oben links im Seiten-Editor über Fertig und klicke auf Speichern.

Denke beim Ändern dieser Designfarben an folgende Tipps:

  • Wenn du nicht sicher bist, welches Design du bearbeiten musst, suche im Bereich der Seite, den du ändern möchtest, nach dem Farbdesign-Label.
  • Im Menü Design bearbeiten werden alle verfügbaren Farbanpassungen für deine Website angezeigt – selbst wenn die Seite, die du gerade bearbeitest, diese Elemente nicht enthält. Zum Beispiel werden dir auch beim Bearbeiten einer Layout-Seite sämtliche Farboptionen für Blogs angezeigt.
  • Wenn ein Abschnitt über ein Hintergrundbild oder Video verfügt, verwende die Anpassung Hintergrund-Overlay, um die Deckkraft der Overlay-Farbe festzulegen. Wenn der Abschnitt anstelle eines Bildes oder Videos eine Hintergrundfarbe verwendet, lege die Farbe mit Abschnittshintergrund fest.

Die Regeln für Abschnittsdesigns für diese Bereiche deiner Seite variieren leicht:

  • Um das Farbdesign deiner integrierten Suchseite zu finden, schließe die Seitenvorschau, öffne deine Suchseite, rufe anschließend das Menü „Abschnittsdesigns“ auf und suche nach dem Design-Label. 
  • Um das Farbdesign deiner 404-Seite zu finden, schließe die Vorschau und navigiere zu einer nicht vorhandenen Seite, indem du am Ende deiner Domain eine Reihe von Buchstaben hinzufügst, wie /xyz. Öffne von dort aus Abschnittsdesigns und suche nach dem Design-Label. 

Die Mitteilungsleiste deiner Seite entspricht immer dem Farbdesign deiner Kopfzeile. Wenn die Kopfzeile transparent ist, entspricht sie dem Design des folgenden Abschnitts.

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 heller 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 Schieberegler für die Opazität (Deckkraft der Farbe).

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. Während du eine Seite bearbeitest, öffne Website-Stile und klicke dann auf Farben.
  2. Klicke auf Abschnittsdesigns und dann auf das Farbdesign für den Abschnitt, den du ändern möchtest.
  3. Klicke unter gesamte Website auf Einrückungsrand und wähle eine Farbe aus.
  4. Deine Änderungen bleiben erhalten, während du andere Seiteninhalte bearbeitest. Um deine Änderungen zu speichern, bewege den Mauszeiger oben links im Seiten-Editor über Fertig und klicke auf Speichern.

Ändern der Farben in Version 7.0

Wenn deine Website Version 7.0 nutzt, 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 zu ändernde Anpassung 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

Diese Template-Familien verfügen über anpassbare Hintergrundbereiche:

Template-Gruppe Hintergrundbereiche
Adirondack
  • Website
  • Leinwand
  • Navigationsleisten
  • Kopfzeile
Avenue
  • Website
  • Leinwand
Aviator
  • Website
  • Leinwand
  • Kopfzeile/Footer
Bedford
  • Website
  • Kopfzeile
  • Vor-Fußzeile
  • Fußzeile
Brine
  • Website
  • Leinwand
  • Rand
  • Obere Kopfzeile
  • Fußzeile
  • Mobilgeräte-Leisten
Farro
  • Website
  • Rand
  • Kopfzeile
  • Fußzeile
  • Mobilgeräte-Leiste
Five
  • Website
  • Leinwand
  • Leinwand-Rand
  • Kopfzeile
  • Navigation
Flatiron
  • Website
  • Kopfzeile/Footer
Forte
  • Website
Galapagos
  • Website
  • Kopfzeile
Ishimoto
  • Website
  • Seitenrand
Momentum
  • Website
  • Leinwand
  • Navigation
Montauk
  • Website
  • Leinwand
Native
  • Website
Pacific
  • Website
  • Kopfzeile
  • Index mit abwechselnden Abschnitten
  • Vor-Fußzeile
  • Fußzeile
Skye
  • Website
Supply
  • Website
  • Navigation in der Kopfzeile/Seitenleiste
Tremont
  • Website
  • Navigation-Overlay
  • Index
Wells
  • Website
Wexley
  • Website
  • Mobile Navigation
York
  • Website
  • Banner

Denken Sie daran:

  • Hintergrundfarben werden beim Wechseln von Templates nicht übernommen.
  • Einige Templates unterstützen auch Hintergrundbilder.
  • In einigen Templates kann ein Banner hinter der Kopfzeile angezeigt werden.
  • 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.

Ein Video ansehen (Version 7.0)

Dieses Video bezieht sich auf Version 7.0.

War dieser Beitrag hilfreich?
96 von 336 fanden dies hilfreich