Widget Builder

Der Widget Builder ermöglicht es dir, Integrationen visuell zu erstellen.

Übersicht

Interface

Der Builder hat drei Bereiche:

Widgets hinzufügen

Per Drag & Drop

1. Wähle ein Widget in der Sidebar
2. Ziehe es auf den Canvas
3. Lasse los an gewünschter Position

Widget-Reihenfolge ändern

1. Klicke und halte ein Widget im Canvas
2. Ziehe es nach oben oder unten
3. Lasse los an neuer Position

Widget entfernen

1. Wähle das Widget
2. Klicke auf Löschen (Mülleimer-Icon)
3. Oder: Ziehe es zurück in die Sidebar

Kern-Widgets

Kursplan (Schedule)

Interaktiver Kalender mit allen Kursen.

Einstellungen:

Features:

• Buchung direkt im Widget
• Kapazitätsanzeige
• Warteliste sichtbar

Credit-Pakete (Packages)

Shop für Credit-Pakete.

Einstellungen:

Features:

• Stripe-Integration für Kauf
• Preisanzeige
• Credit-Anzahl

Trainer (Trainers)

Team-Übersicht mit allen Trainern.

Einstellungen:

Features:

• Profilbilder
• Link zu Trainer-Kursen

Erweiterte Widgets

Nächste Kurse (Next Courses)

Kompakte Liste der nächsten Kurstermine.

Einstellungen:

• Anzahl (1-20)
• Trainer anzeigen (Ja/Nein)

Quick Book

Einzelner Kurs mit Direktbuchung.

Einstellungen:

• Kurs auswählen
• Button-Text

Kategorien (Categories)

Filter nach Kurs-Kategorien.

Einstellungen:

• Layout (Pills oder Cards)
• Alle oder ausgewählte Kategorien

Trainer Spotlight

Einzelner Trainer im Fokus.

Einstellungen:

• Trainer auswählen
• Kurse des Trainers anzeigen

Utility Widgets

Login Button

Ermöglicht Mitgliedern den Login.

Einstellungen:

• Button-Text
• Nach Login: Weiterleitung

Credit Status

Zeigt eingeloggten Nutzern ihr Guthaben.

Einstellungen:

• Format (Kompakt oder Detailliert)

Meine Buchungen

Liste der kommenden Buchungen für eingeloggte Nutzer.

Einstellungen:

• Anzahl angezeigter Buchungen

Standort-Karte

Google Maps mit Studio-Standort.

Einstellungen:

• Höhe (px)
• Zoom-Level

Layout Widgets

Spacer

Vertikaler Abstand zwischen Widgets.

Einstellungen:

• Höhe (8-200px)

Divider

Horizontale Trennlinie.

Einstellungen:

• Stil (durchgezogen, gestrichelt, gepunktet)

Headline

Überschrift einfügen.

Einstellungen:

• Text
• Größe (H1, H2, H3, H4)
• Ausrichtung (links, zentriert, rechts)

Text Block

Freitext-Bereich.

Einstellungen:

• Rich-Text-Inhalt

Speichern

Änderungen speichern

1. Klicke "Speichern" oben rechts
2. Änderungen sind sofort live

Ungespeicherte Änderungen

Bei ungespeicherten Änderungen:

• Warnung beim Verlassen
• "Ungespeicherte Änderungen" Hinweis

Auto-Save

Aktuell kein Auto-Save - immer manuell speichern!

Live-Vorschau

Im Builder

Der Canvas zeigt eine Live-Vorschau:

• Echte Daten aus deinem Studio
• Responsive-Ansicht

Externe Vorschau

1. Klicke "Vorschau"
2. Öffnet neuen Tab mit vollständiger Ansicht

Tipps

Widget-Reihenfolge

Empfohlene Reihenfolge für Startseite:

1. Headline ("Unsere Kurse")
2. Nächste Kurse
3. Spacer
4. Headline ("Credit-Pakete")
5. Credit-Pakete
6. Spacer
7. Headline ("Unser Team")
8. Trainer

Performance

• Weniger ist mehr - nicht zu viele Widgets
• Große Widgets (Kursplan) nur einmal
• Spacer für visuelle Struktur

Mobile

Widgets sind automatisch responsive:

• Grid-Layouts werden zu Spalten
• Karusselle funktionieren per Swipe
• Buttons sind touch-optimiert

Häufige Fragen

Kann ich Widgets duplizieren?

Nein, jedes Widget kann nur einmal pro Integration verwendet werden. Erstelle separate Integrationen für verschiedene Seiten.

Warum sehe ich keine Daten?

• Prüfe ob du Kurse/Pakete/Trainer angelegt hast
• Widget muss gespeichert sein
• Integration muss aktiv sein

Kann ich CSS anpassen?

Nicht direkt. Nutze die Container-Einstellungen für Farben und Abstände.

Nächste Schritte

• Einbetten lernen →
• Styling anpassen →
• Zurück zur Übersicht →