Widgets

Der Seiten-Builder bietet 15 verschiedene Widget-Typen, organisiert in drei Kategorien. Jedes Widget kann individuell konfiguriert und gestaltet werden.

Widget-Kategorien

Die Widgets sind in drei Kategorien unterteilt:

Struktur

Container-Widgets zum Organisieren und Gruppieren von Inhalten:

• Card
• Tab Container
• Accordion
• Spacer
• Divider

Inhalt

Widgets zur Darstellung von Inhalten:

• Text
• Icon
• Rating
• Chip
• Calendar
• Image
• Video
• WebView

Aktion

Interaktive Widgets:

• Button
• Formular

---

Struktur-Widgets

Card

Container

Die Card ist ein Container-Widget, das andere Widgets aufnehmen kann. Perfekt fur gruppierte Inhalte mit einheitlichem Styling.

Eigenschaft	Beschreibung
Typen	Basic, Elevated, Outlined
Elevation	0-12 (nur bei Elevated)
Hintergrund	Farbe, Gradient oder Bild
Verschachtelung	Andere Widgets konnen per Drag & Drop eingefugt werden

Card-Typen:

Typ	Beschreibung
Basic	Einfache Karte ohne Schatten
Elevated	Karte mit Schatten (Elevation einstellbar)
Outlined	Karte mit Rahmen, ohne Schatten

Hintergrund-Optionen:

Typ	Einstellungen
Farbe	Beliebige Farbe (Light/Dark Mode separat)
Gradient	Start-/Endfarbe, Winkel (linear/radial)
Bild	Bild-Upload, Anpassung, Overlay

Widgets in Cards ziehen

Du kannst beliebige Widgets in eine Card ziehen. Die Card zeigt einen Hinweis “Ziehe Widgets hierher”.

---

Tab Container

Container

Der Tab Container zeigt Inhalte in Tabs organisiert. Jeder Tab kann eigene Widgets enthalten.

Eigenschaft	Beschreibung
Tabs	Beliebig viele Tabs mit Namen und optionalem Icon
Position	Tab-Leiste oben oder unten
Scrollbar	Aktivierbar bei vielen Tabs
Farben	Indikator, Label, unselected Label

Tab-Einstellungen pro Tab:

Einstellung	Beschreibung
Label	Name des Tabs (mehrsprachig)
Icon	Optionales Icon vor dem Label
Typografie	Schriftart, Grosse, Gewicht

Widgets in Tabs:

1. Erstelle den Tab Container
2. Wahle einen Tab aus
3. Ziehe Widgets in den aktiven Tab-Bereich

---

Accordion

Container

Das Accordion zeigt Inhalte in ausklappbaren Panels. Perfekt fur FAQs oder strukturierte Informationen.

Eigenschaft	Beschreibung
Panels	Beliebig viele Panels mit Titel
Initial geoffnet	Welche Panels beim Laden geoffnet sind
Elevation	Schatten-Starke
Border Radius	Individuell pro Ecke

Panel-Einstellungen:

Einstellung	Beschreibung
Label	Titel des Panels (mehrsprachig)
Icon	Optionales Icon
Farben	Titel, Icon, Hintergrund (normal/expanded)
Typografie	Schriftart, Grosse, Gewicht

---

Spacer

Layout

Der Spacer erzeugt vertikalen Abstand zwischen Widgets.

Eigenschaft	Beschreibung
Hohe	Abstand in Pixeln (1-200px)
Responsiv	Passt sich an Bildschirmgrosse an

Wann Spacer nutzen?

Nutze Spacer fur grossere, bewusste Abstande. Fur kleine Abstande nutze stattdessen das Margin der einzelnen Widgets.

---

Divider

Layout

Der Divider ist eine horizontale Trennlinie zwischen Inhalten.

Eigenschaft	Beschreibung
Dicke	Linienstarke in Pixeln
Einzug	Einruckung links und rechts
Vertikaler Abstand	Abstand oben und unten
Stil	Durchgezogen, gestrichelt, gepunktet

Linien-Stile:

Stil	Beschreibung
solid	Durchgezogene Linie
dashed	Gestrichelte Linie
dotted	Gepunktete Linie

---

Inhalt-Widgets

Text

Essentiell

Das Text-Widget zeigt formatierten Text an. Es bietet einen WYSIWYG-Editor fur einfache Formatierung.

Eigenschaft	Beschreibung
Text	Mehrsprachig (DE/EN)
Schriftgrosse	10-96px
Schriftgewicht	Light bis Bold
Ausrichtung	Links, Zentriert, Rechts
Formatierung	Fett, Kursiv, Unterstrichen
Listen	Aufzahlung, Nummerierung

WYSIWYG-Editor:

Der integrierte Editor bietet:

• Fett/Kursiv/Unterstrichen Buttons
• Ausrichtungs-Buttons
• Listen-Formatierung
• Live-Vorschau

Leading Icon:

Du kannst dem Text ein furendes Icon hinzufugen:

• Icon aus der Icon-Bibliothek wahlen
• Abstand zwischen Icon und Text einstellen
• Icon erbt die Textfarbe

Erweiterte Einstellungen:

Einstellung	Beschreibung
Textfarbe	Separate Farben fur Light/Dark Mode
Schriftart	Aus Google Fonts wahlen
Buchstabenabstand	Letter Spacing
Text-Dekoration	Unterstrichen, Durchgestrichen
Max. Zeilen	Begrenzt die Zeilenanzahl

---

Icon

Visuell

Das Icon-Widget zeigt ein einzelnes Icon an.

Eigenschaft	Beschreibung
Icon	Aus umfangreicher Icon-Bibliothek
Grosse	12-128px
Farbe	Theme-Farbe oder benutzerdefiniert
Tap-Aktion	Optional: Navigation bei Tippen
Tooltip	Hinweis bei langem Drucken

Icon-Bibliotheken:

• Material Icons
• Font Awesome
• Bootstrap Icons
• Und weitere…

---

Rating

Feedback

Das Rating-Widget zeigt eine Sterne-Bewertung an.

Eigenschaft	Beschreibung
Bewertung	Wert von 0 bis max
Maximum	Maximale Sterne (Standard: 5)
Halbe Sterne	Erlaubt halbe Bewertungen
Nur Anzeige	Nicht interaktiv
Label	Optionaler Text unter den Sternen
Beschreibung	Zusatzlicher Beschreibungstext

Anzeige-Optionen:

Option	Beschreibung
Label anzeigen	z.B. “4.5 von 5 Sternen”
Beschreibung	z.B. “Basierend auf 1.234 Bewertungen”
Icon-Grosse	Grosse der Sterne
Farbe	Farbe der gefullten Sterne

---

Chip

Tags

Das Chip-Widget zeigt eine Sammlung von Tags/Labels an.

Eigenschaft	Beschreibung
Chips	Liste von Chips
Abstand	Abstand zwischen Chips
Wrap-Ausrichtung	Start, Center, End

Einstellungen pro Chip:

Einstellung	Beschreibung
Label	Text des Chips
Icon	Optionales Icon
Avatar-Text	Optionaler Text (z.B. Initialen)
Hintergrund	Farbe des Chips
Textfarbe	Farbe des Labels
Schrift	Grosse, Familie, Gewicht
Border Radius	Rundung der Ecken
Elevation	Schatten
Loschen-Icon	Zeigt X zum Entfernen

---

Calendar

Datum

Das Calendar-Widget zeigt einen interaktiven Kalender mit Terminen.

Eigenschaft	Beschreibung
Ansicht	Monat, Woche, Tag
Wochennummern	Anzeige aktivieren
Erster Wochentag	Montag oder Sonntag
Sprache	de_DE oder en_US
Datumsformat	z.B. dd.MM.yyyy

Farb-Einstellungen:

Element	Beschreibung
Header	Farbe der Kopfzeile
Heute	Hervorhebung des heutigen Datums
Ausgewahlt	Farbe des ausgewahlten Datums
Event-Marker	Farbe der Termin-Punkte
Wochenende	Farbe fur Sa/So

Termine:

Du kannst Termine hinzufugen mit:

• Titel
• Datum und Uhrzeit
• Beschreibung
• Farbe

---

Image

Medien

Das Image-Widget zeigt ein Bild an.

Eigenschaft	Beschreibung
Bild	Upload aus Galerie/Kamera
Anpassung	Cover, Contain, Fill, FitWidth, FitHeight
Ausrichtung	9 Positionen (z.B. topLeft, center)
Seitenverhaltnis	Beibehalten oder feste Hohe

Box Fit Optionen:

Fit	Beschreibung
Cover	Fullt den Bereich, schneidet ggf. ab
Contain	Zeigt das komplette Bild, ggf. mit Randern
Fill	Streckt das Bild auf den Bereich
FitWidth	Passt auf die Breite an
FitHeight	Passt auf die Hohe an

Erweiterte Einstellungen:

Einstellung	Beschreibung
Border Radius	Rundung der Ecken
Opacity	Transparenz (0-100%)
Clip Behavior	Anti-Alias, Hard Edge, None

---

Video

Medien

Das Video-Widget zeigt einen Video-Player an.

Eigenschaft	Beschreibung
Quelle	Upload oder URL
Autoplay	Automatisch starten
Loop	Endlosschleife
Controls	Player-Steuerung anzeigen
Stumm	Ohne Ton starten
Seitenverhaltnis	16:9, 4:3, 1:1, etc.
Geschwindigkeit	0.5x bis 2x

---

WebView

Web

Das WebView-Widget bettet eine Webseite ein.

Eigenschaft	Beschreibung
URL	Webadresse (nur HTTPS)
Hohe	Hohe des WebViews
JavaScript	Aktivieren/Deaktivieren
DOM Storage	Lokaler Speicher erlauben
Zoom	Zoom erlauben
Cache loschen	Cache beim Verlassen leeren
User Agent	Benutzerdefinierter User Agent

Nur HTTPS

Aus Sicherheitsgrunden werden nur HTTPS-URLs unterstutzt.

---

Aktions-Widgets

Button

Interaktion

Das Button-Widget ist eine interaktive Schaltflache.

Eigenschaft	Beschreibung
Label	Button-Text (mehrsprachig)
Stil	Elevated, Text, Outlined
Icon	Optionales Icon (links oder rechts)
Aktion	Was beim Tippen passiert
Tooltip	Hinweis bei langem Drucken

Button-Stile:

Stil	Beschreibung
Elevated	Erhohter Button mit Schatten
Text	Nur Text, kein Hintergrund
Outlined	Button mit Rahmen

Aktions-Typen:

Aktion	Beschreibung
Seite offnen	Navigiert zu einer anderen Seite
URL offnen	Offnet einen Link im Browser
Dialog zeigen	Zeigt einen Dialog an
Teilen	Offnet das Teilen-Menu
Zurück	Geht zur vorherigen Seite

Erweiterte Einstellungen:

Einstellung	Beschreibung
Hintergrund	Farbe (Light/Dark Mode)
Textfarbe	Farbe (Light/Dark Mode)
Border Radius	Rundung der Ecken
Elevation	Schatten (nur Elevated)
Breite	10-100%
Hohe	40-80px

---

Formular

Eingabe

Das Formular-Widget bindet ein zuvor erstelltes Formular ein.

Eigenschaft	Beschreibung
Formular-ID	Verknupftes Formular aus dem Form Builder
Titel anzeigen	Zeigt den Formular-Titel
Beschreibung	Zeigt die Formular-Beschreibung
Submit-Ausrichtung	Position des Absenden-Buttons

Formular erstellen

Formulare werden im Form Builder erstellt und konnen dann hier eingebunden werden.

---

Widget-Einstellungen

Alle Widgets teilen gemeinsame Einstellungs-Tabs:

Basis

Widget-spezifische Grundeinstellungen wie Text, Bild, etc.

Layout

• Breite (%)
• Hohe (px)
• Padding (innen)
• Margin (aussen)

Erweitert

• Theme Override Toggle
• Light/Dark Mode Farben
• Spezielle Optionen je Widget

Theme Override

Standardmassig erben Widgets ihre Farben vom globalen Theme. Mit dem “Theme Override” Toggle kannst du:

1. Aktiviert (Standard): Widget nutzt Theme-Farben
2. Deaktiviert: Du kannst eigene Farben definieren

Bei deaktivierten Theme-Defaults siehst du:

• Light/Dark Mode Toggle zum Wechseln
• Farbpicker fur verschiedene Eigenschaften
• Reset-Button um zur Theme-Farbe zuruckzukehren

---

Tipps

Widgets duplizieren

Hast du ein Widget perfekt eingestellt? Dupliziere es uber das Kontextmenu und passe nur den Inhalt an.

Container zuerst

Bei komplexen Layouts: Fuge zuerst die Container (Card, Tab, Accordion) hinzu, dann die Inhalte.

Padding vs. Margin

• Padding: Innenabstand (innerhalb des Widgets)
• Margin: Aussenabstand (Abstand zu anderen Widgets)

Mehrsprachigkeit

Text-basierte Widgets (Text, Button, Chip) unterstutzen mehrere Sprachen. Wechsle zwischen den Sprach-Tabs um alle Ubersetzungen einzugeben.