Design Manager: Editor, Layout, Widgets und Bootstrap-Konfiguration

Die Abbildungen zeigen einen früheren Oberflächenstand. Verwenden Sie für die verfügbaren Funktionen und Optionen die Schritte in dieser Anleitung.

Der Design Manager steuert, wie der öffentliche Buchungsprozess aussieht: Header, Body, Footer, Vorlagen, Widgets, Raster, Breakpoints und Bootstrap-Styles. Er ist deshalb die zentrale Stelle, wenn Ihre Einbindung in die Webseite nicht nur funktionieren, sondern zur Website passen soll.

Diese Anleitung vertieft die Editor-Oberfläche. Die fachliche Einführung finden Sie unter Mit dem Design Manager den Buchungsprozess gestalten; einzelne Widget-Optionen werden zusätzlich in den Vorlagenseiten beschrieben.

Überblick: Design, Vorlage und Widget

Der Design Manager arbeitet auf drei Ebenen. Zuerst wählen oder erstellen Sie ein Design. Danach öffnen Sie innerhalb von Header, Body oder Footer eine Vorlage, zum Beispiel Angebote Übersicht, Angebot Details, Teilnehmer Formular oder Kopfzeile. In dieser Vorlage platzieren und konfigurieren Sie Widgets.

Layout-Arbeit und Widget-Inhalt sind getrennt. Das Verschieben, Einfügen, Entfernen oder Grössenändern eines Widgets wird als Layout-Entwurf geführt. Inhaltliche Einstellungen, zum Beispiel Label, Pflichtfeld, Zahlungsarten oder Textblock, bearbeiten Sie im Widget-Popup und speichern sie dort.

Administration, Umgebung und Bootstrap unterscheiden

Vergleichen Sie bei einer abweichenden Ansicht drei getrennte Angaben: die Oberfläche Ihrer Administration, die verwendete edoobox-Umgebung und den Bootstrap-Style des öffentlichen Designs. Eine andere Administrationsoberfläche stellt ein gespeichertes Design nicht automatisch auf Bootstrap 5.3 um. Testumgebung und produktive Umgebung können unterschiedliche Designs und Daten verwenden.

Öffnen Sie den tatsächlich eingebundenen Link aus Vorschau-Share und vergleichen Sie Konto, Kategorie, Designname und Sprache. Kontrollieren Sie danach den zugewiesenen Bootstrap-Style. Einzelne Widgets unterscheiden sich zwischen älteren Styles und Bootstrap 5.3; die Social-Schaltflächen sind ein Beispiel. Ändern Sie den Style zunächst in einer Designkopie und prüfen Sie den gesamten Buchungsweg.

Editor-Oberfläche verstehen

Oben befinden sich Designauswahl, Standard-Hinweis und Breakpoint-Schalter für Desktop, Tablet und Mobile. Header, Body und Footer sind getrennte Inhaltsbereiche. Nur der aktive Bereich zeigt das bearbeitbare Raster; inaktive Bereiche erscheinen als reduzierte Vorschau.

Die rechte Seitenleiste zeigt die Widgets, die zur aktuell gewählten Vorlage passen. Wenn eine Vorlage gewechselt wird, lädt edoobox die passende Widget-Auswahl. Auf kleinen Bildschirmen kann die Oberfläche darauf hinweisen, dass ein grösserer Bildschirm verwendet werden soll, weil Drag-and-drop, Rasterbreiten und Seitenleiste sonst schwer kontrollierbar sind.

Design Manager mit Widget-Auswahl in der rechten Seitenleiste.

Layout-Entwurf speichern oder verwerfen

Neue Widgets werden zuerst als Entwurf eingefügt. Solange der Layout-Speichern-Button aktiv ist, sind Reihenfolge, Breite, Abstand oder gelöschte Widgets noch nicht final gespeichert. Beim Speichern verarbeitet edoobox geänderte bestehende Widgets, neu eingefügte Widgets und entfernte Widgets in einem Plan.

Der Button Abbrechen stellt den letzten gespeicherten Stand der Vorlage wieder her. Wechseln Sie Design, Vorlage, Inhaltsbereich oder Breakpoint mit ungespeicherten Änderungen, fragt edoobox nach, ob Sie speichern, verwerfen oder zurückkehren möchten. Auch das Schliessen des Fensters ist gegen versehentlichen Verlust geschützt.

Für neu eingefügte Widgets speichern Sie zunächst den Layoutentwurf, damit der Baustein dauerhaft angelegt ist. Bearbeiten Sie danach seine Einstellungen. Bei einem bereits vorhandenen Widget speichern Sie offene spezifische Änderungen im Popup und danach gegebenenfalls noch offene Layoutänderungen. Allgemeine Eigenschaften können beim Ändern direkt gespeichert werden; massgebend sind der angezeigte Speichern-Zustand und Fehlermeldungen im jeweiligen Bereich.

Widgets, Auswahl und Einmal-Widgets

Die Widget-Liste ist abhängig von Vorlage und Inhaltsbereich. Veraltete Rechts- oder Zusammenfassungswidgets werden in der neuen Auswahl ausgeblendet, wenn eine modernere Variante vorhanden ist. Dadurch sollen neue Designs nicht versehentlich alte Bausteine verwenden.

Einige Widgets dürfen pro Vorlage nur einmal vorhanden sein, zum Beispiel Angebotsfilter, alle Buchungen oder Terminkalender. Ist ein solches Widget bereits platziert, erscheint es in der Auswahl deaktiviert oder kann nicht erneut abgelegt werden.

Angebotsfilter: zentraler Filter für Kategorien, Tags, Status, Preis, Ort oder Leitung auf der Angebotsübersicht.
Alle Buchungen: Übersicht im Teilnehmendenkonto oder auf Abschlussseiten.
Terminkalender: Kalenderdarstellung für Angebote oder Termine.
Textblock und Cookie-Banner: mehrsprachige Rich-Text-Inhalte mit eigenem Speichern im Widget-Popup.

Raster, Breakpoints und Griffe

Widgets liegen in einem 12-Spalten-Raster. Desktop, Tablet und Mobile speichern eigene Werte. Breite, linker Abstand, oberer Abstand und Höhe können dadurch je Breakpoint unterschiedlich sein.

Im Raster gibt es Griffe für Breite, Abstand links und Abstand oben. Wenn Breite und linker Abstand zusammen über 12 Spalten gehen würden, reduziert edoobox automatisch den jeweils anderen Wert. So bleibt das Layout auch bei manueller Eingabe innerhalb des Rasters.

Prüfen Sie nach jeder grösseren Änderung alle drei Breakpoints. Ein Desktop-Layout mit drei Spalten kann mobil unübersichtlich werden, wenn Widget-Reihenfolge, Sichtbarkeit oder Abstände nicht angepasst wurden.

Das Widget-Popup besteht aus spezifischen Einstellungen und allgemeinen Einstellungen. Allgemeine Einstellungen betreffen Name, Breite, Höhe, Höhenverhalten, Abstand, Sichtbarkeit auf Geräten und Sichtbarkeit für Teilnehmende. Spezifische Einstellungen hängen vom Widget ab.

Widget-Einstellungen im Design Manager mit allgemeinen und spezifischen Optionen.

Wenn Sichtbarkeit über Tags aktiv ist, können positive und negative Tags gesetzt werden. Diese Logik ergänzt Tags als Bedingungen, wirkt hier aber auf die Anzeige des Widgets im Buchungsprozess.

Formularfeld: verbindet ein Feld im Teilnehmer Formular mit einem Teilnehmer-Datenfeld und steuert Pflichtfeld, Validierung, Optionen oder Sichtbarkeit.
Zahlungssysteme: steuert auswählbare Zahlungsarten und Reihenfolge im Buchungsprozess. Details stehen unter Bezahlsysteme für Teilnehmendenzahlungen.
Login: kann Login erzwingen, Titel je Sprache pflegen und Anmeldeoptionen anzeigen.
Terminkalender: kann freie Plätze und ausgebuchte Termine anzeigen und minimale oder maximale Terminauswahl steuern.
Kategorien-Kacheln: steuert Kachelbreite, Anzeigen-Button und ob leere Kategorien sichtbar bleiben.

Bootstrap 5.3 Style konfigurieren

Der Bootstrap-Editor verwaltet Name, Theme-Modus, WordPress-Optimierung, Version sowie Light- und Dark-Variablen. Neue Styles verwenden Bootstrap 5.3. Der Editor bietet einen Formularmodus für wichtige Variablen und einen JSON-Modus für direkte Bearbeitung.

Beim Wechsel in den JSON-Modus werden die Formularwerte serialisiert. Beim Wechsel zurück müssen beide JSON-Felder gültige, nicht leere Objekte sein. Prüfen Sie Klammern, Kommas und Anführungszeichen besonders sorgfältig. Ändern Sie im JSON-Modus nur wenige Variablen auf einmal und testen Sie anschliessend die Vorschau.

Nach dem Speichern kann eine Kompilierung laufen. Warten Sie, bis edoobox den Status aktualisiert hat. Wenn keine Änderung erkannt wird, zeigt die Oberfläche sinngemäss, dass keine Veränderung kompiliert werden musste.

Öffentliche Vorschau und Rendering

Die öffentliche Buchungsseite rendert nicht den Editor, sondern das gespeicherte Design mit den gespeicherten Widgetdaten. Deshalb erscheinen Layout-Entwürfe erst nach dem Speichern in Vorschau, iFrame oder WordPress-Plugin.

Die passende Designquelle kann vom Standarddesign, von der Hauptkategorie oder von der konkreten Kategorie kommen. Wenn eine Kategorie ein eigenes Design nutzt, testen Sie genau diese Kategorie in der Vorschau-Share-Ansicht.

Prüfen Sie nach Layoutänderungen mindestens eine Kontoübersicht, eine Kategorie, ein einzelnes Angebot, eine Anmeldung und die Abschlussseite. Nur so sehen Sie, ob Header, Body, Footer, Widget-Reihenfolge und Bootstrap-Style zusammenpassen.

Ein Kategoriedesign und eine vollständige Angebotsübersicht betreiben

Die Designzuweisung legt das Erscheinungsbild fest. Der aufgerufene Konto-, Kategorie- oder Angebotslink legt den Einstieg und damit den sichtbaren Angebotsbereich fest. Ein ausgeblendetes Kategorien-Widget schränkt allein die Angebotsauswahl nicht auf eine bestimmte Kategorie ein.

Einstieg	Design und Kontrolle
Vollständige Kontoübersicht	Verwendet das Konto-Standarddesign. Öffnen Sie den für das Konto erzeugten Link und prüfen Sie die sichtbaren Kategorien und Angebote.
Bestimmte Kategorie und ihre Angebote	edoobox berücksichtigt die Designzuweisung in der Kategoriehierarchie. Ohne eigene Zuweisung gilt das Design der übergeordneten Kategorie beziehungsweise das Standarddesign. Eine nähere eigene Zuweisung kann das Design ersetzen.
Direkter Angebotslink	Prüfen Sie das Design im zugehörigen Kategoriepfad sowie die Vorlage Angebot Details. Eine korrekt gestaltete Gesamtübersicht genügt für diese Seite nicht.

Erstellen oder wählen Sie im Design Manager ein eigenes Design für die vollständige Übersicht. Legen Sie es über Als Standard Design festlegen als Standard fest, wenn es die allgemeine Kontoansicht gestalten soll.
Kopieren Sie das gewünschte Ausgangsdesign für die einzelne Hauptkategorie und geben Sie der Kopie einen eindeutigen Namen, zum Beispiel «Workshops».
Öffnen Sie die Einstellungen dieser Kopie und aktivieren Sie unter Kategorien mit diesem Design die betreffende Hauptkategorie. Kontrollieren Sie die angezeigte bisherige Designzuweisung.
Gestalten Sie im Kategoriedesign Kopfzeile und Angebote Übersicht. Behalten Sie ein Widget, das die Angebote anzeigt. Entscheiden Sie separat, ob die Kategorienavigation dort benötigt wird.
Öffnen Sie Vorschau-Share einmal auf Kontoebene und einmal für die gewünschte Kategorie. Verwenden Sie je Website-Seite den dort erzeugten passenden Link beziehungsweise Einbettungscode.
Prüfen Sie beide Einstiege, Unterkategorien und je ein Angebotsdetail. Kontrollieren Sie auch Rücksprünge zur Übersicht sowie den tatsächlichen Buchungsabschluss.

Beispiel: Eine Organisation zeigt auf der allgemeinen Programmseite alle Kategorien im Standarddesign. Eine zweite Website-Seite soll nur Workshops mit einer eigenen Kopfzeile zeigen. Dort wird der Link zur Kategorie «Workshops» eingebunden und dieser Hauptkategorie das Workshop-Design zugewiesen. Im Standarddesign bleibt die vollständige Übersicht erhalten. Kontrollieren Sie im zweiten Einstieg ausdrücklich, dass keine Angebote aus anderen Kategorien erscheinen.

Eine gemeinsame Datumsfolge über mehrere Kategorien entsteht durch den passenden Einstieg, ein gemeinsames Angebotswidget und die Angebotssortierung. Das Ausblenden der Kategorienavigation allein ändert die Sortierung nicht. Den Bedienweg beschreibt Kategorienübergreifend chronologisch anzeigen. Eine Rückkehr zur eigenen Kurswebsite richten Sie als eigenen Link in der Kopfzeile ein.

Daten, Caches und erneutes Laden

Der Design Manager lädt Widgets, Widget-Auswahl und Vorlagen abhängig von Design und Vorlage. Bereits geladene Daten können zwischengespeichert werden, damit die Seitenleiste schneller reagiert. Nach dem Speichern eines Layouts lädt edoobox die Widgetdaten der Vorlage erneut, damit neue Widgets echte IDs erhalten und entfernte Widgets nicht mehr erscheinen.

Wenn eine Änderung in der Vorschau nicht sichtbar ist, prüfen Sie zuerst, ob das Layout gespeichert wurde, ob das Widget-Popup separat gespeichert wurde und ob Sie die richtige Kategorie beziehungsweise das richtige Design geöffnet haben. Danach laden Sie die Vorschau neu. Bei WordPress- oder Website-Einbindungen kann zusätzlich ein Website-Cache beteiligt sein.

Vermeiden Sie paralleles Bearbeiten derselben Vorlage in mehreren Browserfenstern. Der zuletzt gespeicherte Stand kann sonst Änderungen aus einem anderen Fenster überschreiben oder den Eindruck erzeugen, dass Einstellungen verschwinden.

Gespeicherte Designänderung auf der Website finden

Gehen Sie bei einem fehlenden Text, Logo oder Layout in dieser Reihenfolge vor. Damit lässt sich zuerst feststellen, welche gespeicherte Vorlage die Website tatsächlich aufruft.

Konkrete Seite festhalten: Öffnen Sie die betroffene Website-Seite und bestimmen Sie, ob sie Kontoübersicht, Kategorieübersicht, Angebotsdetail oder einen Buchungsschritt zeigt. Notieren Sie auch Sprache und Bildschirmansicht.
Arbeitsdesign vergleichen: Kontrollieren Sie oben im Design Manager den Namen der bearbeiteten Kopie. Eine neue Kopie wird durch das Speichern allein nicht automatisch zum Standard- oder Kategoriedesign.
Zuweisung prüfen: Vergleichen Sie Als Standard Design festlegen und Kategorien mit diesem Design mit dem betroffenen Kategoriepfad. Prüfen Sie bei Unterkategorien auch abweichende Zuweisungen in der Hierarchie.
Passende Vorlage öffnen: Eine Änderung in Angebote Übersicht erscheint nicht automatisch in Angebot Details oder im Teilnehmerformular. Prüfen Sie bei Texten zusätzlich Sprache, mobile Sichtbarkeit und allfällige Tagbedingungen des Widgets.
Speicherzustände abschliessen: Speichern Sie offene Widget-Einstellungen und den Layoutentwurf entsprechend dem angezeigten Zustand. Bei einem neuen Widget speichern Sie zuerst dessen Anlage im Layout. Beheben Sie Fehlermeldungen, bevor Sie das Ergebnis beurteilen.
Erzeugten Link direkt öffnen: Öffnen Sie den passenden Link aus Vorschau-Share neu. Stimmen dort Inhalt und Gestaltung, vergleichen Sie den auf der Website verwendeten Kategorie-/Angebotslink oder Einbettungscode mit diesem Einstieg.
Einbindung kontrollieren: Prüfen Sie dieselbe Seite in der direkten Ansicht und auf der Website. Nur wenn die korrekte direkte Ansicht aktuell ist und die Website abweicht, prüfen Sie zusätzlich Website-Cache, WordPress-Theme und Einbettung. Laden Sie den betroffenen Browserkontext danach neu.

Ein häufiger Fall: Das Logo wurde in der neuen Designkopie geändert, die eingebundene Kategorie verwendet weiterhin das bisherige Design. Ordnen Sie die freigegebene Kopie der richtigen Kategorie zu und kontrollieren Sie dieselbe Website-Seite erneut. Der vollständige Buchungsweg einschliesslich Abschlussseite gehört zur Kontrolle, besonders wenn mehrere Designs im Konto verwendet werden.

Spezielle Widgets und typische Stolperstellen

Zahlungssysteme: Layout und Zahlungslogik sind getrennt. Wenn eine Zahlungsart fehlt, prüfen Sie zusätzlich die Bezahlsystem-Einstellungen und nicht nur das Widget.
Cookie-Banner: mehrsprachige Texte und Banner-Art müssen zu rechtlichen Einstellungen und Website-Einbindung passen.
Login: Ein erzwungener Login kann die Buchungsstrecke stark verändern. Testen Sie bestehende und neue Teilnehmende.
Formularfeld: Ein sichtbares Formularfeld ist nur sinnvoll, wenn es mit dem richtigen Teilnehmer-Datenfeld verknüpft ist.
Kategorien-Kacheln: Nach dem Klick auf eine Kachel braucht die nächste Ebene ein Widget, das Angebote anzeigt.
Textblock: Pflegen Sie Inhalte in allen aktiven Sprachen und prüfen Sie, ob der Text nur beim direkten Aufruf oder zusätzlich im iFrame sichtbar sein soll.

WordPress-Optimierung und externe Websites

Wenn ein Design über das WordPress-Plugin verwendet wird, kann WordPress-CSS die Darstellung beeinflussen. Prüfen Sie deshalb nicht nur die edoobox Vorschau, sondern auch die echte WordPress-Seite mit aktivem Theme und Cache.

Bei iFrame-Einbindungen ist die Trennung stärker, trotzdem können Höhe, Scrollverhalten und mobile Darstellung von der Website abhängen. Stimmen Sie Design Manager, Vorschau-Share, Label, Sprache und Scroll-To-Top zusammen ab. Wenn Sie einen Bootstrap-Style mit WordPress-Optimierung verwenden, prüfen Sie zusätzlich, ob Theme-Styles Buttons, Abstände oder Formularfelder überschreiben.

Änderungen testen

Design duplizieren oder Arbeitsdesign verwenden.
Layout ändern, alle Breakpoints prüfen und speichern.
Widget-Popups öffnen, Inhalte speichern und erneut testen.
Vorschau auf Konto-, Kategorie- und Angebots-Ebene öffnen.
Eine Testbuchung mit den wichtigsten Zahlungsarten und Formularfeldern durchführen.
WordPress- oder iFrame-Einbindung separat prüfen, wenn die Website ein anderes CSS mitbringt.

Anwendungsbeispiel: Eigenes Anmeldeformular pro Kategorie

Eine Akademie erstellt ein Design für Firmenkurse. Im Teilnehmer Formular werden nicht benötigte Felder entfernt, Zusatzfelder ergänzt und Pflichtfelder geprüft. Danach speichert das Team zuerst das Layout, öffnet jedes Formularfeld und kontrolliert die Buchung mobil und am Desktop.

Anwendungsbeispiel: Angebotsübersicht mit Filter und Kacheln

Für ein Kursprogramm werden Angebotsfilter und Kategorien-Kacheln platziert. Der Angebotsfilter bleibt ein Einmal-Widget. Zusätzlich wird eine Angebotsliste hinzugefügt, damit nach dem Klick auf eine Kategorie auch Angebote sichtbar sind.

Vorlage, Plugin und gespeichertes Design abstimmen

Die aktuelle Auswahl umfasst zusätzliche Body-Vorlagen für Wartezone, Platzregistrierung, Zertifikatsvalidierung sowie bei aktivem Abo-Plugin einen Abo-Katalog und Abo-Checkout. Verwenden Sie die vollständige Vorlagenübersicht, wenn der gesuchte Baustein in der aktuellen Vorlage nicht angeboten wird.

Bei einmal vorgesehenen Widgets verhindert die Auswahl eine weitere Einfügung in dieselbe Vorlage. Dazu gehören unter anderem Angebotsfilter, Alle Buchungen, Saldo, Meine Abonnemente, Abo-Auswahl, die einzelnen Katalog- und Checkoutbausteine und der Termine-Kalender. Ein Wechsel in eine andere Vorlage kann eine andere Auswahl zeigen.

Bei deaktiviertem Abo-Plugin werden passende Vorlagen und Einfügeoptionen ausgeblendet. Bereits gespeicherte Abo-Layouts werden dadurch nicht als Inhalt gelöscht; die öffentliche Nutzbarkeit richtet sich weiterhin nach dem Pluginstatus. Prüfen Sie nach Aktivierung das Layout und die Navigation und speichern Sie Ihre Konfiguration bewusst.

Eigene Code-Widgets können einen eigenen Namen tragen. Benennen Sie mehrere Bausteine nach ihrem Zweck, damit Sie im Widgetkopf und im ausgewählten Inhaltsbereich den richtigen Baustein bearbeiten.

Speicherfehler beheben und Design zuweisen

Bleibt nach Speichern eine Fehlermeldung sichtbar, ist die Übernahme nicht bestätigt. Lassen Sie die Bearbeitung geöffnet, korrigieren Sie die gemeldeten Angaben beziehungsweise die Verbindung und speichern Sie erneut. Prüfen Sie danach dieselbe Vorlage neu. Abbrechen verwirft den Layoutentwurf und stellt den letzten gespeicherten Layoutstand wieder her; bereits separat gespeicherte Widgetinhalte sind damit nicht automatisch zurückgenommen.

Wählen Sie in den Design-Einstellungen die Kategorien, die das eigene Design verwenden sollen, oder setzen Sie es gezielt als Konto-Standarddesign. Das Konto und bestimmte allgemeine Seiten verwenden das Standarddesign. Ein gespeichertes Arbeitsdesign wird durch das reine Speichern nicht automatisch allen Kategorien zugewiesen. Den zusätzlichen Modus Buchungsansicht beschreibt Warenkorb und Abschlussaktion.