Szenen, Overlays & Design — der Browser-Editor

So baust du deine Szenen, Overlays und Widgets komplett im Browser — Bereiche platzieren, Elemente hinzufügen und das Aussehen im Design-Editor pflegen. Keine lokale OBS nötig.

Bei FizzyPeak baust du deine Szenen und Overlays direkt im Browser — du brauchst dafür keine lokale OBS-Installation. Dieser Artikel zeigt, wie der Szenen-Editor aufgebaut ist, wie du Elemente hinzufügst und wo du das Aussehen änderst.

Das Grundprinzip: Position vs. Aussehen

FizzyPeak trennt zwei Dinge sauber:

• Szenen-Editor = wo ein Element liegt (Position, Größe, Ebene) und in welchen Szenen es sichtbar ist.
• Design-Editor = wie ein Element aussieht (Inhalt, Farben, Schrift, alle Gestaltungs-Optionen).

Das Aussehen eines Widgets wird ausschließlich im Design-Editor gepflegt. Im Szenen-Editor findest du dafür einen Sprung-Button ("Design Editor" / "Open design editor"), der dich direkt zum passenden Element bringt.

Szenen und dein Tarif

Welche Szenen dir zur Verfügung stehen, hängt vom Tarif ab:

(Jahrespreise: 12 / 17 / 30 € pro Monat.)

Gesperrte Standard-Szenen werden im Editor angezeigt, aber mit Schloss-Symbol — ein Klick zeigt den Upgrade-Hinweis. Eigene Szenen aus dem Cloud-OBS-Studio (IRL Pro+) tauchen ebenfalls in der Szenenleiste auf.

Im Starter-Tarif wird im Editor ein FizzyPeak-Wasserzeichen unten rechts angezeigt — es entspricht 1:1 dem späteren Stream-Output. Ab Creator entfällt es.

Zwei Editor-Modi: Simple und Pro

Oben im Editor schaltest du zwischen zwei Modi um:

• Simple — arbeitet mit Bereichs-Kacheln (Areas) statt freiem Drag-Canvas. Gut für schnelle Einrichtung, besonders auf Touch-Geräten.
• Pro — freier Drag-Canvas mit Live-Widgets (Stil wie StreamElements).

Der gewählte Modus wird gespeichert. Standardmäßig ist es auf dem Desktop Pro, auf Touch-Geräten Simple.

Hinweis: Simple und Pro nutzen getrennte Layouts. Ein Wechsel überträgt nicht automatisch — dein anderes Layout bleibt aber gespeichert.

Der Pro-Editor im Überblick

Der Pro-Editor ist dreigeteilt:

1. Links — Layers-Panel: Liste aller Overlays, gruppiert nach Typ, mit Suche und einem Filter "Nur in dieser Szene". Pro Eintrag kannst du das Element ein-/ausblenden, umbenennen, duplizieren oder löschen. Oben sitzt der "Add widget"-Button, unten "Reset positions".
2. Mitte — Canvas: Die 1920 × 1080-Arbeitsfläche der aktuell gewählten Szene. Hier ziehst du Elemente, änderst die Größe und ordnest Ebenen.
3. Rechts — Quick-Edit-Panel: Erscheint, wenn du ein Element auswählst (siehe unten).

Elemente auf dem Canvas bewegen

• Ziehen = verschieben
• Ecken = proportional skalieren (Alt = frei)
• Kanten = Breite/Höhe einzeln
• Pfeiltasten = 10 px verschieben (Alt = 1 px)
• Shift = ohne Raster-Einrasten
• Alt + Klick = Widget darunter auswählen
• Entf = aus der Szene entfernen
• Esc = Auswahl aufheben

Über die Zoom-Buttons unter dem Canvas vergrößerst/verkleinerst du die Ansicht. Mit der OBS-BG-Funktion kannst du deinen Live-Stream als Hintergrund einblenden, um Overlays passend zu platzieren.

Elemente hinzufügen — der Add-Picker

Über "Add widget" öffnet sich der Add-Picker (ein Slide-over) mit mehreren Quellen in der linken Leiste:

• Widgets — die Grundbausteine
• Text / Media — eigene Text- und Medien-Elemente
• Gallery — fertige Vorlagen aus der Galerie
• My overlays — deine bereits angelegten Overlays
• My widgets — deine eigenen (Custom-)Widgets
• Overlay URL — ein externes Overlay per URL einbinden

Wähle eine Quelle, klicke das gewünschte Element an, und es landet direkt in der aktuellen Szene.

Das Quick-Edit-Panel (3 Tabs)

Wenn du ein Element auswählst, öffnet sich rechts das Quick-Edit-Panel mit drei Reitern:

• Position — X / Y / Breite / Höhe / Z-Ebene plus Schnell-Presets. Hier findest du auch "Position in andere Szenen kopieren" und den Button "Design Editor", der das Aussehen öffnet.
• Einstellungen — typ-spezifische Optionen. Aussehen und Inhalt selbst werden hier nicht bearbeitet, sondern per Sprung in den Design-Editor.
• Scenes — legt fest, in welchen Szenen das Element sichtbar ist (Szenen-Zuordnung).

Das Aussehen ändern — Design-Editor

Um Farben, Schrift, Inhalt und alle weiteren Gestaltungs-Optionen zu pflegen, klickst du im Szenen-Editor auf "Design Editor" / "Open design editor" (Paletten-Symbol). Der Design-Editor öffnet sich direkt zum gewählten Element — mit allen Optionen und Live-Vorschau.

Eigene Custom-Widgets haben kein klassisches Design-Schema — bei ihnen ist der Code-Editor der "volle Editor".

So bleibt die Aufteilung immer eindeutig: Position machst du im Szenen-Editor, das Aussehen im Design-Editor.

Schritt für Schritt: eine Szene einrichten

1. Öffne den Szenen-Editor und wähle oben die Szene (z. B. Live).
2. Wähle den Modus (Pro für freies Platzieren, Simple für Kacheln).
3. Klicke "Add widget" und füge über den Add-Picker deine Elemente hinzu.
4. Ziehe sie auf dem Canvas an die richtige Stelle und passe die Größe an.
5. Feinjustiere bei Bedarf Position/Z-Ebene im Position-Tab.
6. Öffne den Design-Editor, um Aussehen und Inhalt zu gestalten.
7. Lege im Scenes-Tab fest, in welchen Szenen das Element erscheinen soll.

Mit "Position in andere Szenen kopieren" überträgst du eine fertige Anordnung schnell auf weitere Szenen.

Noch Fragen? Öffne das Dashboard oder schreib im Discord #support.