Anpassen

Passe das Aussehen deiner Widgets an dein Website-Design an.

Container-Einstellungen

Breite

Max-Breite

Begrenzt die Breite auch bei 100%:

Padding

Innenabstand des Containers:

• 0px (kein Padding)
• 8px
• 16px
• 24px (Standard)
• 32px

Hintergrund

Border-Radius

Eckenrundung des Containers:

• 0px (eckig)
• 8px
• 12px (Standard)
• 16px
• 24px
• 32px

Farben

Primärfarbe

Die Primärfarbe wird verwendet für:

• Buttons
• Links
• Hover-States
• Akzente

Einstellung:

1. Farbwähler nutzen
2. Oder Hex-Code eingeben (#84CC16)

Tipp: Nutze die gleiche Farbe wie auf deiner Website.

Textfarbe

Standardmäßig passt sich Text automatisch an:

• Dunkler Hintergrund → Weißer Text
• Heller Hintergrund → Dunkler Text

Widget-Gap

Abstand zwischen Widgets

Der Gap bestimmt den vertikalen Abstand zwischen Widgets:

• 16px (kompakt)
• 24px (Standard)
• 32px (luftig)
• 48px (sehr luftig)

Widget-spezifische Optionen

Kursplan

Credit-Pakete

Trainer

Headline

Spacer

Divider

Layouts

Grid Layout

Für Pakete und Trainer:

• Automatisches Responsive-Grid
• Min. 280px pro Item
• Füllt verfügbaren Platz

Listen Layout

• Vertikale Liste
• Volle Breite pro Item
• Ideal für Detail-Ansichten

Karussell Layout

• Horizontales Scrollen
• Touch-optimiert für Mobile
• Navigation mit Pfeilen

Responsive Verhalten

Automatisch

Widgets passen sich automatisch an:

Was sich ändert

• Grid wird zu Stack
• Karussell bleibt horizontal
• Buttons werden breiter
• Texte umbrechen

Branding übernehmen

Automatisch

Widgets übernehmen automatisch:

• Studio-Name
• Primärfarbe (aus Einstellungen)
• Terminologie

Logo

Das Logo kann optional in Widgets erscheinen:

• Im Header
• Als Wasserzeichen
• In Login-Widgets

Dark Mode

Widget-Theme

Widgets unterstützen:

• Light: Heller Hintergrund
• Dark: Dunkler Hintergrund
• Auto: Folgt System-Einstellung

Einstellung im Builder:

1. Container-Einstellungen
2. Theme auswählen

Best Practices

Zur Website passend

• Gleiche Primärfarbe
• Ähnliche Rundungen
• Passende Abstände

Nicht zu viel anpassen

• Standard-Einstellungen sind getestet
• Extreme Werte können brechen
• Weniger ist oft mehr

Testen

• Desktop und Mobile prüfen
• Verschiedene Browser testen
• Mit echten Daten testen

CSS-Variablen

Für Fortgeschrittene

Widgets nutzen CSS-Custom-Properties:

--bookicorn-primary: #84CC16;
--bookicorn-background: #ffffff;
--bookicorn-text: #1f2937;
--bookicorn-border: #e5e7eb;
--bookicorn-radius: 12px;

Diese werden durch die Einstellungen gesetzt.

Vorlagen

Starter-Konfigurationen

Minimalistisch:

• Transparent, kein Padding
• Einfache Liste
• Wenige Widgets

Modern:

• Heller Hintergrund
• Grid-Layout
• Abgerundete Ecken

Bold:

• Kräftige Primärfarbe
• Großer Text
• Viel Padding

Häufige Fragen

Kann ich eigenes CSS hinzufügen?

Nicht direkt im Builder. Widgets laufen in Iframes. Du kannst den Container auf deiner Seite stylen.

Warum sieht es anders aus als in der Vorschau?

• Container auf deiner Website hat andere Größe
• CSS deiner Seite beeinflusst Container
• Prüfe Parent-Element-Styles

Kann ich Schriftarten ändern?

Widgets nutzen System-Schriften für Performance. Custom Fonts sind nicht möglich.

Wie entferne ich das Bookicorn-Branding?

Das Branding ist minimal (nur "Powered by" im Footer). Es kann nicht entfernt werden.

Nächste Schritte

• Zurück zur Widget-Übersicht →
• Einbetten lernen →