Zum Inhalt springen
Hilfe
Builder-Design und -Einstellungen

Wie funktionieren Farbschemata und wie ändere ich die Farben meines Shops?

Erstelle und bearbeite Farbschemata im Builder-Tab Farben: Hintergrund, Text, Links, Badges, Rahmen, Schatten, primäre und sekundäre Schaltflächen und Formularfelder. Wie Abschnitte ein Schema wählen, Übergeordnetes Farbschema verwenden, das Limit von 9 Schemata und warum Umsortieren Farben ändert.

3 Min. Lesezeit

Ein Farbschema ist ein gespeicherter Satz von Farben. Jeder Abschnitt deines Shops nutzt ein Schema. Du änderst Farben also an einer Stelle, und jeder Abschnitt mit diesem Schema übernimmt sie.

Wo du deine Schemata findest

Öffne den Builder, klicke auf das Zahnradsymbol und öffne den Tab Farben. Unter Schemata siehst du eine Karte pro Schema, benannt Schema 1, Schema 2 und so weiter. Jede Karte zeigt eine kleine Vorschau ihrer Farben.

  • Bearbeiten: Klicke auf eine Karte. Es öffnet sich ein Bereich mit einer Live-Vorschau oben und allen Farben darunter.
  • Hinzufügen: Klicke auf die Plus-Karte am Ende. Das neue Schema beginnt als Kopie deines letzten Schemas.
  • Duplizieren oder Löschen: Klicke mit der rechten Maustaste auf eine Karte, oder nutze die Menü-Schaltfläche oben im Schema-Bereich.
  • Umsortieren: Zieh eine Karte an ihrem Griff.

Du kannst bis zu 9 Schemata haben. Wenn du 9 erreichst, zeigt die Plus-Karte (9/9) und Duplizieren zeigt Limit erreicht. Mindestens ein Schema bleibt immer, deshalb lässt sich das letzte nicht löschen.

Die Farben eines Schemas

Allgemein

  • Hintergrund: der Hintergrund des Abschnitts.
  • Innerer Hintergrund: Boxen und Karten innerhalb des Abschnitts.
  • Überschrift: Titel.
  • Text: Absätze und normaler Text.
  • Wichtiger Text: Text, der auffallen muss, etwa Preise und Countdown-Zahlen.
  • Badge-Hintergrund: die Füllung der Spar-Badges, der Bundle-Bänder und der Bundle-Sparpillen.
  • Links und Hover-Links: Links, und Links unter der Maus.
  • Rand: Linien und Trenner.
  • Umriss: Fokusringe und Umrisse, zum Beispiel wenn sich ein Kunde mit der Tastatur durch die Seite bewegt.
  • Schatten: die Farbe der Schatten.

Primäre Schaltfläche und sekundäre Schaltfläche

Jede hat Hintergrund, Text und Rand, dazu Hover-Hintergrund, Hover-Text und Hover-Rahmen für den Moment, in dem die Maus über der Schaltfläche ist. Die primäre Schaltfläche ist deine wichtigste Handlungsaufforderung, etwa die Kaufen-Schaltfläche.

Eingabefeld

Formularfelder: Hintergrund, Label, Text (was der Kunde eintippt), Rand und Hover-Hintergrund.

Wie Abschnitte ein Schema wählen

Wähle einen Abschnitt aus und suche seine Einstellung Farbschema. Wähle ein Schema aus der Liste. Die Liste enthält einen Link zu deinen Farbschemata, falls du sie bearbeiten willst.

Viele Blöcke innerhalb eines Abschnitts haben einen Schalter Übergeordnetes Farbschema verwenden. Ist er an, nutzt der Block die Farben des umgebenden Abschnitts. Ist er aus, erscheint eine Einstellung Farbschema, damit der Block sein eigenes Schema nutzen kann. Im Block zum Schreiben einer Bewertung sorgt Schema erben dafür, dass seine Schaltfläche die Farben des Abschnitts nutzt. Ist es aus, wählst du ein Button-Farbschema. Weitere Stellen, die ein Schema nutzen, sind die Menüfelder der Kopfzeile und die Wartungsseite.

Gut zu wissen

  • Abschnitte merken sich die Nummer, nicht die Farben. Wenn du Schema 3 an die erste Stelle ziehst, zeigt jeder Abschnitt, der Schema 1 genutzt hat, jetzt die Farben, die dorthin gewandert sind. Prüfe deine Seiten nach dem Umsortieren.
  • Beim Löschen eines Schemas wechseln seine Abschnitte zum Schema direkt davor (oder zum ersten Schema). Beim Duplizieren kommt die Kopie direkt hinter das Original, und jeder Abschnitt behält seine aktuellen Farben.
  • Schemata gehören zu dem Markt, den du bearbeitest. Wechsle zuerst über die Flagge den Markt, wenn du in mehreren Märkten verkaufst.
  • Änderungen gehen live, wenn du auf Veröffentlichen klickst.

Tipps

  • Nutze für die meisten Abschnitte ein ruhiges, helles Schema und ein kräftiges Schema für den Hero und Handlungsaufforderungen.
  • Mach die primäre Schaltfläche klar unterscheidbar vom Hintergrund.
  • Prüfe, ob der Text auf seinem Hintergrund gut lesbar ist, auch auf einem Handy bei Tageslicht.

Brauchen Sie noch Hilfe?

Schreiben Sie uns, wir antworten Ihnen.

Kontaktieren Sie uns