Overlay Builder Grundlagen
Wichtige Korrektur vorab: Die Namen haben sich verschoben. /dashboard/overlays ist im Dashboard-Menü heute als « Pro Editor » gelabelt und ist der Standard-Einstieg für neue Overlays - pixelgenau, Canvas-basiert (/overlay/editor.php). Der klassische Overlay Builder (diese Seite behandelt ihn) ist die schlankere, ältere Komponente ohne Canvas und Pixel-Positionierung - sie lebt heute vor allem als Schnellstart/Legacy-Builder weiter und als Basis für den KI-gestützten AI-Builder (Pro-Tarif). Für die volle Wahrheit zum Verhältnis der beiden Editoren siehe [Overlay Pro Editor vs Builder] und Book Pro Editor → Seite Pro Editor Grundlagen.
Korrektur (Code-Check 2026-07-08): Der Legacy-Builder ist nicht mehr aufrufbar. Wurde die Route /dashboard/overlay-builder am 2026-06-11 "RETIRED" - sie mountet keine Builder-UI mehr, sondern nur einen Redirect-Stub (), der sofort auf /dashboard/overlays (Pro Editor) weiterleitet. Es gibt also aktuell keine erreichbare Drei-Spalten-Builder-Oberfläche, keinen Presets-Dialog mit Layout-Packs im laufenden Betrieb und keinen "wechsle zwischen Builder und Pro Editor"-Workflow - die unten beschriebene Builder-UI, die Layout-Packs und die Vergleichstabelle mit dem Pro Editor beschreiben eine Komponente, die es technisch noch gibt (), aber seit der Retirement-Route nicht mehr von echten Nutzern erreicht werden kann.
Die drei Wege zu einem Overlay
| Weg | Wo | Für wen |
|---|---|---|
| Pro Editor (Standard) | Menü « Pro Editor » → /dashboard/overlays | Alle - Klick auf + Neues Overlay, Name eingeben, fertig ist der pixelgenaue Canvas-Editor. |
| Overlay Builder (Legacy/Schnellstart) | über bestehende ältere Overlays, oder als Basis für den AI-Builder | Alte Entwürfe pflegen, oder wenn du schnell ein einfaches Layout ohne Canvas willst. |
| AI-Builder (Pro-Tarif) | Menü « AI-Builder » → /dashboard/ai-builder | Overlay per Text-Prompt von der KI zusammenbauen lassen; nutzt intern dieselbe Element-Registry wie Builder/Pro Editor. |
Es gibt keinen Auswahldialog "Builder oder Pro Editor?" beim Anlegen mehr, wie man es vielleicht aus älteren Screenshots kennt. Ein Klick auf + Neues Overlay auf der Pro-Editor-Seite fragt nur nach einem Namen und legt danach direkt den Canvas-Editor an.
Aufbau des (Legacy-)Builders
Wo du den Builder noch siehst, hat er drei Bereiche:
| Bereich | Funktion |
|---|---|
| Linke Spalte | Element-Palette (siehe unten - deutlich mehr als 10 Typen) |
| Mitte | Live-Preview, 16:9, 1920×1080 als Referenz |
| Rechte Spalte | Eigenschaften des aktuell gewählten Elements |
Die Preview ist live: jede Änderung in der rechten Spalte ist sofort sichtbar. Positionierung läuft über Preset-Quadranten und Slider, nicht über exakte Pixelwerte - dafür ist der Pro Editor da (Drag, Resize-Handles, Multi-Select mit Shift, exakte x/y/width/height-Felder).
Verfügbare Elemente (echte Liste aus der Element-Registry)
Die alte Vorstellung "10 Builder-Widgets" stimmt nicht mehr - die gemeinsame Element-Registry (Quelle für Builder, Pro Editor und AI-Builder) kennt aktuell rund 25 Element-Typen in sechs Kategorien:
- Text & Medien: Text, Bild, Form (Box), Webcam-Platzhalter
- Widgets: Viewer-Count, Chat-Box, Goal-Bar, Event-Liste, Umfrage (Poll), Leaderboard, Timer, Fußball-Spielstand
- Alerts: Live Alert-Box (Ein-/Ausblenden bestehender Alerts), Alert-Element (eigenständiges, optisch konfigurierbares Alert-Objekt im Editor), Celebration-Effekt
- Labels: Latest Follower, Latest Sub, Latest Tip, Latest Raid, Latest Cheer, Top Donor
- Stream-Tools: Giveaway, Sponsor/Ad-Rotator, Gaming Queue, Call-in Show
- OBS/Quellen: OBS-Quelle (nur im Regie-Pult/Producer sichtbar, steuert echte OBS-Szenen via Chatlix Connect)
Namen wie "Follower-Counter", "Sub-Counter", "Donation-Goal", "Recent-Events-Liste", "Hype-Train" oder "Text-Banner" aus älteren Doku-Versionen gibt es so nicht mehr - die heutigen Entsprechungen sind "Latest Follower"/"Latest Sub" (Labels), "Goal-Bar"/"Ziel", "Event-Liste" und schlicht "Text". Ein dediziertes Hype-Train-Widget existiert aktuell nicht im Editor-Katalog.
Subscriber-Widget: Es gibt kein Widget names "Subscriber" - Sub-Events tauchen im Alert-Element, in der Event-Liste und als Latest Sub-Label auf. Dieser Pfad ist praktisch geprüft und funktioniert zuverlässig.
Speichern und Browser-Source
Oben rechts: « Speichern ». Direkt daneben « Browser-Source-URL » (bzw. das 📋-Icon auf der Übersichtsseite) - das ist die URL für OBS, siehe Book Browser Source Setup → Seite Browser Source Grundlagen. Die URL/der Token bleibt beim Speichern stabil und bleibt auch beim Wechsel zwischen Builder und Pro Editor identisch, weil beide UIs dieselbe Overlay-Datenbankzeile (inkl. Token) bearbeiten - es gibt keinen separaten "Import"-Schritt.
Vorlagen: Layout-Packs statt Szenen-Templates
Ältere Doku sprach von Szenen-Vorlagen wie "Starting Soon", "Just Chatting", "Gameplay", "BRB", "Stream Ending". Das ist überholt: Mehrere Szenen in einem Overlay sind ein Pro-Editor-Feature (Szenen-Selector, per URL-Parameter &scene= gesteuert - siehe [Overlay Pro Editor vs Builder]). Der Builder/Presets-Dialog bietet stattdessen optische Layout-Packs an, aktuell zwölf Themen-Gruppen:
- Neon Gaming, Cozy Stream, Horror Chaos, Retro Arcade, Minimal Clean, Fantasy RPG, Meme Chaos, Hype Action, Cinematic, Synthwave, Music Show (und weitere unter "Mehr Layouts")
Jedes Preset ist ein fertiges Mini-Layout mit maximal 5 Elementen (z. B. "Neon Gaming": Text-Banner oben, Viewer-Count rechts oben, Chat-Box unten links, Goal-Bar unten rechts) und lässt sich danach frei anpassen. Ein Preset ist immer nur ein Startpunkt für die Elemente innerhalb einer Szene, keine komplette Multi-Szenen-Show.
Limits
Das Element-Limit ist tarifabhängig und gilt für Builder und Pro Editor gemeinsam (gemeinsames Backend-Limit overlay_elements_max):
| Tarif | Max. Elemente |
|---|---|
| Free / Starter | 20 |
| Creator / Pro | 50 |
| Pro Max / Elite / Studio | 100 |
| Team | 150 (absolutes Hardlimit, gilt für alle Tarife) |
Zusätzlich gilt weiterhin im (Legacy-)Builder:
- Keine Custom-Animationen jenseits der eingebauten Presets.
- Keine manuelle Z-Reihenfolge - die Elemente liegen automatisch in sinnvoller Stapelung.
- Kein Custom-CSS pro Element (das existiert aktuell auch im Pro Editor nicht als Feature - ältere Doku, die das behauptet, ist falsch).
- Keine Mehrfach-Szenen in einem Layout.
Wenn du an eines dieser Limits stößt: das ist der Moment für den Pro Editor - siehe Book Pro Editor → Pro Editor Grundlagen.
Speicher-Verhalten
Weder Builder noch Pro Editor speichern automatisch. Es gibt einen "Unsaved changes"-Indikator; wenn der leuchtet, hast du ungesicherte Änderungen. Beim Tab-Schließen kommt eine Browser-Warnung. Änderungen sind erst nach « Speichern » in der Browser-Source sichtbar - der häufigste "Warum sehe ich meine Änderung nicht in OBS"-Fehler ist schlicht vergessenes Speichern.
Zur Selbstdiagnose gibt es eine eigene Seite im Dashboard-Menü: « Overlay Debug » (/dashboard/overlay-debug), gedacht genau für "Warum zeigt mein Overlay nichts?". Schau dort zuerst nach, bevor du Support kontaktierst.
Verwandt
- Book Browser Source Setup: URL in OBS einbinden, empfohlene Settings, Flacker-Fehler beheben.
- Book Pro Editor: Canvas, Szenen, Versionen, API-Zugriffe, Troubleshooting.
- [Mein erstes Overlay] - kompletter Walkthrough.
- [Wichtige Widgets] - Detail zu den einzelnen Element-Typen.
Mobile
Der Builder funktioniert auf Tablets eingeschränkt (Drag-Drop ist Touch-fähig), auf Smartphones nicht sinnvoll bedienbar. Für Layout-Arbeit: Desktop-Browser auf 1920×1080 oder mehr.