Den Buchungsprozess gestalten

Mit dem Design Manager können die einzelnen Anmelde-/Buchungsschritte im iFrame weitgehend selbst flexibel gestaltet werden. Sie bestimmen, welche Daten des Angebotes die buchende Person im Frontend sehen soll und legen selbst das Design für den Buchungsprozess fest.

Pro Hauptkategorie (für erfahrene Nutzer auch pro Unterkategorie) kann ein Design zugewiesen werden. Dadurch können die Templates (z. B. das Teilnehmerformular) und die Widgets (z. B. Formularfelder und Textblöcke) auf ein bestimmtes Angebot abgestimmt werden.

Bitte beachten:

Das Template «Abschluss Seite» bezieht die Einstellungen immer aus dem Standard-Design.

Übersicht: Design Manager

Der Design Manager befindet sich in der Hauptnavigation. Sie gelangen dadurch zurück in die V1-Version von edoobox.

Tipp: Auswirkung von Änderungen sofort sehen

Um die Auswirkung von Änderungen sofort zu sehen, wählen Sie ein Angebot aus und öffnen unter «Vorschau – Share» die Standard Ansicht. Starten Sie anschliessend den Design Manager. Im Browser-Register springen Sie nun bequem zwischen der Vorschau und Design Manager hin und her. Um die neueste Darstellung im Vorschaufenster zu sehen, klicken Sie den Refresh-Button (oder Funktionstaste F5).

Ein neues Design erstellen

Das edoobox Start Design kann nicht verändert werden, es ist geeignet für alle Buchungen mit normalen Anforderungen. Haben Sie andere Bedürfnisse und möchten den Buchungsprozess individuell gestalten? Dann empfehlen wir Ihnen, ein neues Design zu erstellen.

Tipp: eigenes Design erstellen

Erstellen Sie eine Kopie vom edoobox Start Design mit Klick auf + Neues Design und verändern Sie dieses nach Ihren Wünschen. Das neue Design setzen Sie entweder auf Standard (für alle Angebote gültig) und/oder heften es einer Kategorie an.

Einstellungen ändern

Klicken Sie auf das Zahnrad beim gewünschten Design, um diverse Anpassungen vornehmen zu können.

Design Eigenschaften

Legen Sie einen Namen fest für Ihr individuelles Design. Setzen Sie beim häufigsten verwendeten Design die Option «Standard», in der Design Auswahl sehen Sie anhand des Stecknadel-Symbols, welches Ihr aktuelles Standard-Design ist.

Design Manager: Standard-Design festlegen

Design – Hauptkategorie

Jedes Design kann verschiedenen Kategorien zugeordnet werden. Wählen Sie hier aus, für welche Kategorien das aktuell geöffnete Design verwendet werden kann.

Design Manager: Design für Kategorien festlegen

Bootstrap Style – edoobox Design

Um den Style Ihres Designs im iFrame Ihren Wünschen entsprechend anzupassen, steht Ihnen Bootstrap zur Verfügung. Sie haben die hier Möglichkeit, aus 25 vorgegebenen Styles auswählen oder auf der offiziellen Bootstrap-Webseite einen eigenen Style zu erstellen. Die zweite Option empfehlen wir nur erfahrenen Nutzern mit Grundlagen in CSS und Bootstrap.

Zu beachten: eigene Bootstrap Styles

Diese angebotenen Bootstrap Styles sind von uns nicht vollumfänglich getestet worden und es kann daher zu unerwarteten Darstellungsergebnissen führen. Wählen Sie in diesem Fall wieder den edoobox Start Style oder verändern Sie Ihr verwendetes Design.

Benötigen Sie Support zu einem selbst erstellten Bootstrap? Dieser steht Ihnen über die offizielle Webseite von Bootstrap zur Verfügung.

Design für unterschiedliche Ausgabegeräte

Design Manager: Template an Gerät anpassen

Sie haben im Design Manager die Möglichkeit, die Templates für diverse Geräte wie Computer, Tablet und Smartphone anpassen. Je nach Grösse des Bildschirmes wählt das iFrame die entsprechende Darstellung. In der Smartphone-Darstellung können weniger wichtige Widgets weggelassen werden.

Das iFrame ist vollkommen responsive und passt sich an die Breite des Ausgabegerätes an.

Bookingflow (Buchungs-Abfolge mittels Templates)

Für jeden Schritt im Bookingflow, von der Angebotsübersicht über die Anmeldung und die Bezahlung bis hin zur Zusammenfassung, gibt es ein eigenes Template, welches individuell editierbar ist.

Widget Anordnung

In der linken Spalte erscheinen jeweils für jedes Template die spezifischen Widgets. Neue Widgets ziehen Sie in die Arbeitsfläche (schwarzer Rahmen) hinein. Mittels Drag-and-drop ändern Sie die Position der Widgets und mit den Symbolen Plus (+) und Minus (-) vergrössern bzw. verkleinern Sie das entsprechende Widget. Je nach Widget können Sie zusätzliche Einstellungen beim Zahnrad-Symbol vornehmen, wie z. B. den Inhalt usw. Mit dem Kreuzsymbol (x) wird ein Widget aus Ihrem Design entfernt.

Design Manager: Organisation der Widgets

Hinweise: Kachelansicht erstellen

Mit dem Design Manager können Sie auch die Angebots-Kategorien mit Bildern designen. Zur Anleitung Kachelansicht im Designmanager einrichten

Widget Einstellungen

Zeigt ein Widget mehrere Daten an, dann können Felder hinzugefügt oder entfernt werden. Via Drag-and-drop ändern Sie die Reihenfolge der Felder im Frontend.

Hinweis: Widget Einstellung

In allen Widget Einstellungen finden Sie in der linken Spalte ganz unten die Einstellung, ob das Widget für alle Besucher, nur für angemeldete Besucher oder für angemeldete Teilnehmer in diesem Angebot ersichtlich sein soll.