Hero-Card

Im Hero-Card-Tab gestaltest du das Aussehen der grossen Referral-Karte, die auf der “Freunde werben”-Seite angezeigt wird. Du kannst Farben, Icon, Abmessungen und Schatten anpassen.

Sichtbarkeit

Hero-Card anzeigen

Was es macht: Zeigt oder verbirgt die Hero-Card auf der Referral-Seite.

So findest du es: Hero-Card > Sichtbarkeit > Hero-Card anzeigen

Einstellung	Wirkung
An	Die Hero-Card wird prominent angezeigt
Aus	Keine Hero-Card, nur Referral-Code und Statistiken

Gut zu wissen

Wenn du die Hero-Card deaktivierst, werden alle weiteren Einstellungen in diesem Tab ausgeblendet.

---

Texte

Passe die Texte der Hero-Card an.

Titel-Übersetzungsschlüssel

Was es macht: Legt den Text für die Überschrift fest.

So findest du es: Hero-Card > Texte > Titel-Übersetzungsschlüssel

Wert	Anzeige
(leer)	Standardtext: “Freunde werben, Rabatte kassieren!“
referral_hero_custom	Dein individueller Übersetzungsschlüssel

Gut zu wissen

Lasse das Feld leer, um den Standardtext zu verwenden. Für individuelle Texte trage den Übersetzungsschlüssel ein und definiere ihn in den App-Übersetzungen.

---

Untertitel-Übersetzungsschlüssel

Was es macht: Legt den Text für den Untertitel fest.

So findest du es: Hero-Card > Texte > Untertitel-Übersetzungsschlüssel

Wert	Anzeige
(leer)	Standardtext: “Teile deinen persönlichen Code und ihr beide profitiert”
referral_hero_subtitle_custom	Dein individueller Übersetzungsschlüssel

---

Icon

Passe das Icon in der Hero-Card an.

Hero-Card Icon

Was es macht: Wählt das Icon, das in der Hero-Card angezeigt wird.

So findest du es: Hero-Card > Icon > Hero-Card Icon

Tippe auf das Feld, um den Icon-Picker zu öffnen und ein passendes Icon auszuwählen.

Beliebte Optionen:

• Geschenk-Icon (Standard)
• Herz-Icon
• Stern-Icon
• Menschen-Icon

---

Icon-Größe

Was es macht: Bestimmt die Größe des Icons.

So findest du es: Hero-Card > Icon > Icon-Größe

Wert	Beschreibung
20px	Sehr klein
32px	Klein
40px	Standard
56px	Gross
80px	Sehr gross

---

Container-Größe

Was es macht: Bestimmt die Größe des runden Icon-Containers.

So findest du es: Hero-Card > Icon > Container-Größe

Wert	Beschreibung
40px	Kompakt
56px	Klein
72px	Standard
96px	Gross
120px	Sehr gross

Tipp

Der Container sollte immer größer sein als das Icon, um ausreichend Polsterung zu haben.

---

Farben

Passe die Farben der Hero-Card an. Du kannst separate Farben für Light Mode und Dark Mode festlegen.

Light/Dark Mode umschalten

Am oberen Rand des Farben-Bereichs findest du einen Toggle, um zwischen Light Mode und Dark Mode Einstellungen zu wechseln.

---

Gradient Startfarbe

Was es macht: Die Anfangsfarbe des Farbverlaufs (links oben).

So findest du es: Hero-Card > Farben > Gradient Startfarbe

Standard	Bedeutung
Primary-Farbe	Verwendet die Primärfarbe deines Themes

Tipp

Du kannst die Farbe zurücksetzen, um wieder die Theme-Farbe zu verwenden.

---

Gradient Endfarbe

Was es macht: Die Endfarbe des Farbverlaufs (rechts unten).

So findest du es: Hero-Card > Farben > Gradient Endfarbe

Standard	Bedeutung
Secondary-Farbe	Verwendet die Sekundärfarbe deines Themes

---

Textfarbe

Was es macht: Die Farbe des Titeltexts.

So findest du es: Hero-Card > Farben > Textfarbe

Standard	Bedeutung
Weiss	Optimal für dunkle Gradients

---

Untertitel-Farbe

Was es macht: Die Farbe des Untertitels.

So findest du es: Hero-Card > Farben > Untertitel-Farbe

Standard	Bedeutung
Weiss (90% Alpha)	Leicht transparentes Weiss

---

Abmessungen

Passe die Form der Hero-Card an.

Eckenradius

Was es macht: Rundung der Card-Ecken.

So findest du es: Hero-Card > Abmessungen > Eckenradius

Wert	Beschreibung
0px	Eckig
8px	Leicht gerundet
16px	Mittel gerundet
20px	Standard
32px	Stark gerundet
40px	Sehr stark gerundet

---

Innenabstand

Was es macht: Abstand zwischen Rand und Inhalt.

So findest du es: Hero-Card > Abmessungen > Innenabstand

Wert	Beschreibung
8px	Kompakt
16px	Klein
24px	Standard
32px	Großzügig
48px	Sehr großzügig

---

Schatten

Fuge der Hero-Card einen Schatten hinzu.

Schatten anzeigen

Was es macht: Aktiviert oder deaktiviert den Schatten.

So findest du es: Hero-Card > Schatten > Schatten anzeigen

Einstellung	Wirkung
An	Card hat einen Schatten
Aus	Kein Schatten

---

Schatten-Unschärfe

Was es macht: Wie weich der Schatten ist.

So findest du es: Hero-Card > Schatten > Schatten-Unschärfe

Wert	Beschreibung
0px	Harter Schatten
6px	Leicht weich
12px	Standard
20px	Weich
30px	Sehr weich

---

Schatten-Versatz Y

Was es macht: Wie weit der Schatten nach unten versetzt ist.

So findest du es: Hero-Card > Schatten > Schatten-Versatz Y

Wert	Beschreibung
0px	Kein Versatz
2px	Minimal
4px	Standard
8px	Deutlich
20px	Stark

---

Schatten-Transparenz

Was es macht: Wie stark der Schatten sichtbar ist.

So findest du es: Hero-Card > Schatten > Schatten-Transparenz

Wert	Beschreibung
10%	Sehr dezent
20%	Dezent
30%	Standard
50%	Deutlich
70%	Stark

---

Live-Vorschau

Am unteren Rand des Tabs findest du eine Live-Vorschau der Hero-Card. Jede Änderung wird sofort in der Vorschau sichtbar.

---

Alle Einstellungen auf einen Blick

Einstellung	Bereich	Standard
Hero-Card anzeigen	Sichtbarkeit	An
Titel-Schlüssel	Texte	(Standard)
Untertitel-Schlüssel	Texte	(Standard)
Icon	Icon	Geschenk
Icon-Größe	Icon	40px
Container-Größe	Icon	72px
Gradient Start	Farben	Primary
Gradient Ende	Farben	Secondary
Textfarbe	Farben	Weiss
Untertitelfarbe	Farben	Weiss (90%)
Eckenradius	Abmessungen	20px
Innenabstand	Abmessungen	24px
Schatten anzeigen	Schatten	An
Schatten-Unschärfe	Schatten	12px
Schatten-Versatz	Schatten	4px
Schatten-Transparenz	Schatten	30%

---

Design-Beispiele

Klassisch (Standard)

• Gradient: Primary zu Secondary
• Ecken: 20px
• Schatten: An
• Icon: Geschenk

Ideal für: Die meisten Apps, professioneller Look

---

Modern/Flat

• Gradient: Einfarbig oder sehr ähnliche Farben
• Ecken: 12px
• Schatten: Aus
• Icon: Minimal

Ideal für: Minimalistische Designs

---

Verspielt

• Gradient: Kontrastreiche Farben
• Ecken: 40px
• Schatten: Stark (50%)
• Icon: Herz oder Stern

Ideal für: Lifestyle-Apps, junge Zielgruppe

---

Tipps

Theme-Farben nutzen

Lasse die Farben auf den Standardwerten, um automatisch die Primary und Secondary Farben deines Themes zu verwenden. So bleibt alles konsistent.

Dark Mode nicht vergessen

Wechsle zum Dark Mode Toggle und passe die Farben für dunkle Hintergründe an. Oft funktionieren die gleichen Gradient-Farben, aber manchmal brauchst du höhere Kontraste.

Vorschau nutzen

Scrolle nach unten zur Live-Vorschau, um deine Änderungen sofort zu sehen. So kannst du schnell iterieren.

Weniger ist mehr

Eine subtile Hero-Card wirkt oft professioneller als eine mit starken Schatten und extremen Farben.