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.
🌟 Lizenzbeschränkung🌟
Die maximale Anzahl an eigenen Designs ist abhängig von deiner Lizenz.
Starter und Business Lizenz – 1 Design inklusive
Professional Lizenz – 2 Designs inklusive
Enterprise Lizenz – 4 Designs inklusive
Hast du dein Limit erreicht oder Fragen zu deiner Lizenz, dann wende dich an deine unternehmensinternen AnsprechpartnerInnen.
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.
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.
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.
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". Zu dem kannst du jetzt auch die Höhe der Navigationsleiste und Anordnung des Logos anpassen.
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.
Hinweis
Für den Fall, dass du den Wert der gewünschten Farbe im Farbraum "HEX" oder "RGB" nicht vorliegen hast, kannst du diesen über die Google-Suche finden.
Die Hochladen-Funktion unterstützt die Dateiformate "PNG", "JPG" und "SVG". Zur optimalen Verarbeitung des Logos empfehlen wir eine maximale Dateigröße von 1,5 Megabyte.
Die Anpassung der Navigationsleiste ("Optik"+"Logo") wirkt sich auf die folgenden Elemente innerhalb der finalen Journey aus:
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.
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.
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, fünf unterschiedliche Farben zu konfigurieren:
Primärfarbe: Die Primärfarbe hat Einfluss auf das farbliche Design der Buttons, Symbole und der Fortschrittsanzeige.
Sekundärfarbe: Die Sekundärfarbe hingegen bestimmt über den unteren Abschnitt der Produktbilder innerhalb des Tarifauswahl-Fensters oder eben Bonus-Banner, wenn diese nicht explizit in der Sektion “Gutschein” geändert werden.
Link Farbe: Hier kann die Farbe für vorhandene Links in der Journey angepasst werden. Zu dem kann auch noch die Farbe gewählt werden die beim Hover über den Link erscheinen soll.
Unter der Option "Schrift" hingegen kannst du die Schriftart deines Designs anpassen. Hierbei hast du zwei Möglichkeiten:
Du wählst eine der im Design-Builder integrierten Schriftarten aus.
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.
Mit Randradius kannst du wieder kannst du hier wieder die Form der Eingabefelder anpassen und auch die Höhe verändern. Mit der Variante kannst du bestimmen wie bzw. wohin die Beschreibung des Eingabefeldes erscheinen soll und wie das Eingabefeld aussieht im generellen.
Hier kannst du alles einstellen rund um Schaltflächen. Besondere Funktion ist hier der “Linear Gradient”. Du kannst jetzt die Schaltflächen mit Farbverlauf gestalten.
Hier kannst du alles einstellen rund um Kopierten, wie Karte, Dropdown oder Schalter. Besondere Funktion ist hier der “Linear Gradient”. Du kannst jetzt die Komponenten wie Karte mit Farbverlauf gestalten.
Nachdem du alle von dir gewollten Änderungen an dem Design vorgenommen hast kannst du nun dein Design speichern. Falls der Design-Builder hier noch Schwierigkeiten mit dem Kontrast oder der Barrierefreiheit feststellt wirst du darüber informiert und kannst Änderungen entweder selbst oder mit dem “Automatisch beheben” Button.
Nachdem du ein neues Design erstellt und gespeichert hast, erscheint im Anschluss eine Meldung, die deine Änderungen bestätigt.
