Mit dem Design Builder kannst du deine Journeys individuell gestalten und diesen somit ein einzigartiges Design verleihen. Wie genau der Design-Builder funktioniert kannst du in diesem Artikel nachlesen.

Übersichtsseite des Design Builders

Sobald du dich in epilot eingeloggt hast, findest du den Design-Builder unter der Kategorie "Konfiguration" im Navigationsmenü. 

Mit einem Klick auf das Design-Builder-Symbol öffnet sich zunächst einmal eine Übersichtsseite, auf der alle von dir angelegten Designs im Rahmen einer Tabelle angezeigt werden. In den einzelnen Spalten kannst du folgende Informationen zu den jeweiligen Designs direkt einsehen: 

• Marke, die diesem Design zugeordnet ist
• Name des Designs
• Name der Person, die das Design angelegt hat
• Datum, an dem das Design erstellt wurde
• Für welche Strecke(n) das Design verwendet wird  

Sofern du ein Design bearbeiten möchtest, genügt ein einfacher Klick auf die entsprechende Zeile. Für den Fall, dass du ein Design löschen möchtest, musst du nur auf das "Mülleimer"-Symbol klicken. Das Symbol findest du innerhalb der Tabelle auf der rechten Seite der einzelnen Einträge. Beachte hierbei allerdings, dass du ein Design nur löschen kannst, wenn dieses (noch) nicht in Benutzung ist.   

Neues Design erstellen 

Sofern du ein neues Design anlegen möchtest, klickst du einfach auf "Erstelle Design" in der oberen rechten Ecke der Übersichtsseite. 

Aufbau des Vorschau-Fensters

Im Folgenden erscheint nun innerhalb des linken Fensters eine Vorschau der konfigurierbaren Strecke. Außerdem kannst du mit einem Klick auf das "Desktop"- bzw. "Smartphone"-Symbol prüfen, wie die jeweiligen Designs auf den entsprechenden Geräten aussehen würden. 

Sofern du dem Design einen Namen zuordnen möchtest, klickst du einfach auf das Feld "Design-Name" und trägst den gewünschten Titel in das Textfeld ein. 

Unter dem Punkt "Design Informationen" kannst du zudem noch einmal nachschauen, wer das entsprechende Design angelegt hat, wann dieses erstellt wurde und welchen Strecken das Design zugeordnet ist. Dies geht allerdings nur, wenn du ein bereits vorhandenes Design bearbeitest. Beim Erstellen eines neuen Design sind die "Design Informationen" nicht abrufbar. 

Unterhalb des Vorschau-Fensters findest du die einzelnen Seiten der jeweiligen Strecke. So kannst du dich bei der visuellen Anpassung einer Strecke flexibel durch die unterschiedlichen Seiten klicken und direkt nachschauen, wie sich deine Design-Anpassungen auf die gesamte Strecke auswirken.

Design der Strecke im Einstellungsmenü anpassen

Neben dem Vorschau-Fenster findest du auf der rechten Seite das Menü "Einstellungen". Hier kannst du die von dir ausgewählte Strecke im Rahmen von vier unterschiedlichen Komponenten flexibel gestalten. 

Navigationsleiste

Im Reiter "Navigationsleiste" kannst du diese nach Belieben farblich gestalten und ein Logo hochladen. Ersteres war in der alten Version des Design-Builders noch nicht möglich. Um die Farbe der Leiste anzupassen, klickst du einfach auf den Punkt "Optik".

Hier bestimmt du zunächst einmal die Farbdefinition. Du hast die Auswahl zwischen "HEX" und "RGB". Im nächsten Schritt trägst du den Wert, sowie die Transparenz (in Prozent) der gewünschten Farbe ein. Sofern dir allerdings nur ein Wert aus dem Farbbereich "CMYK" zur Verfügung steht, musst du diesen in einen "HEX"- oder "RGB"-Wert umwandeln und in den Design Builder einfügen.    

Falls du ein Logo innerhalb der Navigationsleiste einfügen möchtest, klickst du auf "Logo" und lädst das von dir gewünschte Logo hoch. 

Die Anpassung der Navigationsleiste ("Optik"+"Logo") wirkt sich auf die folgenden Elemente innerhalb der finalen Journey aus: 

Beispiel - Tarifauswahl  

Hintergrund

Im nächsten Schritt hast du die Möglichkeit, sowohl die Hintergrundfarbe der gesamten Strecke als auch der jeweiligen Karten innerhalb der Strecke anzupassen. Hierfür musst du lediglich auf den Punkt "Hintergrund" klicken. 

Unter "Hintergrundfarbe" kannst du bestimmen, wie der Hintergrund der Strecke farblich aussehen soll. Wie auch schon bei der Gestaltung der Navigationsleiste musst du hierbei den "HEX"- oder "RGB"-Wert der Farbe eintragen und die Transparenz (in Prozent) angeben.

Beispiel - Tarifauswahl  

Vollkommen neu hingegen ist die Option "Papierhintergrund", in der du die Farbe der einzelnen Karten anpassen kannst. Diese Neuerung hilft dir dabei, deine Strecken noch vielfältiger und ansprechender zu gestalten.     

Beispiel - Tarifauswahl  

Farben

Während du in der alten Version des Design-Builders nur eine einzelne Farbe für das Design deiner Strecken auswählen konntest, hast du nun die Möglichkeit, drei unterschiedliche Farben zu konfigurieren:

Primärfarbe: Die Primärfarbe hat Einfluss auf das farbliche Design der Buttons, Symbole und der Fortschrittsanzeige. 

Beispiel - Tarifauswahl

Beispiel - Tarifrechner

Beispiel - Persönliche Informationen 

Sekundärfarbe: Die Sekundärfarbe hingegen bestimmt über den unteren Abschnitt der Produktbilder innerhalb des Tarifauswahl-Fensters. 

Beispiel - Tarifauswahl  

Fehlermeldung: In diesem Feld kannst du die Farbe der Fehlermeldungen innerhalb einer Strecke anpassen. 

Schriften 

Wie der Name bereits verrät kannst du hier die Farbe und Form der textlichen Inhalte anpassen.

Unter "Optik" wählst du zunächst einmal eine Primärfarbe aus. Diese hat Einfluss auf die Überschriften und Preise. 

Beispiel - Tarifauswahl 

Beispiel - Tarifrechner

Im nächsten Schritt geht es darum, eine Sekundärfarbe auszuwählen, die über die Farbe des Fließ-, sowie Eingabetextes bestimmt. 

Beispiel - Tarifauswahl 

Beispiel - Tarifrechner

Unter der Option "Schrift" hingegen kannst du die Schriftart deines Designs anpassen. Hierbei hast du zwei Möglichkeiten: 

1. Du wählst eine der im Design-Builder integrierten Schriftarten aus. 
   
   
    
2. Du lädst eine eigene Schriftart hoch. Achte hierbei nur darauf, dass die entsprechende Datei das Format "WOFF", "WOFF2", "TTF" oder "EOT" besitzt. 
   
   
   
   Nachdem du eine oder mehrere Schriften hochgeladen hast, musst du die gewünschte Schrift nur noch über die Klappliste auswählen. Außerdem werden die von dir hinzugefügten Dateien unterhalb des Hochladen-Fensters angezeigt.    

Sobald du ein Design erstellt oder bearbeitet hast, musst du auf den "Speichern"-Button klicken. Erst dann werden deine Einstellungen übernommen. Sofern du den Design-Builder verlässt, ohne deine Änderungen zuvor abzuspeichern, werden deine Anpassungen nicht in das jeweilige Design integriert.

Bestätigung deines erstellten Designs

Nachdem du ein neues Design erstellt und gespeichert hast, erscheint im Anschluss eine Seite, die deine Änderungen bestätigt.

Hier hast du die Möglichkeit, mit einem Klick auf "Designübersicht" wieder auf die Übersichtsseite zurückzukehren und dir einen Überblick über deine Designs zu verschaffen. Du kannst allerdings auch direkt ein weiteres Design anlegen. Klicke hierfür einfach auf "Erstelle neues Design".