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: Mit dem Website-Stil und Abschnittsstilen kannst du die Farben für den Text, die Hintergrundbereiche und andere Elemente deiner Website ä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 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. Klicke beim Bearbeiten einer Seite rechts oben auf das Pinselsymbol und dann auf Farben.
  2. Klicke auf Palette bearbeiten, um eine neue Farbpalette auszuwählen. Du kannst aus folgenden Arten von Farbpaletten wählen:
    • Voreinstellungen – Wähle aus einer Reihe von voreingestellten Paletten in kuratierten Farben.
    • Aus Bild ... – Lade ein Bild hoch, um eine auf den markantesten Farben des Bildes basierende Palette zu erstellen.
    • Aus Farbe ... – Wähle mit der Farbauswahl eine Primärfarbe aus und erstelle Paletten, um diese Farbe zu ergänzen.
  3. Um deine Änderungen zu speichern, bewege den Mauszeiger oben links im Seiten-Editor über Fertig und klicke auf Speichern.

colors_-_edit_palette.png

Denken Sie daran:

  • Alle Paletten enthalten immer Schwarz und Weiß, die üblicherweise für Text verwendet werden.
  • Wenn du eine Palette aus einem Bild erstellst, werden die Farben aus den drei dominantesten Farben des Bildes entnommen.
  • In jeder Palette kannst du den Paletten-Editor verwenden, um jede Farbe in der Palette anzupassen.

Ändern von Abschnittsfarben

Deine Farbpalette generiert verschiedene Farbdesigns für deine Seitenabschnitte. Nachdem du Farben für die gesamte Website festgelegt hast, kannst du das Farbdesign eines jeden Abschnitts ändern, um ihm ein einzigartiges Aussehen zu verleihen.

So kannst du erkennen, welches Design ein Abschnitt verwendet:

  1. Klicke beim Bearbeiten einer Seite auf das Pinselsymbol und dann auf Farben.
  2. Scrolle durch deine Seitenvorschau und überprüfe die Labels der Abschnittsdesigns in jedem Abschnitt.
Hinweis: Wenn in einem Abschnitt anstelle eines Design-Labels ein leeres Feld angezeigt wird, wird die Farbe von Überschrift (Groß) wahrscheinlich auf die gleiche Farbe wie jene für den Abschnittshintergrund eingestellt. Um das Design-Label anzuzeigen, klicke auf das Design, das ebenfalls im Menü „Farben“ leer angezeigt wird, und ändere dann die Überschrift (Groß) in eine neue Farbe. Ausführliche Schritte findest du im nächsten Abschnitt.

section_themes_on_preview.png

So änderst du das Farbdesign eines Abschnitts:

  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_theme_editor.png

Der Designtyp (1 oder 2) bestimmt, welche Farbe für den Haupttext in einem Abschnitt gilt und welche Farbe für andere Elemente verwendet wird:

  • Besonders fein 1, Fein 1, Dunkel 1 und Besonders dunkel 1 – Text und Überschriften sind schwarz oder weiß, für den Hintergrund und kleinere Website-Elemente gelten andere Farben.
  • Besonders fein 2, Fein 2, Dunkel 2 und Besonders dunkel 2 – Die Farbe auf der linken Seite der Palette gilt für alle Texte und Überschriften, für den Hintergrund und kleinere Website-Elemente gelten andere Farben.
  • Hell – Die Farbe auf der linken Seite der Palette gilt entweder für den Text (Hell 1) oder den Hintergrund (Hell 2). 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. Klicke beim Bearbeiten einer Seite auf das Pinselsymbol und dann auf Farben.
  2. Klicke auf das Design, das du bearbeiten möchtest.
  3. Klicke 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.
  4. Verwende den Opazitäts-Schieberegler, um die Transparenz zu ändern.
  5. 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.

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 dir nicht sicher bist, welches Design du bearbeiten musst, suche im Bereich der Seite, die 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 verfügt, verwende die Anpassung Hintergrund-Overlay, um die Deckkraft der Overlay-Farbe festzulegen. Wenn der Abschnitt eine Hintergrundfarbe oder ein Video verwendet, lege die Hintergrundfarbe 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 das Menü 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 Anpassung, die du ändern möchtest. Klicke auf den unteren Schieberegler, um eine Farbe auszuwählen, und dann auf das Quadrat oben, um einen Farbton auszuwählen.

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 kannst du nur die Transparenz von Palettenfarben ändern.
  • In Version 7.0 enthalten einige Farbanpassungen keinen Schieberegler für die Deckkraft.

adjust_the_opacity.png

Farbe des Einrückungsrands ändern

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

  • 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. Klicke beim Bearbeiten einer Seite auf das Pinselsymbol und 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.

Video ansehen

Dieses Video bezieht sich auf Version 7.0.

War dieser Beitrag hilfreich?
108 von 372 fanden dies hilfreich