Bootstrap 5.3
Die Abbildungen zeigen einen früheren Oberflächenstand. Verwenden Sie für die verfügbaren Funktionen und Optionen die Schritte in dieser Anleitung.
Mit einem eigenen Bootstrap 5.3 Style passen Sie den Buchungsprozess von edoobox optisch an Ihr Corporate Design an. Sie steuern zum Beispiel Farben, Abstände, Rundungen, Schriftarten und ausgewählte Bootstrap-Optionen.
Diese Funktion richtet sich an Personen mit HTML-, CSS- oder Bootstrap-Kenntnissen. Einfache Anpassungen wie Primärfarbe, Button-Farbe oder Schriftart können oft direkt im Formularmodus umgesetzt werden. Für komplexe Styles lohnt sich eine klare Designvorlage oder Unterstützung durch eine fachkundige Person.
Voraussetzungen und Einsatzbereich
Sie öffnen den Design Manager mit Bearbeitungszugriff und arbeiten an einem eigenen Design. Ein geschütztes Systemdesign dient als Ausgangspunkt; erstellen Sie für Anpassungen eine eigene Kopie.
Sie wissen, welche Farben, Schriften und Abstände Ihr Buchungsprozess erhalten soll.
Sie testen Änderungen vor der Veröffentlichung in der Vorschau und auf mobilen Geräten.
Bei stark individuellen Anpassungen sollten Sie CSS- und Bootstrap-Regeln prüfen, bevor der Style produktiv genutzt wird.
Die grundlegende Gestaltung des Buchungsprozesses ist in Mit dem Design Manager den Buchungsprozess gestalten beschrieben. Details zum Editor finden Sie in Design Manager: Editor, Layout, Widgets und Bootstrap-Konfiguration.
Bootstrap Style erstellen oder bearbeiten
Öffnen Sie im Design Manager Ihr eigenes Design und dessen Design-Einstellungen. Kontrollieren Sie den zugewiesenen Bootstrap Style und seine Version.
Wählen Sie bei Bootstrap Styles einen eigenen Style zum Bearbeiten oder erstellen Sie mit Hinzufügen einen neuen Style. Vergeben Sie einen eindeutigen Namen und verwenden Sie für neue Funktionen Version 5.3.
Wählen Sie den Startmodus Hell oder Dunkel. Entscheiden Sie, ob Sie die Variablen im Modus Formular oder getrennt für Light und Dark im Modus JSON pflegen.
Speichern Sie und warten Sie, bis die Verarbeitung des Styles abgeschlossen ist. Wählen Sie den Style im eigenen Design aus und kontrollieren Sie die öffentliche Vorschau.
Styles mit älterer Bootstrap-Version (bis Version 5) lassen sich in der aktuellen Bearbeitung auswählen, aber nicht dort verändern. Ein eigener neuer Style stellt vorhandene Designs erst dann um, wenn er ihnen zugewiesen wurde. Die WordPress-Optimierung aktivieren Sie für die tatsächliche WordPress-Einbindung und prüfen diese dort separat.
Farben anpassen
Die wichtigsten Farbwerte steuern primäre Buttons, Links, Erfolgsmeldungen, Warnungen, Fehler, Hintergrund und globale Textfarbe. Verwenden Sie idealerweise die offiziellen Farben Ihres Corporate Designs und prüfen Sie ausreichend Kontrast.
Farben lassen sich am Farbfeld auswählen oder als Hex-Wert eintragen. Das Beispiel zeigt die Farbauswahl eines Bootstrap-5.3-Styles.
- B
- Farbpalette am ausgewählten Farbfeld öffnen
Typische Werte sind --bs-primary für Primärfarbe und Links, --bs-success für Anmelde-Buttons, --bs-warning für Wartelisten-Hinweise, --bs-danger für Fehler oder Stornierungsaktionen, --bs-white für helle Hintergründe und --bs-gray-900 für Text.
Abstände, Rahmen und Rundungen
Über Abstände und Rundungen beeinflussen Sie, ob der Buchungsprozess kompakt, luftig, sachlich oder markennah wirkt. Kleine Änderungen können bereits sichtbar sein, zum Beispiel bei Karten, Buttons, Formularfeldern und Meldungen.
Prüfen Sie die Wirkung immer in Angebotsübersicht, Angebotsdetail, Teilnehmerformular und Zahlungsseite. Zu grosse Abstände können mobile Seiten unnötig lang machen; zu kleine Abstände erschweren die Bedienung.
Weitere Bootstrap-Optionen
Einige Bootstrap-Optionen aktivieren oder deaktivieren allgemeines Verhalten wie Rundungen, Schatten, Farbverläufe, Bewegungen, Grid-Klassen oder Validierungsicons. Ändern Sie diese Werte nur, wenn Sie die Auswirkung im Buchungsprozess wirklich prüfen können.
Für Barrierefreiheit sind Lesbarkeit, klare Fokuszustände und zurückhaltende Bewegung wichtig. Wenn Sie Animationen, Schatten oder Kontraste verändern, testen Sie besonders Formularfelder, Fehlermeldungen und Buttons.
Häufige Bootstrap-Variablen
Die folgenden Schlüssel sind Editor-/JSON-Variablen für die Style-Erstellung. Tragen Sie sie im JSON-Modus ohne --bs- ein. Es handelt sich bei den Aktivierungsschaltern nicht um CSS-Variablen, die Sie einfach zur Laufzeit in einen Textblock schreiben.
| Schlüssel | Wirkung |
|---|---|
enable-rfs | Responsive Schriftgrössen |
enable-rounded | Abgerundete Ecken |
enable-shadows | Schatten |
enable-gradients | Farbverläufe |
enable-transitions | Übergänge |
enable-validation-icons | Validierungsicons |
enable-reduced-motion | Berücksichtigung reduzierter Bewegung |
Bei ungültigem JSON korrigieren Sie zuerst die angezeigte Syntaxmeldung. Bei einer fehlgeschlagenen Style-Verarbeitung verwenden Sie den bisherigen funktionierenden Style, korrigieren die Änderung und speichern erneut. Prüfen Sie danach Formularfehler, Buttons und lange Texte im hellen und dunklen Erscheinungsbild.
Schriftart anpassen
Im Bereich Schriftart legen Sie fest, welche serifenlose Schrift und welche Monospace-Schrift verwendet werden. Für die meisten Buchungsprozesse reicht eine gut lesbare serifenlose Schrift.
Die beiden Schriftfelder unterscheiden die allgemeine Schriftfamilie und die Schrift für gleich breite Zeichen. Die Vorschau muss zur eingebundenen Website und zum verwendeten Design passen.
Wenn Sie eine externe Schrift wie Google Fonts verwenden, müssen Sie zusätzlich sicherstellen, dass die Schrift im Buchungsprozess geladen wird. Fügen Sie den passenden CSS-Import nur ein, wenn Datenschutz, Performance und Ladezeit geklärt sind.
Style testen, bevor er live geht
Testen Sie mindestens diese Bereiche: Angebotsübersicht, Angebotsdetail, Teilnehmerformular, Zusatzfragen, Warenkorb oder Zahlungsseite, Fehlermeldungen, Warteliste und mobile Ansicht. Prüfen Sie auch, ob Texte in Buttons, Badges und Formularfeldern nicht abgeschnitten werden.
Wenn der Style für mehrere Sprachen genutzt wird, testen Sie besonders längere deutsche und englische Beschriftungen. Ein Button, der in einer Sprache passt, kann in einer anderen Sprache zu schmal sein.
Anwendungsbeispiel: Style für eine Unternehmensakademie vorbereiten
Eine Unternehmensakademie übernimmt Primärfarbe, Schrift und Button-Rundung aus dem Corporate Design. Danach testet das Team Angebotsübersicht, Anmeldung und Zahlungsseite auf Desktop und Smartphone. Erst wenn Kontrast, Lesbarkeit und Buttonbreiten stimmen, wird der Style für die öffentliche Buchungsseite verwendet.
Vergleichen Sie Ihren Bootstrap Style mit den wichtigsten Buchungsseiten: Angebotsübersicht, Angebotsdetail, Teilnehmerformular, Zusammenfassung und Payment. Achten Sie auf Kontrast, Fokuszustände, Fehlermeldungen und mobile Lesbarkeit. Ein Style, der im Editor gut aussieht, kann in langen Formularen trotzdem unruhig wirken.
Bootstrap-Version und neue Widgets zusammen planen
Ein Bootstrap-Style wird im Design ausgewählt. Die Vorlage allein stellt ein älteres Design nicht auf Bootstrap 5.3 um. Prüfen Sie die Version des tatsächlich zugewiesenen Styles, bevor Sie neue Widgets suchen.
Angebotsbild, Teilnehmerfoto, Abo-Auswahl in der Buchungszusammenfassung und die neue Widerrufsaktion setzen Bootstrap 5.3 voraus. Auch die drei Widgets der Wartezone werden im Bootstrap-5.3-Buchungsdesign ausgegeben. Die Vorlagen- und Widgetübersicht nennt die passenden Einsatzorte.
Im Formularmodus verwenden Sie die beschrifteten Einstellungen. Im JSON-Modus sind die angebotenen Variablenschlüssel ohne vorangestelltes --bs- zu verwenden, zum Beispiel primary oder enable-rounded. Die sichtbaren Bezeichnungen --bs-… im Formular sind keine Anleitung, alle Optionen als Laufzeit-CSS einzufügen. Speichern Sie Light- und Dark-Einstellungen und prüfen Sie beide Darstellungen.