Wähle eine Palette für deine Website aus und passe dann die Farben bestimmter Elemente an.

Verwende Farbpaletten und Farbdesign, um Farben auf deiner gesamten Website zu gestalten, egal ob du ein Schwarz-Weiß-Design oder auffällige Farbkombinationen bevorzugst.

Diese Farboptionen sind in Websites der Version 7.1 verfügbar. Websites der Version 7.0 haben unterschiedliche Farbeinstellungen.

Video zum Ändern der Website-Farben

In diesem Video findest du eine Anleitung zur Farbpalette und den Farbdesigns deiner Website.

Farben mit Farbpaletten für die gesamte Website ändern

Alle Squarespace-Websites verwenden eine Palette mit fünf Farben für ein einheitliches visuelles Design. Du kannst die Farben auf deiner Website sofort ändern, indem du die Palette anpasst oder eine neue Palette auswählst, wodurch die Farben der Palette auf deiner gesamten Webseite angewendet werden.

Deine aktuelle Farbpalette bearbeiten

So bearbeitest du die ausgewählte Farbpalette:

1. Öffne das Menü „Website-Stile“.
2. Klicke neben Farben auf ＞.
3. Klicke auf Palette bearbeiten. Paletten verwenden fünf Farben, und die meisten enthalten Schwarz und Weiß, die für Text verwendet werden.
4. Klicke auf eine der Farben der Palette und dann in der Farbauswahl auf die Schieberegler und ziehe sie, um die Farben zu ändern. Wenn du einen Code für eine Farbe hast, die du verwenden möchtest, kannst du den Hex-, RGB- oder HSL-Code in das Feld unten eingeben.
5. Wiederhole diese Schritte für jede Farbe in der Palette und klicke dann auf Speichern.

Eine neue Farbpalette festlegen

So legst du eine neue Farbpalette fest:

1. Öffne das Menü „Website-Stile“.
2. Klicke neben Farben auf ＞.
3. Klicke auf Palette bearbeiten und wähle dann Folgendes aus:
   • Voreinstellungen – Wähle aus einer Reihe von voreingestellten Paletten in kuratierten Farben.
   • Aus Bild … – Lade ein Bild hoch, um eine auf den markantesten drei 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.
4. Klicken Sie auf Speichern.

Abschnittsfarben mit Designs ändern

Deine Palette legt die Farben für deine Website fest, und die Farbdesigns deiner Website verwenden diese Farben in verschiedenen Kombinationen. Jede Palette hat zehn Farbdesigns, sodass du deinen Abschnitten besondere Looks verleihen kannst, die dennoch zusammenpassen.

In einigen Fällen werden Text- und Button-Farben standardmäßig auf Weiß oder Schwarz gesetzt, um einen besseren Kontrast zur Hintergrundfarbe zu erzielen. Lies unsere Best Practices zur Barrierefreiheit bei der Auswahl von Farben.

Ein Abschnittsdesign festlegen

Auswahl eines Farbdesigns für einen Abschnitt:

1. Öffne das Menü „Seiten“.
2. Klicke auf die Seite, die du bearbeiten möchtest, und klicke dann oben links auf Bearbeiten.
3. Klicke in dem Abschnitt, den du ändern möchtest, auf Abschnitt bearbeiten.
4. Klicke auf Farben und dann auf ein Farbdesign.
5. Klicken Sie auf Speichern.

Hinweis: Wenn du ein neues Farbdesign auswählst, werden alle Farben im Abschnitt geändert, einschließlich aller Änderungen der Textfarbe, die in der Text-Block-Werkzeugleiste vorgenommen wurden.

Wie kann ich feststellen, welches Design ein Seitenabschnitt verwendet?

So überprüfst du, welches Farbdesign ein Abschnitt verwendet:

1. Öffne das Menü „Seiten“.
2. Klicke auf die Seite, die du bearbeiten möchtest.
3. Scrolle durch deine Website-Vorschau und überprüfe die Farbdesign-Labels, die in der oberen rechten Ecke jedes Abschnitts angezeigt werden.

Warum ist mein Farbdesign-Label leer?

Wenn anstelle eines Design-Labels ein leeres Feld angezeigt wird, stimmen möglicherweise die Schriftfarbe und die Hintergrundfarbe überein, wodurch der Text unsichtbar wird. So machst du das Design-Label sichtbar:

1. Öffne das Menü „Website-Stile“.
2. Klicke neben Farben auf ＞.
3. Klicke auf das Design, das im Menü Farben leer angezeigt wird.
4. Klicke auf Überschrift (Groß) und ändere die Farbe.
5. Klicken Sie auf Speichern.

Welche Designs verwenden andere Website-Bereiche?

Andere Bereiche deiner Website haben spezifische Farbdesign-Einstellungen:

• Mitteilungsleiste – Wenn dein Website-Header ein Farbdesign hat, folgt die Ankündigungsleiste demselben Design. Andernfalls folgt es dem Standard-Farbdesign.
• Integrierte Seiten – Integrierte Website-Seiten, wie die standardmäßige 404-Seite oder die Warenkorb-Seite, folgen dem Standard-Farbdesign deines Templates.
• Menü-Button für mobiles Overlay – Lege ein Farbdesign für dein mobiles Overlay fest, wenn du deinen Website-Header bearbeitest.
• Website-Header – Lege ein Farbdesign oder eine benutzerdefinierte Farbe für deinen Website-Header fest.

Farben bestimmter Website-Elemente ändern

Du kannst Farbanpassungen für bestimmte Elemente in jedem Farbdesign anpassen. Alle Änderungen an den Farben eines Designs gelten für alle Bereiche deiner Website, die dieses Design verwenden.

So bearbeitest du ein Design:

1. Öffne das Menü „Website-Stile“.
2. Klicke neben Farben auf ＞.
3. Klicke auf das Design, das du bearbeiten möchtest. Wenn du dir nicht sicher bist, welches Design du bearbeiten musst, suche im Abschnitt, den du ändern möchtest, nach dem Farbpaletten-Label.
4. 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.
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.
6. 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.

Verwende die Farbauswahl, um eine benutzerdefinierte Farbe auszuwählen

Jede Farbanpassung hat einen Kreis neben dem Label, der die aktuelle Farbe für dieses Element anzeigt. Typischerweise stammen diese Farben aus der Palette deiner Website.

So wählst du eine benutzerdefinierte Farbe mit der Farbauswahl aus:

1. Klicke auf die Anpassung, die du ändern möchtest.
2. Klicke auf Benutzerdefiniert, um die Farbauswahl zu öffnen.
3. Klicke auf den unteren Schieberegler, um eine Farbe auszuwählen, und klicke dann auf das Quadrat oben, um einen Farbton auszuwählen, oder verwende das Wertfeld, um einen bestimmten Farbcode einzugeben.
4. Wenn die Anpassung über einen Opazitäts-Schieberegler verfügt, kannst du damit die Transparenz ändern.

Eine bestimmte Farbe mit einem Farbcode auswählen

Wenn du den Wert für die gewünschte Farbe kennst, kannst du auf das Wertfeld unter der Farbauswahl klicken, um sie hinzuzufügen. Um einen bestimmten Farbwert zu finden, kannst du externe Websites wie z. B. color-hex.com oder imagecolorpicker.com nutzen.

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: weiß

Tipp: Das Wertfeld zeigt automatisch den Farbcode an, wenn du den Farbregler verwendest, um eine Farbe zu finden. Du kannst diesen Code kopieren und einfügen, um die gleiche Farbe zu anderen Anpassungen im Design hinzuzufügen.

Die Transparenz einer Farbe ändern

Um die Transparenz einer benutzerdefinierten 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. Nicht alle Anpassungen verfügen über einen Deckkraft-Schieberegler.

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

Was sind Standard-Farbdesigns?

Jede Website für Version 7.1 hat eine Standard-Farbpalette. Diese Standard-Farbpalette 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
• Lücken auf der Seite, die durch horizontales Scrollen über den Seitenrand hinaus entstehen
• Produkt-Schnellansicht-Seite
• Warenkorb-Seite

Wie finde ich das Standard-Farbdesign meiner Website?

So findest du das Standard-Design deines Templates:

1. Öffne das Menü „Seiten“.
2. Klicke auf einer Seite auf Bearbeiten und dann auf Abschnitt hinzufügen.
3. Klicke auf + Leeres Element hinzufügen und dann auf Abschnitt. Neue Abschnitte beginnen mit dem Standarddesign.
4. Klicke auf das Pinsel-Symbol, um das Menü „Website-Stile“ zu öffnen, und klicke dann neben Farben auf ＞.
5. Achte auf das Design-Label im neuen Abschnitt.

Kann ich das Standarddesign meiner Website ändern?

Nein. Es ist nicht möglich, ein neues Standarddesign für deine Website zuzuweisen, aber wenn du dein Standarddesign kennst, kannst du deine Farbpalette oder die individuellen Farbanpassungen des Designs ändern, um deine integrierten Seiten und andere Abschnitte, die das Standarddesign verwenden, anzupassen.

Wie ändere ich die Farbe zwischen Seitenabschnitten und meinem Footer?

Zwischen dem letzten Abschnitt auf einer Seite und dem Footer oder unter dem Footer kann eine Lücke auftreten. Diese Lücken verwenden die Hintergrundfarbe des Abschnitts deines Standarddesigns. Wenn dein Abschnitt und dein Footer andere Farbdesigns als deine Standardeinstellungen verwenden, können diese Lücken auffälliger sein.

So kannst du die Farbe der Lücke an deine Seitenabschnitte oder deinen Footer anpassen:

1. Öffne das Menü „Website-Stile“.
2. Klicke neben Farben auf ＞.
3. Klicke auf dein Standard-Design.
4. Klicke auf Hintergrundfarbe und ändere sie so, dass sie der Hintergrundfarbe des Abschnitts im Farbdesign deines Seitenabschnitts oder Footers entspricht.

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.

Block-Hintergrundfarben ändern

Du kannst einigen Blöcken eine Hintergrundfarbe hinzufügen. Dies ist eine großartige Möglichkeit, einen Block hervorzuheben oder überlappende Blöcke im Kreativen Editor sichtbarer zu machen.

Du kannst diesen Blöcken Hintergrundfarben hinzufügen:

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