Einstellungen

Jedes Widget im Seiten-Builder bietet umfangreiche Einstellungsmoglichkeiten. Diese Seite erklart alle gemeinsamen und widget-spezifischen Optionen.

Einstellungen offnen

Es gibt mehrere Wege, die Widget-Einstellungen zu offnen:

Methode	Aktion
Doppeltippen	Tippe zweimal schnell auf das Widget
Kontextmenu	Halte das Widget gedruckt, wahle “Einstellungen”
Canvas-Toolbar	Wahle Widget aus, tippe auf Zahnrad

---

Tab-Struktur

Die meisten Widgets haben 3-4 Einstellungs-Tabs:

Basis

Widget-spezifische Grundeinstellungen:

• Text-Inhalt
• Bild-Upload
• Button-Label
• etc.

Layout

Grosse und Position:

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

Aktion

Nur bei interaktiven Widgets:

• Navigations-Ziel
• Aktions-Typ
• Tooltip

Erweitert

Theme und Styling:

• Theme Override Toggle
• Light/Dark Mode Farben
• Border Radius
• Schatten

---

Theme Override System

Das Theme Override System ist ein zentrales Konzept fur das Styling deiner Widgets.

Grundprinzip

Status	Beschreibung
Theme-Defaults aktiv	Widget nutzt Farben aus der Theme Suite
Theme-Defaults deaktiviert	Du definierst eigene Farben

Theme Override Toggle

Am Anfang des “Erweitert”-Tabs findest du den Toggle:

┌────────────────────────────────────┐
│ [✓] Theme-Defaults verwenden       │
│     Widget nutzt Theme Suite       │
│     3 Eigenschaften uberschrieben  │
└────────────────────────────────────┘

Wenn aktiviert:

• Widget erbt alle Farben vom globalen Theme
• Anderungen in der Theme Suite wirken automatisch
• Keine weiteren Farboptionen sichtbar

Wenn deaktiviert:

• Du siehst Light/Dark Mode Toggle
• Farbpicker fur verschiedene Eigenschaften
• Widget wird unabhangig vom Theme

Light/Dark Mode Editing

Nach dem Deaktivieren der Theme-Defaults erscheint der Mode-Toggle:

┌────────────────────────────────────┐
│  [☀️ Light]  [🌙 Dark]              │
└────────────────────────────────────┘

Du kannst fur jeden Mode separate Farben definieren:

• Light Mode: Helle Farben fur den Tag
• Dark Mode: Dunkle Farben fur die Nacht

Beide Modi bearbeiten

Wechsle regelmasig zwischen Light und Dark Mode, um beide Varianten zu gestalten.

Farbpicker

Fur jede uberschreibbare Eigenschaft gibt es einen Farbpicker:

┌────────────────────────────────────┐
│ Textfarbe                          │
│ ┌────┐                     [Reset] │
│ │ 🎨 │ #FF5733               │
│ └────┘                             │
└────────────────────────────────────┘

Element	Funktion
Farbfeld	Tippen offnet den Farbwahler
Hex-Code	Zeigt den aktuellen Farbwert
Reset	Setzt auf Theme-Wert zuruck

---

Gemeinsame Einstellungen

Diese Einstellungen sind bei den meisten Widgets verfugbar:

Breite

Wert	Beschreibung
Slider	10% bis 100%
Presets	25%, 33%, 50%, 67%, 75%, 100%
Snapping	Springt zu Presets bei 3% Toleranz

Padding

Innenabstand - Platz zwischen Widget-Rand und Inhalt.

┌───────────────────────────────────┐
│            ↑ Top (px)             │
│  ┌─────────────────────────────┐  │
│← │         Inhalt              │ →│
│  └─────────────────────────────┘  │
│          ↓ Bottom (px)            │
└───────────────────────────────────┘
  Left                        Right

Einstellung	Bereich	Typischer Wert
Top	0-50px	8-16px
Right	0-50px	8-16px
Bottom	0-50px	8-16px
Left	0-50px	8-16px

Margin

Aussenabstand - Platz zum nachsten Widget.

Einstellung	Bereich	Typischer Wert
Top	0-50px	8-16px
Right	0-50px	0-8px
Bottom	0-50px	8-16px
Left	0-50px	0-8px

Box Spacing Editor

Der visuelle Editor zeigt alle 4 Seiten auf einen Blick. Tippe auf einen Wert um ihn zu andern.

---

Widget-spezifische Einstellungen

Text-Widget

Basis

Einstellung	Beschreibung
Text	Der anzuzeigende Text (mehrsprachig)
Schriftgrosse	10-96px
Schriftgewicht	Light, Normal, Medium, Bold
Ausrichtung	Links, Zentriert, Rechts
Fett	Fettschrift aktivieren
Kursiv	Kursivschrift aktivieren
Unterstrichen	Unterstrichen aktivieren
Aufzahlung	Als Aufzahlung formatieren
Nummerierung	Als nummerierte Liste

Layout

Einstellung	Beschreibung
Leading Icon	Icon vor dem Text
Icon-Abstand	Abstand zwischen Icon und Text
Padding	Innenabstand
Margin	Aussenabstand
Max. Zeilen	Begrenzt Zeilenanzahl (1-20 oder unbegrenzt)

Erweitert

Einstellung	Beschreibung
Textfarbe	Eigene Farbe (Light/Dark)
Schriftart	Aus Google Fonts
Buchstabenabstand	Letter Spacing (-2 bis 10)
Dekoration	Unterstrichen, Durchgestrichen, etc.

---

Button-Widget

Basis

Einstellung	Beschreibung
Label	Button-Text (mehrsprachig)
Stil	Elevated, Text, Outlined
Icon aktivieren	Icon anzeigen
Icon	Aus Icon-Bibliothek wahlen
Icon-Position	Links oder Rechts vom Text

Aktion

Einstellung	Beschreibung
Aktionstyp	Seite offnen, URL, Dialog, Teilen, Zuruck
Ziel	Seite/URL je nach Aktionstyp
Tooltip	Hinweis bei langem Drucken

Layout

Einstellung	Beschreibung
Breite	10-100%
Hohe	40-80px
Padding	Innenabstand
Margin	Aussenabstand

Erweitert

Einstellung	Beschreibung
Hintergrund	Button-Farbe (Light/Dark)
Textfarbe	Label-Farbe (Light/Dark)
Border Radius	Rundung (0-32px)
Elevation	Schatten-Starke (0-12, nur Elevated)

Button-Stile:

Stil	Aussehen
Elevated	Erhohter Button mit Schatten, gefullter Hintergrund
Text	Nur Text, transparenter Hintergrund
Outlined	Rahmen, transparenter Hintergrund

---

Card-Widget

Basis

Einstellung	Beschreibung
Card-Typ	Basic, Elevated, Outlined
Elevation	Schatten-Starke (0-12, nur Elevated)

Layout

Einstellung	Beschreibung
Breite	10-100%
Ausrichtung	Links, Zentriert, Rechts
Inneres Padding	Abstand zum Inhalt
Ausserer Margin	Abstand nach aussen
Min. Hohe	Mindesthohe (50-500px)

Hintergrund

Hintergrund-Typ:

Typ	Einstellungen
Farbe	Hintergrundfarbe (Light/Dark)
Gradient	Typ (Linear/Radial), Start-/Endfarbe, Winkel
Bild	Upload, Anpassung, Overlay-Farbe/Deckkraft

Erweitert

Einstellung	Beschreibung
Border Radius	Einheitlich oder pro Ecke
Rahmenfarbe	Nur bei Outlined
Rahmenbreite	0.5-5px
Eigener Schatten	Offset, Blur, Spread, Farbe

---

Image-Widget

Basis

Einstellung	Beschreibung
Bild	Upload aus Galerie/Kamera
Anpassung	Cover, Contain, Fill, FitWidth, FitHeight
Ausrichtung	9 Positionen (topLeft bis bottomRight)

Layout

Einstellung	Beschreibung
Seitenverhaltnis	Beibehalten oder feste Hohe
Breite	10-100%
Hohe	50-500px (wenn Seitenverhaltnis aus)
Padding	Innenabstand
Margin	Aussenabstand

Erweitert

Einstellung	Beschreibung
Border Radius	Rundung (0-50px)
Deckkraft	0-100%
Clip-Verhalten	AntiAlias, HardEdge, None

---

Tab Container

Basis

Einstellung	Beschreibung
Tabs	Liste der Tabs (hinzufugen/entfernen)
Tab-Label	Name pro Tab (mehrsprachig)
Tab-Icon	Optionales Icon pro Tab
Start-Tab	Welcher Tab anfangs aktiv ist
Position	Tab-Leiste oben oder unten
Scrollbar	Aktivieren bei vielen Tabs

Erweitert

Pro Tab konfigurierbar:

Einstellung	Beschreibung
Textfarbe	Farbe des Labels
Schriftart	Font-Familie
Schriftgrosse	Grosse
Schriftgewicht	Normal bis Bold
Buchstabenabstand	Letter Spacing

Global:

Einstellung	Beschreibung
Indikatorfarbe	Farbe der aktiven Tab-Markierung
Label-Farbe	Aktiver Tab
Unselected Label	Inaktive Tabs

---

Accordion

Basis

Einstellung	Beschreibung
Panels	Liste der Panels (hinzufugen/entfernen)
Panel-Label	Titel pro Panel (mehrsprachig)
Panel-Icon	Optionales Icon
Initial geoffnet	Welche Panels beim Laden offen sind
Elevation	Schatten-Starke

Erweitert

Pro Panel konfigurierbar:

Einstellung	Beschreibung
Titelfarbe	Farbe des Panel-Titels
Icon-Farbe	Farbe des Icons
Hintergrund	Normal und Expanded
Typografie	Font, Grosse, Gewicht

Global:

Einstellung	Beschreibung
Border Radius	Pro Ecke individuell
Trennerfarbe	Farbe zwischen Panels

---

Speichern und Verwerfen

Am unteren Rand des Einstellungs-Dialogs findest du:

Button	Funktion
Abbrechen	Schliesst ohne Speichern
Speichern	Ubernimmt alle Anderungen

Ungespeicherte Anderungen

Der Dialog zeigt einen Hinweis wenn es ungespeicherte Anderungen gibt. Tippe auf “Speichern” um sie zu ubernehmen.

---

Tipps

Konsistenz durch Theme-Defaults

Lass die Theme-Defaults aktiviert fur ein konsistentes Design. Uberschreibe nur wenn wirklich notig.

Dark Mode nicht vergessen

Wenn du Farben uberschreibst, denke an beide Modi. Wechsle mit dem Toggle zwischen Light und Dark.

Reset bei Fehlern

Jeder Farbpicker hat einen Reset-Button. Nutze ihn um zur Theme-Farbe zuruckzukehren.

Padding fur Lesbarkeit

Texte und Buttons brauchen ausreichend Padding (8-16px) um gut lesbar zu sein.

Live-Vorschau nutzen

Viele Einstellungen zeigen eine Live-Vorschau im Dialog. So siehst du Anderungen sofort.

---

Haufige Fragen

Warum sehe ich keine Farboptionen?

Die Theme-Defaults sind aktiviert. Deaktiviere sie mit dem Toggle am Anfang des “Erweitert”-Tabs.

Wie kopiere ich Einstellungen zwischen Widgets?

Aktuell nicht direkt moglich. Nutze “Duplizieren” im Kontextmenu und passe dann nur den Inhalt an.

Werden meine Einstellungen gespeichert wenn ich den Dialog schliesse?

Nur wenn du auf “Speichern” tippst. “Abbrechen” oder Wischen nach unten verwirft Anderungen.

Was bedeutet “Eigenschaften uberschrieben”?

Die Zahl zeigt, wie viele Farben du manuell gesetzt hast statt die Theme-Werte zu nutzen.