Wähle ein Farbschema für deine Website aus und wende dann bestimmte Farben auf verschiedene Seitenabschnitte an.

Egal, ob du ein Schwarzweiß-Design oder gewagte Farbkombinationen bevorzugst: Mit Website-Stilen und Abschnittsstilen kannst du die Farben 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 du loslegst

• 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.
• In Text-Blöcken der Version 7.1 kannst du die Farbe einer bestimmten Textstelle ändern, z. B. eines einzelnen Buchstabens oder Wortes in einem Satz. Verwende dazu in Version 7.0 oder in anderen Textbereichen 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 untenstehenden Abschnitt findest du die konkreten Schritte dafür.
• Tipps zur Auswahl der besten Farben für deine Website findest du unter Die richtigen Schriftarten und Farben auswählen.
• Bewährte Methoden zur Barrierefreiheit findest du unter Barrierefreie Website-Inhalte erstellen. 

Ä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. Klicke auf Speichern, um deine Änderungen zu speichern und die Bearbeitung fortzusetzen, oder auf Beenden und dann auf Speichern, um den Editor zu schließen.

Denk 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 mit dem Paletten-Editor die einzelnen Farben in der Palette anpassen.

Ändern von Abschnittsfarben

Deine Farbpalette generiert verschiedene Farbdesigns für deine Seitenabschnitte. Wenn 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.

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 dieselbe Farbe eingestellt wie jene für den Abschnittshintergrund. Um das Design-Label anzuzeigen, klicke auf das Design, das ebenfalls im Menü „Farben“ leer angezeigt wird, und ändere dann Überschrift (Groß) in eine neue Farbe. Ausführliche Schritte findest du im nächsten Abschnitt.

So änderst du das Farbdesign eines Abschnitts:

1. Öffne das Menü „Seiten“.
2. Wählen Sie die Seite aus, die Sie bearbeiten möchten, und klicken Sie oben links auf Bearbeiten.
3. Klicke auf Abschnitt bearbeiten oder auf das Bleistiftsymbol des Abschnitts, den du ändern möchtest.
4. Klicke im Tab Farben auf ein Design, um es auf diesen Abschnitt anzuwenden.
5. Klicke auf Speichern, um deine Änderungen zu speichern und die Bearbeitung fortzusetzen, oder auf Beenden und dann auf Speichern, um den Editor zu schließen.

Hinweis: Wenn du das Farbdesign eines Abschnitts änderst, werden alle Farben für diesen Abschnitt zurückgesetzt, einschließlich aller Änderungen an der Textfarbe, die in der Text-Block-Werkzeugleiste vorgenommen wurden.

Arten von Designs

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.

Designs für andere Website-Bereiche

Gehe wie folgt vor, um die Farbdesigns für diese Bereiche deiner Website zu finden:

• Mitteilungsleiste – Die Mitteilungsleiste entspricht immer dem Farbdesign deines Headers.
• Menü-Button des mobilen Overlays – Die Farben für das mobile Overlay werden in deinem Header festgelegt.
• Abschnittshintergrund – Öffne das Farben-Menü, suche nach dem Design-Label und klicke dann auf dieses Design, um alle Farben zu öffnen. Finde die Farbe neben dem Abschnittshintergrund.
• Integrierte Seiten – Die Standard-404-Seite, die Warenkorbseite, die Bestellbestätigungsseite und die integrierte Suchseite verwenden alle das Standard-Farbschema deines Templates.

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 Anpassung, die du ändern möchtest, und wähle dann eine neue Farbe aus. Du kannst eine voreingestellte Farbe aus dem 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. Klicke auf Speichern, um deine Änderungen zu speichern und die Bearbeitung fortzusetzen, oder auf Beenden und dann auf Speichern, um den Editor zu schließen.

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.
• Das Menü Design bearbeiten zeigt alle möglichen Farbanpassungen für deine Website an, auch wenn die Seite, die du gerade bearbeitest, diese Elemente nicht enthält. Beispielsweise werden alle Blog-Farboptionen angezeigt, auch wenn du eine Layout-Seite bearbeitest.
• 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 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.

Wenn du den Wert für die gewünschte Farbe kennst, kannst du auch auf das Feld „Wert“ klicken, um die Farbe zu bearbeiten. Dieses Feld akzeptiert eines 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: 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.

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.

Tipp: Wenn du den Deckkraft-Schieberegler verwendest, um die Hintergrundfarbe eines Abschnitts transparent zu machen, kann die Hintergrundfarbe des Standard-Farbschemas deines Templates durchscheinen.

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 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. Klicke auf Speichern, um deine Änderungen zu speichern und die Bearbeitung fortzusetzen, oder auf Beenden und dann auf Speichern, um den Editor zu schließen.

Block-Hintergrundfarben ändern

Block-Hintergrundfarben werden nur auf Websites der Version 7.1 unterstützt.

Einige Blöcke können eine Hintergrundfarbe haben. Dies ist eine großartige Möglichkeit, einen Block hervorzuheben oder überlappende Blöcke im Kreativen Editor sichtbarer zu machen. Füge Hintergrundfarben zu den folgenden Blöcken hinzu, indem du im Tab Design des Blocks den Schalter Hintergrund aktivierst:

• Akkordeon-Blöcke
• Formular-Blöcke
• Newsletter-Blöcke
• Zitat-Blöcke
• Übersichts-Blöcke

Du kannst die Hintergrundfarben für Text-Blöcke auch aktivieren, indem du auf das Block-Hintergrund-Symbol in der Text-Werkzeugleiste klickst.

Klicke nach dem Aktivieren des Hintergrunds auf Farbe, um eine Farbe aus dem Farbschema deiner Website oder eine benutzerdefinierte Farbe auszuwählen. Erstelle Blöcke mit passenden Hintergrundfarben oder gib jedem Block eine eigene Farbe.

Standard-Farbschemen

Jedes Template für Version 7.1 hat ein Standard-Farbschema. Dieses Design wird automatisch auf die folgenden integrierten Seiten und Bereiche deiner Website angewendet:

• Ansicht „Zugriff verweigert“
• Mitteilungsleiste
• Integrierte Suchseite
• Standard-404-Seite
• Dynamischer Header über einem Hintergrundbild oder -video
• Bestätigungsseite für Bestellungen
• Produkt-Schnellansicht-Seite
• Abschnitte mit einem Hintergrundbild oder -video
• Warenkorb-Seite

Du kannst diesen Bereichen deiner Website kein anderes Design zuweisen, aber du kannst Änderungen am Standard-Design vornehmen, um diese Seiten anzupassen. So findest du das Standard-Design deines Templates:

1. Füge einen leeren Abschnitt zu einer Seite hinzu.
2. Öffne das Menü „Website-Stile“.
3. Klicke auf Farben und suche nach dem Design-Label. Neuen Abschnitten wird das Standard-Farbschema zugewiesen.

Tipp: Eine andere Möglichkeit, das Standard-Farbschema zu bestimmen, besteht darin, eine der System-Seiten zu öffnen, / zu drücken und nach Website-Stile zu suchen. Du kannst auf das Farben-Menü zugreifen und den Design-Indikator von dort aus überprüfen.

Lücke zwischen Seitenabschnitt und Footer

Auf Seiten mit nur einem Abschnitt oder sehr kurzen Seiten kann eine Lücke zwischen dem letzten Seitenabschnitt und dem Footer der Seite auftreten. Die Lücke übernimmt die Farbe des Abschnittshintergrunds deines Standard-Designs.

Wenn die Lücke eine andere Farbe hat, z. B. wenn dein Abschnitt und dein Footer andere Farbschemen als deine Standardfarbe verwenden, ist diese Lücke möglicherweise auffälliger.

Um dies zu beheben, lege die Abschnittshintergrundfarbe deines Standard-Designs so fest, dass sie mit der Hintergrundfarbe deines Seitenabschnitts oder dem Design deines Footers übereinstimmt.

Tipp: Wenn du die Farbe deines Abschnittshintergrunds deines Standard-Designs mit der Hintergrundfarbe deiner Seite abstimmst, sieht deine Seite beim Laden einheitlich aus. Hintergrundfarben werden vor Bildern geladen.

Ä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.

Öffne das Design-Menü und klicke dann auf Website-Stile, um die Farben deiner Website manuell mit Stil-Anpassungen festzulegen. Die spezifischen Anpassungen hängen vom Template deiner Website ab. Lies die Anleitungen deines Templates durch, um ausführlichere 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 vorgenommen 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, werden die entsprechenden Anpassungen angezeigt. Du kannst auch eine Vorschau der Stilbearbeitungen auf der ausgewählten Seite sehen, während du sie vornimmst.

Um Anpassungen für ein spezifisches Element auf der Seite zu finden, klicke das Element in der Vorschau an. Website-Stile zeigen nur die Stil-Anpassungen für das entsprechende Element an. Der Rest bleibt verborgen. Diese Abkürzung 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.

So ändern Sie die Farben Ihrer Website:

1. Öffne das Seiten-Menü und wähle die Seite aus, die du ändern möchtest.
2. Wenn in der Seitenvorschau die richtige Seite angezeigt wird, kehre zum Menü Website zurück.
3. Klicke auf Design und dann auf Website-Stile. 
4. Scrolle nach unten, um alle verfügbaren Anpassungen auf der aufgerufenen Seite zu überprüfen. 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

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

Denk 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.