Text Labels
Text Labels sind Beschreibungstexte, die du zwischen anderen Elementen einfügen kannst. Sie sind ideal für Erklärungen, Hinweise oder zusätzliche Informationen.
Text Label erstellen
Abschnitt betitelt „Text Label erstellen“- Tippe auf + in der Toolbar
- Wähle Text Label aus der Liste
- Ein neues Text Label wird hinzugefügt
- Das Smart Panel öffnet sich automatisch
Inhalt-Tab
Abschnitt betitelt „Inhalt-Tab“Im Inhalt-Tab bearbeitest du den Text und die optionalen Icons.
Was es macht: Der angezeigte Text.
So findest du es: Inhalt > Text
Bedienung: Tippe auf das Textfeld und gib deinen Text ein. Du kannst mehrzeiligen Text eingeben. Bei mehrsprachigen Apps kannst du für jede Sprache einen anderen Text eingeben.
Beispiele:
- “Push-Benachrichtigungen ermöglichen es uns, dich über wichtige Ereignisse zu informieren.”
- “Dein Profil ist derzeit öffentlich. Jeder kann es sehen.”
- “Bei Fragen erreichst du uns unter support@example.com”
Führendes Icon (Symbol links)
Abschnitt betitelt „Führendes Icon (Symbol links)“Was es macht: Ein optionales Icon, das links neben dem Text angezeigt wird.
So findest du es: Inhalt > Symbol-Stil (Links)
Bedienung:
- Tippe auf “Symbol auswählen”
- Wähle ein Icon aus der Galerie
Empfohlene Icons:
- Info-Icon - Für allgemeine Hinweise
- Warnung-Icon - Für wichtige Hinweise
- Glühbirne-Icon - Für Tipps
Trailing Icon (Symbol rechts)
Abschnitt betitelt „Trailing Icon (Symbol rechts)“Was es macht: Ein optionales Icon, das rechts neben dem Text angezeigt wird.
So findest du es: Inhalt > Symbol-Stil (Rechts)
| Einstellung | Beschreibung |
|---|---|
| Eigenes Symbol (Rechts) | Aktiviert die manuelle Konfiguration |
| Symbol anzeigen | Ob das rechte Symbol sichtbar ist |
| Symbol auswählen | Welches Icon angezeigt wird |
| Icon-Größe | Größe des Icons (12-48 px) |
| Icon-Farbe | Farbe des Icons (mit Dark Mode Unterstützung) |
Stil-Tab
Abschnitt betitelt „Stil-Tab“Im Stil-Tab passt du die Typografie und das Layout an.
Titel-Typografie
Abschnitt betitelt „Titel-Typografie“| Einstellung | Standard | Bereich | Beschreibung |
|---|---|---|---|
| Schriftart | Theme-Schriftart | Galerie | Die verwendete Schriftfamilie |
| Schriftgröße | 16 pt | 10-28 pt | Größe des Texts |
| Schriftstärke | 500 | 100-900 | Dicke der Schrift |
| Kursiv | Aus | An/Aus | Schrägstellung des Texts |
| Buchstabenabstand | 0 px | -2 bis 5 px | Abstand zwischen Buchstaben |
| Zeilenhöhe | 1.2 | 1.0-2.0 | Abstand zwischen Zeilen |
| Textfarbe | Theme-Farbe | Farbwähler | Farbe des Texts |
| Einstellung | Standard | Bereich | Beschreibung |
|---|---|---|---|
| Horizontaler Abstand | 16 px | 0-48 px | Abstand links und rechts |
| Vertikaler Abstand | 12 px | 0-48 px | Abstand oben und unten |
Erweitert-Tab
Abschnitt betitelt „Erweitert-Tab“Im Erweitert-Tab kannst du Theme-Überschreibungen vornehmen.
Theme-Einstellungen verwenden
Abschnitt betitelt „Theme-Einstellungen verwenden“Was es macht: Aktiviert oder deaktiviert die automatische Übernahme der Theme-Farben.
Optionen:
| Einstellung | Wirkung |
|---|---|
| Aktiviert | Text Label verwendet automatisch die Theme-Farben |
| Deaktiviert | Du kannst eigene Farben definieren |
Wenn deaktiviert, erscheinen zusätzliche Optionen:
Hellmodus-Farben
Abschnitt betitelt „Hellmodus-Farben“| Einstellung | Beschreibung |
|---|---|
| Textfarbe | Farbe des Texts im Light Mode |
| Symbolfarbe | Farbe der Icons im Light Mode |
Dunkelmodus-Farben
Abschnitt betitelt „Dunkelmodus-Farben“| Einstellung | Beschreibung |
|---|---|
| Textfarbe (Dunkel) | Farbe des Texts im Dark Mode |
| Symbolfarbe (Dunkel) | Farbe der Icons im Dark Mode |
Beispiele
Abschnitt betitelt „Beispiele“Einfacher Hinweistext
Abschnitt betitelt „Einfacher Hinweistext“| Einstellung | Wert |
|---|---|
| Text | Diese Einstellung kann nicht rückgängig gemacht werden. |
| Icon (Links) | Info-Icon |
| Schriftgröße | 14 pt |
| Textfarbe | Sekundärfarbe (gedämpft) |
Warnhinweis
Abschnitt betitelt „Warnhinweis“| Einstellung | Wert |
|---|---|
| Text | Achtung: Das Löschen deines Kontos ist endgültig! |
| Icon (Links) | Warnung-Icon |
| Textfarbe | Rot/Orange (Warnfarbe) |
| Schriftstärke | 600 |
Erklärungstext unter einer Überschrift
Abschnitt betitelt „Erklärungstext unter einer Überschrift“| Einstellung | Wert |
|---|---|
| Text | Hier kannst du festlegen, welche Benachrichtigungen du erhalten möchtest. |
| Icon (Links) | Keins |
| Schriftgröße | 13 pt |
| Textfarbe | Sekundärfarbe (gedämpft) |
| Schriftstärke | 400 |
Tipp-Box
Abschnitt betitelt „Tipp-Box“| Einstellung | Wert |
|---|---|
| Text | Tipp: Du kannst dein Profil jederzeit auf privat stellen. |
| Icon (Links) | Glühbirne-Icon |
| Textfarbe | Primärfarbe |
| Schriftstärke | 500 |
Wann Text Labels verwenden?
Abschnitt betitelt „Wann Text Labels verwenden?“Gute Anwendungsfälle
Abschnitt betitelt „Gute Anwendungsfälle“- Erklärungen - Was macht eine Einstellung genau?
- Hinweise - Worauf sollte der Nutzer achten?
- Tipps - Wie kann der Nutzer etwas besser machen?
- Kontextinfos - Warum ist etwas wichtig?
- Rechtliche Hinweise - Kurze Datenschutz-Infos
Weniger gute Anwendungsfälle
Abschnitt betitelt „Weniger gute Anwendungsfälle“- Lange Absätze (besser auf eigene Seite verlinken)
- Komplexe Anleitungen (besser als FAQ oder Hilfe-Seite)
- Wiederholende Informationen (einmal reicht)