# Overlay Builder Grundlagen

# Overlay Builder Grundlagen

Der **Overlay Builder** ist der einfache Editor im Dashboard. Du findest ihn unter `/dashboard/overlays` über den Button `« Neues Overlay »` → `« Builder »`. Im Gegensatz zum Pro Editor läuft alles in SvelteKit, ohne Canvas-Modus, ohne Pixel-Positionierung.

## Wann nutzt man den Builder?

- Du willst in 5 Minuten ein brauchbares Overlay haben.
- Du brauchst Alerts, Chat-Box, vielleicht einen Follower-Counter - kein extravagantes Layout.
- Du willst nicht in Z-Order, Element-Listen und Versionen denken.

Für alles andere ist der **Pro Editor** das richtige Werkzeug. Siehe [Overlay Pro Editor vs Builder].

## Aufbau

Der Builder hat drei Bereiche:

| Bereich | Funktion |
|---|---|
| Linke Spalte | Widget-Liste (~10 vorgefertigte Bausteine) |
| Mitte | Live-Preview, 16:9, 1920×1080 als Referenz |
| Rechte Spalte | Eigenschaften des aktuell gewählten Widgets |

Die Preview ist live: jede Änderung in der rechten Spalte ist sofort sichtbar.

## Verfügbare Widgets

Die Builder-Liste ist bewusst kurz gehalten:

- Alert
- Chat-Box
- Follower-Counter
- Sub-Counter
- Donation-Goal
- Recent-Events-Liste
- Hype-Train
- Logo / Bild
- Text-Banner
- Timer

Jedes Widget hat sinnvolle Defaults. Du kannst Größe und Position über Slider und Preset-Quadranten ändern (`Oben links`, `Oben rechts`, `Unten Mitte` etc.). Pixel-Werte sind möglich, aber nicht der Standard-Workflow.

## Speichern und Browser-Source

Oben rechts: `« Speichern »`. Direkt daneben `« Browser-Source-URL »` - das ist die URL für OBS (siehe [Browser Source Grundlagen]). Die URL bleibt beim Speichern stabil; der Token ändert sich nur, wenn du ihn aktiv rotierst.

## Vorlagen

Über `« Aus Vorlage »` bekommst du Starter-Layouts:

- `Starting Soon` - Countdown + Logo + Social-Links
- `Just Chatting` - Cam-Frame + Chat-Box + Recent-Events
- `Gameplay` - kleines Cam-Frame oben, Counter unten
- `BRB` - Logo + Animations-Loop + "Be Right Back"-Text
- `Stream Ending` - Followers heute / Subs heute / Top-Chatter

Vorlagen sind ein Startpunkt - du kannst alles ändern.

## Limits

Der Builder hat bewusst Grenzen:

- Maximal **ein** Overlay = eine Szene. Mehrere Szenen brauchst du im Pro Editor.
- Keine Custom-Animationen.
- Keine pixelgenaue Z-Reihenfolge - die Widgets liegen automatisch in einer sinnvollen Stapelung.
- Kein Custom-CSS.

Wenn du an eines dieser Limits stößt: das ist der Moment für den Pro Editor.

## Speicher-Verhalten

Der Builder speichert **nicht automatisch**. Es gibt einen "Unsaved changes"-Indikator oben rechts; wenn der orange leuchtet, hast du ungesicherte Änderungen. Beim Tab-Schließen kommt eine Browser-Warnung.

Änderungen sind erst dann in der Browser-Source sichtbar, wenn du gespeichert hast. Falls du im Preview etwas siehst, was in OBS nicht ankommt: meistens vergessen zu speichern.

## Mobile

Der Builder funktioniert auf Tablets eingeschränkt (Drag-Drop ist Touch-fähig), auf Smartphones nicht sinnvoll bedienbar. Für Layout-Änderungen unterwegs ist das ok; für ernsthafte Layout-Arbeit ein Desktop-Browser auf 1920×1080 oder mehr.