Überschriften
Überschriften (Section Headers) helfen dir, die Einstellungsseite in logische Abschnitte zu unterteilen. Sie sind ideal, um zusammengehörige Einstellungen zu gruppieren.
Überschrift erstellen
Abschnitt betitelt „Überschrift erstellen“- Tippe auf + in der Toolbar
- Wähle Überschrift aus der Liste
- Eine neue Überschrift wird hinzugefügt
- Das Smart Panel öffnet sich automatisch
Inhalt-Tab
Abschnitt betitelt „Inhalt-Tab“Im Inhalt-Tab bearbeitest du den Text und das führende Icon der Überschrift.
Was es macht: Der Text, der als Überschrift angezeigt wird.
So findest du es: Inhalt > Titel
Bedienung: Tippe auf das Textfeld und gib deinen Text ein. Bei mehrsprachigen Apps kannst du für jede Sprache einen anderen Text eingeben.
Führendes Icon (Symbol links)
Abschnitt betitelt „Führendes Icon (Symbol links)“Was es macht: Ein optionales Icon, das links neben der Überschrift angezeigt wird.
So findest du es: Inhalt > Symbol-Stil (Links)
Bedienung:
- Tippe auf “Symbol auswählen”
- Wähle ein Icon aus der Galerie
- Oder suche nach einem bestimmten Icon
Optionen:
| Einstellung | Wirkung |
|---|---|
| Kein Icon | Nur Text wird angezeigt |
| Icon wählen | Icon erscheint links neben dem Text |
Trailing Icon (Symbol rechts) - Erweitert
Abschnitt betitelt „Trailing Icon (Symbol rechts) - Erweitert“Was es macht: Ein optionales Icon, das rechts neben der Überschrift angezeigt wird.
So findest du es: Inhalt > Symbol-Stil (Rechts)
Hier kannst du das Standard-Verhalten überschreiben:
| 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 der Überschrift an.
Dark Mode Toggle
Abschnitt betitelt „Dark Mode Toggle“Am oberen Rand des Tabs findest du einen Toggle:
- Light Mode wird bearbeitet - Du bearbeitest die helle Variante
- Dark Mode wird bearbeitet - Du bearbeitest die dunkle Variante
Tippe auf den Toggle um zwischen den Modi zu wechseln.
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 Titeltexts |
| Schriftstärke | 500 | 100-900 | Dicke der Schrift (Light bis Black) |
| 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 Titels |
Untertitel-Typografie
Abschnitt betitelt „Untertitel-Typografie“Falls deine Überschrift einen Untertitel hat, kannst du auch dessen Stil anpassen:
| Einstellung | Standard | Bereich | Beschreibung |
|---|---|---|---|
| Schriftart | Theme-Schriftart | Galerie | Die verwendete Schriftfamilie |
| Schriftgröße | 14 pt | 8-20 pt | Größe des Untertitels |
| Schriftstärke | 400 | 100-900 | Dicke der Schrift |
| Textfarbe | Sekundärfarbe | Farbwähler | Farbe des Untertitels |
| 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 entscheiden, ob die Überschrift die Theme-Standardfarben verwendet oder eigene Farben.
Theme-Einstellungen verwenden
Abschnitt betitelt „Theme-Einstellungen verwenden“Was es macht: Aktiviert oder deaktiviert die automatische Übernahme der Theme-Farben.
Optionen:
| Einstellung | Wirkung |
|---|---|
| Aktiviert | Überschrift 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 Titeltexts im Light Mode |
| Symbolfarbe | Farbe der Icons im Light Mode |
Dunkelmodus-Farben
Abschnitt betitelt „Dunkelmodus-Farben“| Einstellung | Beschreibung |
|---|---|
| Textfarbe (Dunkel) | Farbe des Titeltexts im Dark Mode |
| Symbolfarbe (Dunkel) | Farbe der Icons im Dark Mode |
Beispiele
Abschnitt betitelt „Beispiele“Typische Einstellungs-Struktur
Abschnitt betitelt „Typische Einstellungs-Struktur“[Darstellung-Icon] Darstellung - Dunkler Modus (Switch) - Sprache (Navigation)
[Glocke-Icon] Benachrichtigungen - Push-Mitteilungen (Switch) - E-Mail-Benachrichtigungen (Switch)
[Schloss-Icon] Datenschutz - Profil privat (Switch) - Kontoverknüpfungen (Navigation)Minimalistische Überschrift
Abschnitt betitelt „Minimalistische Überschrift“- Icon: Keins
- Schriftgröße: 14 pt
- Schriftstärke: 600
- Textfarbe: Primärfarbe
Prominente Überschrift
Abschnitt betitelt „Prominente Überschrift“- Icon: Passend zum Abschnitt
- Schriftgröße: 18 pt
- Schriftstärke: 700
- Textfarbe: Primärfarbe
- Trailing Icon: Chevron-Rechts