Farben, Schrift und Logo im Design festlegen

Im Design Builder legst du die Grundgestaltung deiner Journeys fest: Navigationsleiste mit Logo, Hintergrund, Markenfarben, Schrift und Rundungen.

Dieser Artikel zeigt dir jeden dieser Bereiche mit Beispielen aus einem typischen Stadtwerke-Design.

---

So funktioniert's

Die Einstellungen wirken auf alle Journeys mit diesem Design. Die wichtigste Farbe ist die Primärfarbe: Sie bestimmt Buttons, Auswahlzustände und Fortschritt. Mit Navigationsleiste, Hintergrund und Schrift sorgst du dafür, dass die Journey wie deine Website aussieht.

Öffne dazu Konfiguration > Designs, dein Design und rechts den Tab Design.

Konfiguration

Navigationsleiste

1. Klappe Navigationsleiste auf. Unter Optik wählst du die Hintergrundfarbe der Leiste oben in der Journey und die Topbar-Höhe in Pixeln.

2. Wechsle zu Logo. Wähle über Aus Dateimanager auswählen ein Logo, das schon in epilot liegt, oder lade eine Datei hoch. Unterstützt werden PNG, JPG und SVG.

3. Lege unter Logo-Ausrichtung fest, ob das Logo Links, Zentriert oder Rechts steht, und begrenze die Größe mit Maximale Logo-Höhe.

Hintergrund

4. Unter Hintergrund legst du die Hintergrundfarbe fest. Das ist die äußere Fläche hinter allen Journey-Inhalten.

5. Papierhintergrund ist die Grundfarbe der Flächen hinter den Blöcken. Einzelne Flächen wie Produktkacheln oder die Zusammenfassung können eigene Farben haben.

Farben

6. Unter Farben legst du fünf Grundfarben fest:

• Primär: Hauptfarbe deiner Marke, zum Beispiel für Absenden und Weiter, Fokus- und Auswahlzustände.

• Sekundär: Akzentfarbe für hervorgehobene Produktkacheln und Preisstufen im Block Produkte.

• Error: Fehlermeldungen bei der Validierung, zum Beispiel bei einer ungültigen IBAN.

• Rahmen: Rahmen von Eingabefeldern, Karten, Auswahlfeldern und Checkboxen. Den Rahmen von Schaltflächen stellst du unter Schaltflächen ein.

• Trennlinie: Linien zwischen Zeilen, zum Beispiel in der Zusammenfassung, im Block Adresse und im Block Produkte.

Gutscheine

7. Unter Gutscheine wählst du die Farbe für Gutschein-Chips im Block Gutschein (Gutschein) und für Cashback-Anzeigen (Bonus).

Typografie

8. Unter Typografie > Farbe legst du die Schriftfarben fest:

• Primäre Schriftfarbe: Fließtext und Beschriftungen in der ganzen Journey.

• Sekundäre Schriftfarbe: Hilfetexte, Bildunterschriften und weniger wichtige Beschriftungen.

• Farbe der Überschrift: Überschriften der Schritte und Blöcke.

• Linkfarbe und Link-Hover-Farbe: Links, zum Beispiel zu deinen AGB, und ihre Farbe beim Darüberfahren.

9. Unter Typografie > Schrift wählst du die Schrift. Neben den mitgelieferten Schriften kannst du unter Schriftart hochladen deine Hausschrift hochladen. Unterstützt werden WOFF, WOFF2, TTF und EOT.

Form

10. Unter Form legst du mit Randradius fest, wie stark Ecken abgerundet sind. 0 px bedeutet eckig, 16 px wirkt weich und modern.

11. Prüfe deine Einstellungen in der Vorschau und klicke auf Speichern.

Häufige Fragen

Welche Farbe brauche ich mindestens?

Primär, Hintergrund und die Schriftfarben. Damit sieht die Journey schon nach deiner Marke aus. Alle anderen Felder kannst du leer lassen.

Warum erscheint ein roter Hinweis unter einer Farbe?

Die Farbe hat zu wenig Kontrast zum Hintergrund und ist für manche Menschen schwer lesbar. Mehr dazu in Barrierefreiheit in Journeys.

Mein Logo ist in der Navigationsleiste kaum zu sehen. Was kann ich tun?

Wähle eine Logo-Variante mit genug Kontrast zur Hintergrundfarbe der Leiste, zum Beispiel ein weißes Logo auf dunkler Leiste, und erhöhe bei Bedarf Topbar-Höhe und Maximale Logo-Höhe.