Skip to main content
Skip table of contents

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.

Design Manager in dem System Apps

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).

screenshot Übersicht DesignManager

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 + Design hinzufügen 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.

image-20240126-131009.png

Einstellungen ändern

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

Klicken Sie auf das entsprechende Design um Anpassungen vorzunehmen.

Design Eigenschaften

Nach dem Sie einen Namen für Ihr individuelles Design festgelegt haben,

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. JP: zu löschen

Legen Sie beim häufigsten verwendeten Design den Hacken bei “Als Standard Design festlegen“

image-20240126-131347.png

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.

screenshot Design-Auswahl

Bootstrap Style – edoobox Design

Um den Style Ihres Designs im iFrame Ihren Wünschen entsprechend anzupassen, steht Ihnen Bootstrap zur Verfügung. Sie haben 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.

screenshot Bootstrap Styles

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

screenshot Design 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.

Hinweis JP: Dieser Abschnitt evtl. farblich hervorheben, wichtig

Widget Anordnung

In der linken Spalte erscheinen jeweils für jedes Template die spezifischen Widgets. Neue Widgets ziehen Sie in die Arbeitsfläche 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 durch doppel-Klick auf das Widget vornehmen, wie z. B. den Inhalt usw. Mit dem Kreuzsymbol (x) wird ein Widget aus Ihrem Design entfernt.
screenshot Übersicht 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.

screenshot Design Manager: Widget Einstellungen

Hinweis: Widget Einstellung

In allen Widget Einstellungen finden Sie in der rechten 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.

Verwandte Anleitungen

Stichwörter für diese Anleitung

Buchungs-Abfolge ¦ Anmeldeschritte ¦ Buchungsschritte ¦ Designmanager ¦

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.