Design Builder - Aufbau und Funktionsweise

Mit dem Design Builder gestaltest du das Aussehen deiner Journeys: Farben, Logo, Schrift, Eingabefelder und Schaltflächen. Ein Design legst du einmal an und weist es danach beliebig vielen Journeys zu.

Dieser Artikel zeigt dir, wie der Design Builder aufgebaut ist, wie du ein Design anlegst und wie du es in der Vorschau prüfst.

---

So funktioniert's

Ein Design ist eine Sammlung von Gestaltungsregeln. Jede Journey verwendet genau ein Design. Änderst du das Design, sehen alle Journeys mit diesem Design sofort neu aus. So bleibt dein Auftritt einheitlich, zum Beispiel wenn deine Stadtwerke zehn Journeys für Strom, Gas, Wärmepumpe und Photovoltaik betreiben.

• Design: Farben, Logo, Schrift, Formen, Eingabefelder, Schaltflächen und Komponenten.

• Erweitert: Custom CSS für Anpassungen, die über die Einstellungen hinausgehen.

Typische Einsatzfälle:

• Ein Hauptdesign: für alle Journeys in deinen Markenfarben.

• Ein Kampagnen-Design: für eine zeitlich begrenzte Aktion, zum Beispiel Kampagne Wärmepumpe 2026.

• Ein Design pro Marke: wenn du Journeys für mehrere Marken oder Partner betreibst.

Konfiguration

Designs-Übersicht öffnen

1. Öffne Konfiguration > Designs. Du siehst alle Designs deiner Organisation mit Design Name, Ersteller, Erstelldatum und Verwendet für.

2. Klicke in der Spalte Verwendet für auf die Anzahl der Elemente, um zu sehen, welche Journeys das Design verwenden.

3. Über die Symbole rechts kopierst du ein Design oder löschst es.

Design anlegen

4. Klicke oben rechts auf Design erstellen. Der Design Builder öffnet sich mit dem Namen Neues Design.

5. Klicke auf den Namen oben links und gib einen eindeutigen Namen ein, zum Beispiel Stadtwerke Musterstadt – Hauptdesign.

6. Passe rechts unter Design die Einstellungen an. Jeder Bereich lässt sich einzeln auf- und zuklappen.

• Navigationsleiste, Hintergrund, Farben, Gutscheine, Typografie und Form: Farben, Schrift und Logo im Design festlegen

• Eingabefelder, Schaltflächen und Komponenten: Eingabefelder, Schaltflächen und Komponenten gestalten

• Erweitert: Custom CSS für Journeys

Design in der Vorschau prüfen

7. Links siehst du die Vorschau. Unter Journey Beispiel zeigt sie eine Beispiel-Journey mit allen wichtigen Blöcken. Über die Schrittleiste unten blätterst du durch die Schritte.

8. Wähle unter Journey vorschau eine deiner eigenen Journeys, zum Beispiel Neukundenanmeldung Strom. So siehst du das Design direkt mit deinen Inhalten.

9. Wechsle über die Symbole oben rechts zwischen Desktop- und Smartphone-Ansicht. Mit Dark Mode vorschau prüfst du die dunkle Darstellung.

Speichern

10. Klicke auf Speichern. epilot prüft dabei, ob deine Farben genug Kontrast haben. Wie du mit Hinweisen umgehst, steht in Barrierefreiheit in Journeys.

11. Bei einem bestehenden Design zeigt dir Design Informationen oben rechts, wer es angelegt hat, wann, und welche Journeys es verwenden. Über das Pfeil-Symbol öffnest du eine Journey direkt.

Standard-Design festlegen

12. Aktiviere unten Als Standard festlegen, um dieses Design zum Standard-Design deiner Organisation zu machen.

13. Weise das Design danach deinen Journeys zu: Design einer Journey zuweisen.

Häufige Fragen

Wirken sich Änderungen am Design sofort auf meine Journeys aus?

Ja. Sobald du speicherst, sehen alle Journeys mit diesem Design neu aus. Teste große Änderungen deshalb zuerst mit einer Kopie des Designs.

Kann ich ein Design für das Portal verwenden?

Der Design Builder hat neben Journey Beispiel auch eine Vorschau Kundenportal. Für das Endkundenportal stehen dort nur ein Teil der Einstellungen zur Verfügung.

Warum sieht meine Journey in der Vorschau anders aus als auf meiner Website?

Prüfe, ob die Journey wirklich dieses Design verwendet (Einstellungen > Design) und ob deine Website eigene Styles mitbringt. Custom CSS wirkt nur auf die neue Journey-Oberfläche.