Komponenten

Komponenten sind die sichtbaren Bausteine deiner Tipp Page. Du ziehst sie in Slots, ordnest sie dort an und stellst sie rechts über die Properties ein.

Arbeiten Mit Komponenten

Ziehe eine Komponente aus der Sidebar in einen Slot oder füge sie in den ausgewählten Bereich ein.
Wähle eine Komponente auf der Canvas aus, um ihre Properties zu bearbeiten.
Komponenten können vor, nach oder innerhalb eines Slots platziert werden.
Daten-Komponenten wie Goals, Payments oder Creator Links zeigen nicht nur statischen Inhalt, sondern greifen auf die passenden Bereiche in Tipp zu.
Die Vorschau ist live. Prüfe Änderungen direkt im Preview-Tab, speichere sie aber bewusst, wenn sie auf der öffentlichen Seite landen sollen.

Übersicht

Komponente	Stärke	Wichtig
Creator Avatar	Schneller Profilanker mit Twitch Avatar.	Nutzt die Creator-Daten aus deinem Account.
Text (Titel + Inhalt)	Klassischer Inhaltsblock mit Überschrift und Text.	Gut für Erklärungen, Hinweise und kurze Abschnitte.
Text (Nur Inhalt)	Freier Text ohne separaten Titel.	Gut für kompakte Hinweise oder kleine Copy-Blöcke.
HTML + CSS	Eigener HTML/CSS-Block mit Tokens.	HTML und CSS werden bereinigt und scoped.
Table	Strukturierte Inhalte als Tabelle.	Gut für Listen, Preise, Regeln oder Vergleiche.
Media	Visuelle Medien wie Bild oder Banner.	Für starke visuelle Akzente auf der Page.
Goal Card	Ein einzelnes Goal mit Fortschritt.	Das Goal wählst du in den Properties aus.
Goal List	Mehrere Goals in einer Liste.	Zeigt aktive oder ausgewählte Goals.
Goal Stats	Monatsbetrag und Tipper Count kompakt.	Für schnelle Social-Proof-Kennzahlen.
Amount Month	Monatsbetrag als einzelne Kennzahl.	Gut als kleine Statistik-Kachel.
Tipper Count	Tipper Count als einzelne Kennzahl.	Gut neben anderen Stats oder im Hero-Bereich.
Donation Box	Beträge, Nachricht und Checkout-Start.	Benötigt Stripe Connect, wenn echte Zahlungen genutzt werden.
Creator Links	Zeigt deine aktiven Creator Links.	Links werden unter Creator Links gepflegt.
CTA Buttons	Eigene Button-Gruppe.	Für direkte Aktionen oder externe Ziele.
Divider	Saubere visuelle Trennung.	Gut zwischen Sections oder Inhaltsgruppen.
Spacer	Kontrollierter Abstand.	Nutze ihn sparsam für Rhythmus und Luft.

Creator

Creator Avatar

Der Creator Avatar zeigt dein Twitch-Profilbild als eigenen Block. Er eignet sich gut im Hero-Bereich oder als visueller Anker neben einer kurzen Vorstellung.

Stärken:

nutzt das Creator-Profilbild aus deinem Account
kann als eigenständiger visueller Block eingesetzt werden
funktioniert gut mit Text, Creator Links oder CTA Buttons daneben

Text

Text (Titel + Inhalt)

Diese Komponente ist der Standard für erklärende Inhalte. Sie trennt Titel und Inhalt sauber und passt gut für Intro-Texte, Support-Hinweise oder kurze Beschreibungen.

Stärken:

klare Struktur durch separaten Titel
schnell editierbar
gut lesbar in Hero-, Info- oder FAQ-ähnlichen Bereichen

Text (Nur Inhalt)

Diese Komponente ist ein reiner Textblock ohne separaten Titel. Sie ist besser, wenn die Section bereits eine Überschrift hat oder du nur einen kurzen Hinweis brauchst.

Stärken:

weniger visuelles Gewicht als ein Titel-Block
gut für kleine Hinweise, Microcopy oder erklärende Texte
flexibel innerhalb bestehender Layouts

HTML + CSS

HTML + CSS ist die stärkste Freiform-Komponente im Page Editor. Du kannst eigenes Markup und eigenes CSS setzen und dabei Tokens wie {{creator.name}} oder {{creator.link.{linkname}}} nutzen.

Stärken:

ideal für individuelle Blöcke, die mit Standard-Komponenten nicht exakt abbildbar sind
unterstützt Tipp Tokens für dynamische Inhalte
CSS wird auf die Komponente begrenzt, damit es nicht die komplette Page überschreibt
gut für spezielle Layouts, Badges, kleine Infoboxen oder eigene Link-/Text-Kombinationen

Sicherheit:

Bereich	Verhalten
HTML	Gefährliche Tags wie `script`, `iframe`, `form`, `input`, `button`, `object`, `embed`, `link` und `meta` werden entfernt.
Events	Inline-Handler wie `onclick`, `onload` oder ähnliche `on...` Attribute werden entfernt.
URLs	Unsichere Quellen wie `javascript:`, `data:`, `vbscript:`, `file:` und `blob:` werden aus relevanten Attributen entfernt.
Inline Style	`style="..."` im HTML wird entfernt. Nutze dafür das CSS-Feld.
CSS	`@import`, `expression(...)`, `javascript:` und `data:` werden entfernt.
Scope	CSS wird an die jeweilige Komponente gebunden. Nutze `:scope`, wenn du bewusst die Root-Fläche der Komponente stylen willst.

Tokens findest du unter Tokens. Wichtig bei Creator Links: {{creator.link.{linkname}}} bedeutet, dass {linkname} durch den Namen deines Links ersetzt wird.

Table

Die Table-Komponente ist für strukturierte Inhalte gedacht. Sie ist sinnvoll, wenn Informationen nicht als Fließtext funktionieren.

Stärken:

Zeilen und Spalten direkt im Editor pflegbar
gut für Preislisten, Regeln, Vergleiche oder kompakte Übersichten
lässt sich visuell an den Rest der Page anpassen

Media

Media ist für visuelle Inhalte wie Bilder, Banner oder andere Medienflächen gedacht. Sie hilft, eine Page weniger textlastig zu machen und wichtige Bereiche stärker zu markieren.

Stärken:

gut für Branding, Banner oder visuelle Trennung
funktioniert stark in Hero- oder Promo-Bereichen
kann Text- und CTA-Blöcke visuell unterstützen

Goals

Goals legst du in Studio an. Im Page Editor werden sie nicht automatisch sichtbar, nur weil ein Goal aktiv ist. Du wählst in der jeweiligen Goal-Komponente aus, welches Goal oder welche Goal-Gruppe angezeigt werden soll.

Goal Card

Goal Card zeigt ein einzelnes Goal mit Fortschritt. Das ist die beste Komponente, wenn ein bestimmtes Ziel gerade im Fokus stehen soll.

Stärken:

klares einzelnes Ziel
Fortschritt ist direkt verständlich
gut für Hero-Bereiche oder eigene Goal-Sections

Goal List

Goal List zeigt mehrere Goals in einer Liste. Sie eignet sich, wenn du mehrere Ziele parallel sichtbar machen willst.

Stärken:

mehrere aktive oder ausgewählte Goals auf einmal
übersichtlicher als mehrere einzelne Goal Cards
gut für eine eigene Goal-Section weiter unten auf der Page

Goal Stats

Goal Stats kombiniert Monatsbetrag und Tipper Count in einer kompakten Statistik.

Stärken:

schnelle Übersicht ohne viel Platzverbrauch
gut neben Hero-Text, Donation Box oder Creator Links
macht Aktivität sichtbar, ohne ein einzelnes Goal in den Vordergrund zu stellen

Amount Month

Amount Month zeigt den Monatsbetrag als einzelne Kennzahl.

Stärken:

fokussiert auf eine Zahl
gut für kompakte Statistik-Reihen
funktioniert gut mit Tipper Count oder Goal Stats

Tipper Count

Tipper Count zeigt die Anzahl der Tipper als einzelne Kennzahl.

Stärken:

zeigt Community-Aktivität schnell sichtbar
gut als Social-Proof-Element
funktioniert besonders gut neben Amount Month

Payments

Donation Box

Die Donation Box ist der Checkout-Einstieg auf deiner Tipp Page. Sie zeigt Beträge, optional einen eigenen Betrag, Eingaben für Name/Nachricht und den Button zum Starten der Zahlung.

Stärken:

direkte Zahlungsaktion auf der Page
Beträge und Texte sind anpassbar
kann mit einem Goal verbunden werden
unterstützt die komplette Checkout-Logik von Tipp

Wichtig:

Für echte Zahlungen muss Stripe Connect über Account bereit sein.
Gebühren, Status und finale Beträge findest du in Payments.
Wenn die Donation Box auf einer Page genutzt wird, sollte die Page erst live gehen, wenn der Zahlungsfluss geprüft ist.

Links

Creator Links

Creator Links zeigt die Links, die du unter Creator Links definierst. Dort pflegst du URL, Icon, Farbe und Sichtbarkeit. Die Komponente entscheidet dann, wie diese aktiven Links auf der Page dargestellt werden.

Stärken:

zentrale Linkpflege statt Links mehrfach im Editor zu duplizieren
Icons und Farben kommen aus deinen Link-Einstellungen
Darstellung kann im Page Editor angepasst werden
gut für Socials, Website, Discord, Shops oder andere Creator-Ziele

Wenn du Icons anpassen willst, findest du die Icon-Regeln unter Icons.

CTA Buttons

CTA Buttons ist eine eigene Button-Gruppe für direkte Aktionen. Im Gegensatz zu Creator Links sind diese Buttons eher für konkrete Page-Aktionen gedacht.

Stärken:

gut für klare Handlungsaufforderungen
mehrere Buttons in einer Gruppe möglich
passend für externe Ziele, Support-Hinweise oder wichtige Links
stärker kontrollierbar als automatisch geladene Creator Links

Layout

Divider

Divider setzt eine sichtbare Trennlinie zwischen Inhalte. Er hilft, Sections klar voneinander zu trennen, ohne direkt eine neue große Fläche zu bauen.

Stärken:

macht lange Pages lesbarer
trennt Themen visuell sauber
dezenter als eine neue große Section

Spacer

Spacer erzeugt kontrollierten Abstand zwischen Komponenten.

Stärken:

verbessert Rhythmus und Lesbarkeit
hilfreich, wenn Komponenten sonst zu eng wirken
genauer kontrollierbar als zusätzliche leere Textblöcke

Nutze Spacer bewusst. Wenn eine Page zu viele Spacer braucht, ist meistens die Section-Struktur oder das Layout der bessere Hebel.

Sinnvolle Kombinationen

Ziel	Kombination
Schnelle Startseite	Creator Avatar, Text, Creator Links, Donation Box.
Fokus auf ein Ziel	Text, Goal Card, Donation Box.
Social Proof	Goal Stats, Amount Month, Tipper Count.
Link Hub	Creator Avatar, Text (Nur Inhalt), Creator Links, CTA Buttons.
Eigener Spezialblock	HTML + CSS mit Tokens.