Anpassen

Passe das Aussehen deiner Widgets an das Design deiner Website an. Alle Einstellungen findest du im Widget Builder unter den Integrations-Einstellungen (Zahnrad-Symbol).

Themes

Themes sind vordefinierte Farbkombinationen, die mit einem Klick das gesamte Erscheinungsbild deines Widgets ändern.

Verfügbare Themes

Theme auswählen

1. Öffne den Widget Builder
2. Klicke auf das Zahnrad-Symbol (Integrations-Einstellungen)
3. Wähle unter "Theme" das gewünschte Farbschema
4. Die Farben werden automatisch übernommen

Eigene Farben

Wähle "Eigene Farben", um jede Farbe individuell einzustellen. Oder wähle ein Theme als Ausgangspunkt und passe einzelne Farben danach an.

Farben

Du kannst folgende Farben individuell konfigurieren:

Farbe ändern

1. Klicke auf das Farbfeld neben der jeweiligen Farbe
2. Wähle eine Farbe mit dem Farbwähler oder gib einen Hex-Code ein (z.B. #84CC16)
3. Die Vorschau im Canvas aktualisiert sich sofort

Tipp: Nutze als Primärfarbe die gleiche Farbe wie auf deiner Website - so fügt sich das Widget nahtlos ein.

Container-Einstellungen

Diese Einstellungen betreffen den äußeren Rahmen des gesamten Widgets.

Breite

Maximale Breite

Begrenzt die Breite auch bei prozentualer Einstellung:

Innenabstand (Padding)

Eckenrundung (Border Radius)

Steuert die Rundung der Ecken von Karten und Elementen innerhalb des Widgets. Werte von 0px (eckig) bis 32px (stark gerundet).

Schatten

Schaltet einen dezenten Schatten um das Widget ein oder aus.

Widget-spezifische Layouts

Einige Widgets bieten verschiedene Layout-Optionen:

Grid

• Automatisches Responsive-Grid
• Elemente füllen den verfügbaren Platz
• Auf kleinen Bildschirmen wird es automatisch einspaltig

Liste

• Vertikale Auflistung
• Jedes Element nutzt die volle Breite
• Ideal für detaillierte Darstellungen

Karussell

• Horizontales Scrollen
• Touch-optimiert für Mobilgeräte
• Navigation mit Pfeilen auf dem Desktop

Responsive Verhalten

Alle Widgets passen sich automatisch an die Bildschirmgröße an:

Du musst nichts konfigurieren - das responsive Verhalten funktioniert automatisch.

Dynamische Terminologie

Die Widgets verwenden automatisch die Bezeichnungen, die du in deinem Studio eingestellt hast:

• Statt "Trainer" kann z.B. Coach, Kursleiter oder Therapeut stehen
• Statt "Kurse" kann z.B. Workshops, Seminare oder Sessions stehen

Terminologie ändern

1. Gehe zu Einstellungen → Allgemein → Terminologie
2. Wähle die passenden Begriffe für dein Studio
3. Die Widgets übernehmen die Änderung automatisch - kein erneutes Einbetten nötig

Branding

Automatisch übernommen

Die Widgets übernehmen automatisch:

• Deinen Studio-Namen
• Deine gewählte Terminologie
• Die eingestellten Farben

Isolation von deiner Website

Das Widget läuft in einem isolierten Bereich (Shadow DOM). Das bedeutet:

• Dein Website-CSS hat keinen Einfluss auf das Widget-Aussehen
• Das Widget-CSS verändert nichts an deiner Website
• Farben und Styling werden ausschließlich über die Widget-Einstellungen gesteuert

Best Practices

Zur Website passend gestalten

• Verwende die gleiche Primärfarbe wie auf deiner Website
• Wähle eine ähnliche Eckenrundung
• Passe den Hintergrund an (transparent passt meist am besten)

Weniger ist mehr

• Die Standard-Einstellungen sind für die meisten Websites optimiert
• Starte mit einem passenden Theme und passe nur die Primärfarbe an
• Teste immer auf Desktop und Handy

Testen

• Nutze die Vorschau-Funktion im Builder
• Prüfe das Widget auf deiner echten Website
• Teste auf verschiedenen Geräten und Browsern
• Klicke durch: Kurse anklicken, Filter nutzen, Trainer ansehen

Häufige Fragen

Kann ich eigenes CSS zum Widget hinzufügen?

Nein. Das Widget läuft in einem isolierten Shadow DOM, das von außen nicht per CSS angesprochen werden kann. Alle visuellen Anpassungen werden über die Einstellungen im Widget Builder vorgenommen.

Warum sieht das Widget auf meiner Website anders aus als in der Vorschau?

Das Widget passt sich an die Breite des Containers an, in dem es auf deiner Website steht. Ist der Container schmaler als im Builder, sieht das Layout etwas anders aus. Die Inhalte passen sich aber automatisch an.

Kann ich die Schriftart ändern?

Widgets nutzen System-Schriftarten für schnelle Ladezeiten. Eine eigene Schriftart ist aktuell nicht konfigurierbar.

Werden Änderungen sofort sichtbar?

Ja. Sobald du im Widget Builder auf "Speichern" klickst, sind die Änderungen sofort auf deiner Website sichtbar. Du musst den Embed-Code nicht erneut einfügen.

Muss ich den Embed-Code aktualisieren wenn ich etwas ändere?

Nein. Der Embed-Code bleibt immer gleich. Alle Änderungen an Design, Widgets und Inhalten werden automatisch übernommen.

Nächste Schritte

• Widget auf deiner Website einbetten
• Widget Builder kennenlernen
• Zurück zur Übersicht