Farbgebungen in Dawn

In verschiedenen Abschnitten des Themes (z. B. Rich Text, Bildbanner und Kategorieliste) kannst du ein Farbschema aus den Farben auswählen, die du in den Theme-Einstellungen festgelegt hast, und auf diesen Abschnitt anwenden. Für dein Theme wird ein Standard-Farbschema verwendet, das jederzeit im Theme-Editor geändert werden kann. Durch das Hinzufügen deiner Markenfarben wird eine kohärente Anwendung deiner Farbpalette in deinem Onlineshop sichergestellt.

Farbschema verwalten

Das Farbschema deines Shops wird in deinen Theme-Einstellungen festgelegt.

  1. Klicke unten in der Seitenleiste auf Theme-Einstellungen. 3. Klicke auf Farben. 5. Um eine Farbe in deinem Theme zu ändern, klicke auf die Farbe und verwende die Farbauswahl oder gib den Wert der neuen Farbe in das Textfeld ein. 6. Klicke auf Speichern.

Verwende für gleichmäßige Farben die Farbauswahl, um eine neue Farbe auszuwählen, oder gib den Wert der Farbe in das Textfeld ein. Das Feld akzeptiert Farbnamen (z. B. red, black, blue), RGB oder hexadezimale Farbwerte.

Klicke für einen Farbverlauf auf das Farbfeld und tippe bzw. füge den CSS-Code des Farbverlaufs in das Feld ein (z. B. linear-gradient(red, green), radial-gradient(red, green) oder conic-gradient(red, green)). Der Theme-Editor zeigt eine Fehlermeldung an, wenn CSS-Code für den Farbverlauf Sonderzeichen, Bilder oder URLs enthält. Wenn dein CSS-Code gültig ist, zeigt die Vorschau des Theme-Editors den ausgewählten Farbverlauf an der entsprechenden Stelle an.

Das Feld für den CSS-Code des Farbverlaufs im Theme-Editor

Farbeinstellungen

Der Hintergrund von Bildern und Bild-Padding können in deinem Theme-Editor festgelegt werden. Verwende das Dropdown-Menü, um zwischen Akzent 1, Akzent 1 Farbverlauf, Akzent 2, Akzent 2 Farbverlauf, Hintergrund 1, Hintergrund 1 Farbverlauf, Hintergrund 2, Hintergrund 2 Farbverlauf oder Invertiert zu wählen. Du kannst die ausgewählten Farbschemas im Vorschaufenster deines Theme-Editors anzeigen.

Einstellung Beschreibung
Text Die Farbe kann auf Text in Abschnitten oder Blöcken angewendet werden.
Akzent 1 Farbe kann für Schaltflächen und den Hintergrund mancher Abschnitte hinzugefügt werden.
Akzent 1 Farbverlauf Gib den CSS-Code des Farbverlaufs ein, um den gewünschten Verlauf zu generieren.
Akzent 2 Farbe kann für Schaltflächen und den Hintergrund mancher Abschnitte hinzugefügt werden.
Akzent 2 Farbverlauf Gib den CSS-Code des Farbverlaufs ein, um den gewünschten Verlauf zu generieren.
Hintergrund 1 Farbe kann für Schaltflächen und den Hintergrund mancher Abschnitte hinzugefügt werden.
Hintergrund 1 Farbverlauf Gib den CSS-Code des Farbverlaufs ein, um den gewünschten Verlauf zu generieren.
Hintergrund 2 Farbe kann für Schaltflächen und den Hintergrund mancher Abschnitte hinzugefügt werden.
Hintergrund 2 Farbverlauf Gib den CSS-Code des Farbverlaufs ein, um den gewünschten Verlauf zu generieren.
Invertiert Farbe kann für Schaltflächen und den Hintergrund mancher Abschnitte hinzugefügt werden. Verwendet "Hintergrund 1" als Textfarbe, und die Textfarbe als Hintergrundfarbe.

Einige der Einstellungen, mit denen du das verwendete Farbschema auswählen kannst, ermöglichen es dir auch, einen Farbverlauf zu verwenden. In Dawn, dem ersten kostenlosen Shopify-Theme für Online Store 2.0, kannst du z. B. Farbverläufe für die Farben deiner Marke einrichten und statt der Akzent- und Hintergrund-Standardfarboptionen verwenden.

Farbverlauf einrichten

Dawn verwendet die Einstellung color_background, um die CSS-Hintergrund-Eigenschaft anzupassen. So kannst du visuell interessante Hintergrundoptionen wie Farbverläufe erstellen.

Die meisten Werte der CSS-Eigenschaft background können verwendet werden, um eine Hintergrundfarbe festzulegen. Du kannst dieses Feld für eine gleichmäßige Farbe verwenden (z. B. erzeugen #000000, black, rgb(0,0,0,0), rgba(0,0,0,0), hsl(0, 0%, 0%) und hsla(0, 0%, 0%, 1) jeweils einen gleichmäßigen schwarzen Hintergrund) oder für einen Farbverlauf (z. B. linear-gradient(red, green), radial-gradient(red, green) oder conic-gradient(red, green)). Farbverläufe können auch wiederholt werden.

Die Einstellung für die Hintergrundfarbe verwendet einen CSS-Code und enthält eine Validierungsprüfung, die eine Warnung anzeigt, wenn sich Bilder, Sonderzeichen oder URLs in deinem CSS-Code befinden. Wenn der CSS-Hintergrundcode gültig ist, zeigt der Theme-Editor im Vorschaufenster eine Vorschau des Farbverlaufs an.

Bereit, mit Shopify zu verkaufen?

Kostenlos ausprobieren