Mit dem Design Manager den Buchungsprozess gestalten
Die Abbildungen zeigen einen früheren Oberflächenstand. Verwenden Sie für die verfügbaren Funktionen und Optionen die Schritte in dieser Anleitung.
Mit dem Design Manager gestalten Sie den öffentlichen Buchungsprozess: Angebotsübersicht, Angebotsdetails, optionale Auswahlschritte, Teilnehmerformular, Zusammenfassung, Bezahlung, Abschlussseite sowie Kopf- und Fusszeile. Widgets bestimmen, welche Informationen und Aktionen eine buchende Person auf jeder Seite sieht.
Arbeiten Sie immer mit einem Demo-Angebot und einer Kopie des Designs. So können Sie Inhalt, Navigation, Buchungsregeln und Darstellung gemeinsam testen, ohne den produktiven Ablauf unbemerkt zu verändern.
Mit einer Designkopie beginnen
Das Startdesign ist die geschützte Systemgrundlage. Es kann im Editor nicht wie ein eigenes Design umgebaut werden. Erstellen Sie über Design hinzufügen eine Kopie und geben Sie ihr einen eindeutigen Namen, beispielsweise «Kursbuchung 2026 Test».
Definieren Sie danach, ob die Kopie Standarddesign wird oder nur für bestimmte Kategorien gilt. Die Kategoriezuweisung entscheidet, welches Design eine öffentliche Angebotsseite tatsächlich verwendet. Wenn eine Änderung scheinbar fehlt, prüfen Sie deshalb zuerst Design, Kategorie und verwendeten Vorschau-Link.
Soll dieselbe Organisation eine Gesamtübersicht und einen separat gestalteten Kategorien-Einstieg anbieten, benötigen beide Seiten den passenden Einstieg und die richtige Designzuweisung. Der vollständige Bedienweg steht unter Kategoriedesign und vollständige Angebotsübersicht. Bei abweichender Website-Darstellung vergleichen Sie die Kopie mit dem tatsächlich eingebundenen Link anhand von Gespeicherte Designänderung finden.
Kopfzeile, Body und Fusszeile unterscheiden
Kopfzeile: wiederkehrende Navigation, Login, Sprachwahl, Logo oder Hinweise.
Body: die jeweilige Seite des Buchungsablaufs, beispielsweise Angebote Übersicht, Angebot Details, Teilnehmer Formular, Zusammenfassung oder Payment.
Fusszeile: wiederkehrende rechtliche Hinweise, Cookie-Banner, Navigation oder bewusst eingesetzter Zusatzcode.
Wählen Sie zuerst das richtige Design, danach den Inhaltsbereich und zuletzt die konkrete Vorlage. Die Widgetauswahl rechts passt sich an die gewählte Vorlage an.
Abschlussseite separat prüfen: Die Abschlussseite verwendet die dafür vorgesehene Standarddesign-Konfiguration. Wenn mehrere Designs im Konto bestehen, testen Sie nach Änderungen immer auch den tatsächlichen Abschluss einer Demo-Buchung.
Widgets anordnen und bearbeiten
Ziehen Sie neue Widgets aus der Auswahl in den Arbeitsbereich. Bereits platzierte Widgets können verschoben, in ihrer Breite angepasst oder entfernt werden. Über die Bearbeitung öffnen Sie allgemeine und widget-spezifische Einstellungen.
Allgemeine Einstellungen umfassen unter anderem Name, Breite, Höhe, automatisches Höhenverhalten, Abstände, mobile Sichtbarkeit und tagabhängige Sichtbarkeit. Die Wirkung von Teilnehmer-Tags erklärt Tags als Bedingungen verwenden.
Einige Widgets sind pro Vorlage nur einmal vorgesehen. Angebotsfilter, Übersicht aller Buchungen und Terminkalender werden in der Widgetauswahl deaktiviert, sobald sie bereits platziert sind. Das verhindert doppelte Steuer- oder Navigationsbereiche.
Desktop, Tablet und Mobil gestalten
Die Umschaltung im Editor verändert die Layoutwerte je Breakpoint. Breite sowie horizontale und vertikale Abstände können dadurch für Desktop, Tablet und Mobil unterschiedlich sein. Zusätzlich kann ein Widget auf mobilen Geräten ausgeblendet werden.
Der eigentliche Design Manager benötigt einen grossen Bildschirm. Bei zu kleiner Browserbreite zeigt edoobox nur den Hinweis, einen grösseren Bildschirm zu verwenden. Die mobile Umschaltung ist eine Vorschau- und Konfigurationsebene innerhalb des Desktop-Editors, kein Editor für das Smartphone.
Blenden Sie mobil nur Inhalte aus, die für die Buchungsentscheidung nicht nötig sind. Preis, ausgewählte Termine, Pflichtfelder, rechtliche Bestätigung und Abschlussaktion müssen in jeder relevanten Ansicht erreichbar bleiben.
Layout und Widget-Einstellungen bewusst speichern
Layoutänderungen werden zunächst als lokaler Entwurf geführt. Neue, verschobene, geänderte und entfernte Widgets werden erst mit Speichern als gemeinsamer Layoutplan übernommen. Abbrechen verwirft den Layoutentwurf.
Wenn Sie mit ungespeicherten Layoutänderungen zu einer anderen Vorlage wechseln oder den Editor schliessen, fragt edoobox, ob Sie zurückkehren, verwerfen oder speichern möchten. Widget-Einstellungen haben zusätzlich einen eigenen Speichern-Zustand und warnen ebenfalls vor dem Schliessen mit ungespeicherten Änderungen.
Speicherstände beachten: Speichern Sie neu eingefügte Widgets zunächst mit dem Layout. Speichern Sie anschliessend ihre spezifischen Einstellungen im Popup. Bei bestehenden Widgets bestätigen Sie offene spezifische Änderungen und danach den noch offenen Layoutentwurf. Prüfen Sie alle angezeigten Speicherfehler und kontrollieren Sie erst nach erfolgreicher Übernahme die öffentliche Vorschau.
Widget-spezifische Einstellungen richtig einsetzen
Je nach Widget können Texte, Sortierung, Listen, Karten, Formularfelder, Zahlarten, rechtliche Inhalte oder Button-Beschriftungen konfiguriert werden. Mehrsprachige Widgets verwenden die aktuell gewählte Sprache; pflegen und testen Sie jeden sichtbaren Text in allen aktiven Sprachen.
Ein Textblock ist für kurze Erklärungen geeignet, ersetzt aber kein fachliches Kernwidget. Entfernen Sie beispielsweise nicht die Preiskategorie-, Termin-, Teilnehmer- oder Abschlussfunktion, nur weil ein eigener Text denselben Schritt beschreibt.
Kopf- und Fusszeile sparsam halten
Wiederkehrende Bereiche begleiten jeden Buchungsschritt. Eine kompakte Kopfzeile kann Logo, Navigation, Sprachwahl und Teilnehmendenkonto enthalten. Die Fusszeile eignet sich für Gesetzestexte, Datenschutz, Cookie-Banner und zurückhaltende Zusatznavigation.
Das Code-Widget ist für erfahrene Verantwortliche gedacht. Prüfen Sie eigenen Code auf Mobilgeräten, mit Cookie-Einwilligung, in allen Sprachen und unter den geltenden Sicherheitsrichtlinien. Externe Skripte dürfen den Buchungsabschluss nicht blockieren.
Buchungsprozess vollständig testen
Öffentliche Vorschau eines konkreten Demo-Angebots starten.
Desktop, Tablet und Mobil prüfen.
Ein einfaches Angebot, Warteliste, Lektionsbuchung, Sammelanmeldung und Multiangebot je nach Nutzung testen.
Pflichtfelder, Validierung, Login, Rechtstexte und Fehlerzustände auslösen.
Zahlungsweg und Abschlussseite bis zum Ende durchlaufen.
Nach jeder Änderung Widget und Layout speichern, Vorschau neu laden und Ergebnis dokumentieren.
Anwendungsbeispiel: Kursdesign aus dem Startdesign ableiten
Eine Sprachschule kopiert das Startdesign, ordnet die Kopie nur der Kategorie «Sprachkurse» zu und ergänzt in der Angebotsübersicht einen Tag-Filter für das Sprachniveau. Nach dem Speichern prüft sie je ein A1- und C1-Angebot in der öffentlichen Vorschau.
Anwendungsbeispiel: Mobile Buchung verkürzen
Auf Desktop zeigt die Angebotsdetailseite Karte, Social Widget und ausführliche Zusatzinformationen. Mobil werden nur Karte und Social Widget ausgeblendet; Name, Termine, Preis, Verfügbarkeit und Anmeldebutton bleiben sichtbar. Die Buchung wird danach auf einem realen Smartphone vollständig getestet.
Anwendungsbeispiel: Layoutänderung und Widget-Text speichern
Ein Admin ändert den Text des Anmeldebuttons und verschiebt das Widget. Zuerst speichert er die Widget-Einstellung, danach den Layoutentwurf. Beim Wechsel zur nächsten Vorlage erscheint keine Warnung mehr. In der Vorschau kontrolliert er sowohl Beschriftung als auch Position.
Neue Kundenstrecken in die Gestaltung einbeziehen
Ergänzen Sie neben den üblichen Buchungsschritten auch die Seiten, die Ihre Funktionen tatsächlich verwenden. Die Wartezone erscheint vor der eigentlichen Anmeldung, die Platzregistrierung nach einer Einladung für einen reservierten Sammelplatz, und die Zertifikatsvalidierung über den vorgesehenen Zertifikatslink.
Für Teilnehmenden-Abonnemente bearbeiten Sie Katalog, Abo-Checkout, Navigation, Meine Abonnemente und die Abo-Auswahl der Buchungszusammenfassung. Folgen Sie dafür Abonnemente und Kundenbereich gestalten. Die Anlage und Gültigkeit der Pläne regeln Sie im Abo-Manager.
Vor der Zuweisung des Designs öffnen Sie jeden benutzten Weg mit passendem Teststatus: abgemeldet, angemeldet, ohne Abo, mit gültigem Abo, mit reserviertem unbenanntem Platz oder mit einer offenen Zahlung. Eine gefüllte Editorvorschau ersetzt diese Kontrolle nicht.
Klassischen Abschluss oder Warenkorb gestalten
Prüfen Sie beim eigenen Design zusätzlich Buchungsansicht: Im klassischen Ablauf führt die Abschlussaktion zur vorgesehenen Buchung beziehungsweise Zahlung; die Variante mit Mitgliedschaften öffnet zuerst den Warenkorb. Ein frei gewählter Buttontext ändert diesen Ablauf nicht. Konfigurieren Sie den Modus und die Navigation anhand von Warenkorb und Abschlussaktion und kontrollieren Sie den Weg vom Angebotsdetail bis zum tatsächlichen Buchungsstatus.