Design anpassen
Damit protel Voyager zu Ihrer individuellen Hotel-App wird, passen Sie das Aussehen der App Ihrem Corporate Design entsprechend an.
Öffnen Sie das Voyager-Menü und klicken Sie auf "Design".
Dadurch öffnet sich ein neues Fenster, in dem der Theme Roller geladen wird.
Voyager > Design > Theme
Über den Themeroller bearbeiten Sie alle Elemente der Voyager Oberfläche und sehen direkt in der Vorschau, wie sich Ihre Änderung auswirkt. Die Vorschau zeigt nicht Ihre Voyager-Inhalte, sondern ein Beispiel-Display mit verschiedenen Elementen, die in der App vorkommen können.
Farbeinstellungen
Sie haben die Möglichkeit, Farben für alle dargestellten Elemente auszuwählen.
Ziehen Sie ein Farbicon aus der oberen Farbauswahl auf ein Element der Beispielansicht. Klicken Sie dazu auf eine Farbe und halten Sie die linke Maustaste gedrückt bis sich der Mauszeiger über dem Element befindet, das Sie einfärben möchten. Sobald Sie die Maustaste loslassen...
... wird das Element eingefärbt und im linken Bereich öffnen sich die dazugehörigen Einstellungen.
Statt eine Farbe auf ein Element zu ziehen, können Sie auch die Farbeinstellungen im linken Bereich verwenden, um die einzelnen Elemente zu gestalten.
Sobald Sie dort in ein Eingabefeld für einen Farbwert klicken, öffnet sich eine Farbauswahl.
Suchen Sie darin den gewünschten Farbton aus oder tippen Sie den exakten Farbwert in das Eingabefeld und bestätigen mit [Enter].
Theme-Einstellungen
Außer den Farbeinstellungen gibt es auch weitere Optionen, um die App an Ihr Corporate Design anzupassen. Klicken Sie oben links auf den Reiter "Theme", um zu den Theme-Einstellungen zu gelangen.
Schriftart
In der ersten Einstellung "Font Family" ändern Sie die Schriftart. Dort sind zwei Schriftarten durch Komma getrennt aufgeführt. Das bedeutet, dass die App in "Helvetica" angezeigt werden soll, aber falls die Schriftart "Helvetica" auf dem Smartphone des Gastes nicht verfügbar ist, soll stattdessen "Arial" verwendet werden; auf jeden Fall soll aber eine sans-serif Schriftart angezeigt werden.
Aktivstatus
In den Einstellungen zum "Active State" legen Sie fest, wie ein Element aussehen soll, wenn es aktiv ist. Aktiv bedeutet, dass der Gast es angetippt hat, um es auszuwählen oder dass es das Element ist, das gerade angezeigt wird. Dann signalisiert die andere Farbe, welches Element in der App gerade angezeigt wird.
In den Einstellungen für den Aktivstatus legen Sie die Textfarbe, eine Textschattierung, die Hintergrundfarbe und den Rahmen fest. Ändern Sie die Farbwerte über die Eingabefelder oder den Schieberegler.
Radius der Ecken
"Corner Radii" ermöglicht Ihnen die Schaltflächen abzurunden oder eckiger zu machen.
Nutzen Sie die Schieberegler, um die Elemente in die gewünschte Form zu bringen.
Icons
Die Iconeinstellungen, die Sie hier bearbeiten, beziehen sich auf Standardicons wie z.B. Radio-Buttons bei einer Optionsauswahl; nicht auf die Icons, die Sie für Ihre Voyager-Inhalte auswählen.
Nutzen Sie die Auswahlmenüs und das Eingabefeld für den Farbwert, um die Icons zu gestalten.
Schattierung
Unter "Box Shadow" definieren Sie, welche Schattierung Ihre Elemente, wie z.B. Buttons, haben sollen.
Stellen Sie ein, welche Farbe die Schattierung haben soll, wie hoch ihre Deckkraft ist und wie breit sie sein soll.
Änderungen hochladen
Wenn Sie alle gewünschten Einstellungen vorgenommen haben, laden Sie diese in die protel Cloud hoch. Anders als die üblichen protel Cloud Center Dialoge, müssen die Designanpassungen manuell gespeichert werden. Da es bei diesen Einstellungen hilfreich ist, einfach verschiedene Varianten auszuprobieren, bleiben alle Anpassungen so lange offline bis Ihnen die Vorschau so gut gefällt, dass Sie das Design veröffentlichen möchten.
Zum Hochladen klicken Sie dann in der Leiste oben auf "Save to protel cloud". Nachdem Sie es hochgeladen haben, werden Ihre Einstellungen für protel Voyager verwendet.
Änderungen verwerfen
Falls Sie Einstellungen ausprobiert haben, die Ihnen in der Vorschau nicht gefallen, können Sie noch einmal von vorne beginnen und alle Änderungen verwerfen.
Klicken Sie dazu oben in der Leiste auf "Reload. Discard Changes".