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
Section titled “Sichtbarkeit”Hero-Card anzeigen
Section titled “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 |
Passe die Texte der Hero-Card an.
Titel-Uebersetzungsschluessel
Section titled “Titel-Uebersetzungsschluessel”Was es macht: Legt den Text fuer die Ueberschrift fest.
So findest du es: Hero-Card > Texte > Titel-Uebersetzungsschluessel
| Wert | Anzeige |
|---|---|
| (leer) | Standardtext: “Freunde werben, Rabatte kassieren!“ |
| referral_hero_custom | Dein individueller Uebersetzungsschluessel |
Untertitel-Uebersetzungsschluessel
Section titled “Untertitel-Uebersetzungsschluessel”Was es macht: Legt den Text fuer den Untertitel fest.
So findest du es: Hero-Card > Texte > Untertitel-Uebersetzungsschluessel
| Wert | Anzeige |
|---|---|
| (leer) | Standardtext: “Teile deinen persoenlichen Code und ihr beide profitiert” |
| referral_hero_subtitle_custom | Dein individueller Uebersetzungsschluessel |
Passe das Icon in der Hero-Card an.
Hero-Card Icon
Section titled “Hero-Card Icon”Was es macht: Waehlt 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 oeffnen und ein passendes Icon auszuwaehlen.
Beliebte Optionen:
- Geschenk-Icon (Standard)
- Herz-Icon
- Stern-Icon
- Menschen-Icon
Icon-Groesse
Section titled “Icon-Groesse”Was es macht: Bestimmt die Groesse des Icons.
So findest du es: Hero-Card > Icon > Icon-Groesse
| Wert | Beschreibung |
|---|---|
| 20px | Sehr klein |
| 32px | Klein |
| 40px | Standard |
| 56px | Gross |
| 80px | Sehr gross |
Container-Groesse
Section titled “Container-Groesse”Was es macht: Bestimmt die Groesse des runden Icon-Containers.
So findest du es: Hero-Card > Icon > Container-Groesse
| Wert | Beschreibung |
|---|---|
| 40px | Kompakt |
| 56px | Klein |
| 72px | Standard |
| 96px | Gross |
| 120px | Sehr gross |
Farben
Section titled “Farben”Passe die Farben der Hero-Card an. Du kannst separate Farben fuer Light Mode und Dark Mode festlegen.
Light/Dark Mode umschalten
Section titled “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
Section titled “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 Primaerfarbe deines Themes |
Gradient Endfarbe
Section titled “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 Sekundaerfarbe deines Themes |
Textfarbe
Section titled “Textfarbe”Was es macht: Die Farbe des Titeltexts.
So findest du es: Hero-Card > Farben > Textfarbe
| Standard | Bedeutung |
|---|---|
| Weiss | Optimal fuer dunkle Gradients |
Untertitel-Farbe
Section titled “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
Section titled “Abmessungen”Passe die Form der Hero-Card an.
Eckenradius
Section titled “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
Section titled “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 | Grosszuegig |
| 48px | Sehr grosszuegig |
Schatten
Section titled “Schatten”Fuge der Hero-Card einen Schatten hinzu.
Schatten anzeigen
Section titled “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-Unschaerfe
Section titled “Schatten-Unschaerfe”Was es macht: Wie weich der Schatten ist.
So findest du es: Hero-Card > Schatten > Schatten-Unschaerfe
| Wert | Beschreibung |
|---|---|
| 0px | Harter Schatten |
| 6px | Leicht weich |
| 12px | Standard |
| 20px | Weich |
| 30px | Sehr weich |
Schatten-Versatz Y
Section titled “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
Section titled “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
Section titled “Live-Vorschau”Am unteren Rand des Tabs findest du eine Live-Vorschau der Hero-Card. Jede Aenderung wird sofort in der Vorschau sichtbar.
Alle Einstellungen auf einen Blick
Section titled “Alle Einstellungen auf einen Blick”| Einstellung | Bereich | Standard |
|---|---|---|
| Hero-Card anzeigen | Sichtbarkeit | An |
| Titel-Schluessel | Texte | (Standard) |
| Untertitel-Schluessel | Texte | (Standard) |
| Icon | Icon | Geschenk |
| Icon-Groesse | Icon | 40px |
| Container-Groesse | 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-Unschaerfe | Schatten | 12px |
| Schatten-Versatz | Schatten | 4px |
| Schatten-Transparenz | Schatten | 30% |
Design-Beispiele
Section titled “Design-Beispiele”Klassisch (Standard)
Section titled “Klassisch (Standard)”- Gradient: Primary zu Secondary
- Ecken: 20px
- Schatten: An
- Icon: Geschenk
Ideal fuer: Die meisten Apps, professioneller Look
Modern/Flat
Section titled “Modern/Flat”- Gradient: Einfarbig oder sehr aehnliche Farben
- Ecken: 12px
- Schatten: Aus
- Icon: Minimal
Ideal fuer: Minimalistische Designs
Verspielt
Section titled “Verspielt”- Gradient: Kontrastreiche Farben
- Ecken: 40px
- Schatten: Stark (50%)
- Icon: Herz oder Stern
Ideal fuer: Lifestyle-Apps, junge Zielgruppe