Farbschemas

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.

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 Wähle einen voreingestellten Farbverlauf aus oder verwende die Farbverlaufsauswahl, um deinen Akzentfarbverlauf anzupassen.
Akzent 2 Farbe kann für Schaltflächen und den Hintergrund mancher Abschnitte hinzugefügt werden.
Akzent 2 Farbverlauf Wähle einen voreingestellten Farbverlauf aus oder verwende die Farbverlaufsauswahl, um deinen Akzentfarbverlauf anzupassen.
Hintergrund 1 Farbe kann für Schaltflächen und den Hintergrund mancher Abschnitte hinzugefügt werden.
Hintergrund 1 Farbverlauf Wähle einen voreingestellten Farbverlauf aus oder verwende die Farbverlaufsauswahl, um deinen Hintergrundfarbverlauf anzupassen.
Hintergrund 2 Farbe kann für Schaltflächen und den Hintergrund mancher Abschnitte hinzugefügt werden.
Hintergrund 2 Farbverlauf Wähle einen voreingestellten Farbverlauf aus oder verwende die Farbverlaufsauswahl, um deinen Hintergrundfarbverlauf anzupassen.
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 ein Farbschema auswählen kannst, ermöglichen es dir auch, einen Farbverlauf zu verwenden. In Dawn kannst du beispielsweise Farbverläufe für die Farben deiner Marke einrichten und statt der Akzent- und Hintergrund-Standardfarboptionen verwenden.

Farbschema verwalten

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

  1. Klicke auf Theme-Einstellungen unten in deiner Seitenleiste.
  2. Klicke auf Farben.
  3. 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.
  4. 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.

Farbverläufe

In Dawn kannst du Farbverläufe für visuell interessante Hintergrundoptionen einrichten. Die Einstellung color_background wird verwendet, um die CSS-Hintergrund-Eigenschaft anzupassen.

Mit der Farbverlaufsauswahl kannst du die Farben, den Verlaufsstil, den Winkel, die Position und die Deckkraft des Farbverlaufs auswählen. Die in der Farbverlaufsauswahl gewählten Optionen werden in Echtzeit im Theme-Editor angezeigt. Du kannst auch mit CSS-Code einen Hintergrund mit Farbverlauf erstellen und die enthaltene Validierungsprüfung nutzen.

Farbverlauf einrichten

  1. Klicke auf Theme-Einstellungen.
  2. Klicke auf Farben.
  3. Wähle eine der Farbverlaufsoptionen aus.

    Wenn du noch keinen Farbverlauf eingerichtet hast, werden dir mehrere voreingestellte Optionen zur Auswahl angezeigt. Wähle einen voreingestellten Farbverlauf aus, um das Optionsfenster zu öffnen.

    Wenn du bereits einen Farbverlauf eingerichtet hast, wird das Optionsfenster direkt geöffnet, wenn du auf eine Farbverlaufsoption klickst.

  4. Wähle deine Farbverlaufsoptionen aus:

  • Du kannst zwischen einem linearen und einem radialen Farbverlauf wählen. Verwende die Schaltflächen, um deinen bevorzugten Farbverlaufsstil auszuwählen.
  • Der Winkel deines Farbverlaufs kann mit den Aufwärts- und Abwärtspfeilen festgelegt werden. Wenn du auf das Aufwärts- oder Abwärtssymbol klickst, erhöht oder verringert sich der Winkel jeweils um 5 Prozent.
  • Verwende den Schieberegler, um die Position deines Farbverlaufs auszuwählen, oder gib einen numerischen Wert in das Feld ein.
  • Du kannst einen bestimmten Hex-Farbcode eingeben oder den Farbschieberegler verwenden, um einen Farbton zu wählen. Kürzlich ausgewählte Farben werden unten im Fenster mit den Farbverlaufsoptionen angezeigt.
  • Wenn dein Farbverlauf deckend sein soll, verwende den Schieberegler rechts, um die Transparenz deines Farbverlaufs auszuwählen. Du kannst auch einen Prozentsatz in das Feld neben dem Hex-Farbcode eingeben.
  1. Klicke auf Speichern.

Farbverlaufsauswahl im Theme-Editor

Farbverläufe mit CSS festlegen

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.

Schritte:

  1. Klicke auf Theme-Einstellungen.
  2. Klicke auf Farben.
  3. Klicke auf den Farbverlauf, den du bearbeiten möchtest.
  4. Klicke auf den Pfeil neben "Farbverlauf" und wähle CSS aus.
  5. Tippe oder füge den Code des Farbverlaufs in das Feld CSS-Code ein. Die Vorschau des Theme-Editors zeigt deinen Farbverlauf an der entsprechenden Stelle an.
  6. Klicke auf Speichern.
    Das Feld für den CSS-Code des Farbverlaufs im Theme-Editor

Einen Farbverlauf entfernen

So setzt du einen Farbverlauf zurück oder entfernst ihn:

  1. Klicke auf Theme-Einstellungen.
  2. Klicke auf Farben.
  3. Klicke auf den Farbverlauf, den du bearbeiten möchtest.
  4. Klicke auf Farbverlauf entfernen
  5. Klicke auf Speichern.

Bereit, mit Shopify zu verkaufen?

Kostenlos testen