Seiten-Design
Im Seiten-Design legst du globale Stile fest, die auf alle Einträge der Einstellungsseite angewendet werden. Hier findest du Optionen für Blur-Effekte, Farbverläufe, Schatten und Icon-Styling.
Seiten-Design öffnen
Abschnitt betitelt „Seiten-Design öffnen“- Öffne den Einstellungen-Editor
- Tippe auf das Auto-Awesome-Symbol in der Toolbar
- Der Seiten-Design-Editor öffnet sich
- Am oberen Rand siehst du eine Live-Vorschau
Live-Vorschau
Abschnitt betitelt „Live-Vorschau“Am oberen Rand des Editors siehst du immer eine Vorschau mit zwei Beispiel-Einträgen:
- Ein Navigations-Eintrag mit Icon und Untertitel
- Ein Switch-Eintrag mit Toggle
Alle Änderungen werden sofort in der Vorschau sichtbar.
Glasmorphismus (Blur)
Abschnitt betitelt „Glasmorphismus (Blur)“Blur-Effekte verleihen den Einträgen einen modernen, glasartigen Look.
Einstellungen
Abschnitt betitelt „Einstellungen“| Einstellung | Standard | Bereich | Beschreibung |
|---|---|---|---|
| Aktiviert | Aus | An/Aus | Aktiviert den Blur-Effekt |
| Intensität | 10 | 0-30 | Stärke der Unschärfe |
| Deckkraft | 70% | 0-100% | Transparenz des Hintergrunds |
Effekt erklärt
Abschnitt betitelt „Effekt erklärt“- Intensität: Je höher, desto verschwommener wirkt der Hintergrund hinter dem Eintrag
- Deckkraft: Je niedriger, desto mehr scheint der Hintergrund durch
Farbverlauf (Gradient)
Abschnitt betitelt „Farbverlauf (Gradient)“Farbverläufe fügen einen Hintergrund-Gradient zu den Einträgen hinzu.
Einstellungen
Abschnitt betitelt „Einstellungen“| Einstellung | Standard | Bereich | Beschreibung |
|---|---|---|---|
| Aktiviert | Aus | An/Aus | Aktiviert den Farbverlauf |
| Typ | Linear | Linear/Radial | Art des Verlaufs |
| Startfarbe | Primärfarbe | Farbwähler | Farbe am Anfang |
| Endfarbe | Hintergrund | Farbwähler | Farbe am Ende |
| Winkel | 180° | 0-360° | Richtung des Verlaufs (nur Linear) |
Winkel erklärt
Abschnitt betitelt „Winkel erklärt“| Winkel | Richtung |
|---|---|
| 0° | Von unten nach oben |
| 90° | Von links nach rechts |
| 180° | Von oben nach unten |
| 270° | Von rechts nach links |
Schatten
Abschnitt betitelt „Schatten“Schatten verleihen den Einträgen Tiefe und heben sie vom Hintergrund ab.
Einstellungen
Abschnitt betitelt „Einstellungen“| Einstellung | Standard | Bereich | Beschreibung |
|---|---|---|---|
| Erhöhung | 0 | 0-24 | Standard-Material-Elevation |
| Unschärfe | 4 px | 0-30 px | Weichheit des Schattens |
| Ausbreitung | 0 px | -10 bis 20 px | Größe des Schattens |
| X-Versatz | 0 px | -20 bis 20 px | Horizontale Position |
| Y-Versatz | 2 px | -20 bis 20 px | Vertikale Position |
| Farbe | Schwarz | Farbwähler | Farbe des Schattens |
| Deckkraft | 3% | 0-50% | Transparenz des Schattens |
Schnell-Rezepte
Abschnitt betitelt „Schnell-Rezepte“Kein Schatten:
- Erhöhung: 0, Unschärfe: 0
Dezenter Schatten:
- Erhöhung: 2, Unschärfe: 4, Y-Versatz: 2, Deckkraft: 5%
Mittlerer Schatten:
- Erhöhung: 4, Unschärfe: 8, Y-Versatz: 4, Deckkraft: 10%
Starker Schatten:
- Erhöhung: 8, Unschärfe: 16, Y-Versatz: 8, Deckkraft: 15%
Symbol-Stil (Links)
Abschnitt betitelt „Symbol-Stil (Links)“Hier gestaltest du das führende Icon, das links neben dem Text erscheint.
Einstellungen
Abschnitt betitelt „Einstellungen“| Einstellung | Standard | Bereich | Beschreibung |
|---|---|---|---|
| Symbol anzeigen | An | An/Aus | Ob Icons angezeigt werden |
| Icon-Größe | 24 px | 12-48 px | Größe des Icons |
| Container-Größe | 48 px | 24-80 px | Größe des Hintergrund-Kreises |
| Container-Radius | 8 px | 0-40 px | Eckenrundung des Containers |
| Container-Farbe | Primärfarbe | Farbwähler | Hintergrundfarbe |
| Container-Deckkraft | 10% | 0-100% | Transparenz des Hintergrunds |
| Icon-Farbe | Primärfarbe | Farbwähler | Farbe des Icons |
Container-Stile
Abschnitt betitelt „Container-Stile“Rund (Standard):
- Container-Radius: 24 px (halbe Container-Größe)
Abgerundet:
- Container-Radius: 8-12 px
Eckig:
- Container-Radius: 0 px
Symbol-Stil (Rechts)
Abschnitt betitelt „Symbol-Stil (Rechts)“Hier gestaltest du das trailing Icon, das rechts neben dem Eintrag erscheint (typischerweise ein Chevron).
Einstellungen
Abschnitt betitelt „Einstellungen“| Einstellung | Standard | Bereich | Beschreibung |
|---|---|---|---|
| Symbol anzeigen | An | An/Aus | Ob Icons angezeigt werden |
| Icon-Größe | 20 px | 12-48 px | Größe des Icons |
| Container-Größe | 32 px | 24-80 px | Größe des Hintergrund-Kreises |
| Container-Radius | 999 px | 0-999 px | Eckenrundung (999 = rund) |
| Container-Farbe | Sekundärfarbe | Farbwähler | Hintergrundfarbe |
| Container-Deckkraft | 10% | 0-100% | Transparenz des Hintergrunds |
| Icon-Farbe | Sekundärfarbe | Farbwähler | Farbe des Icons |
Beispiel-Konfigurationen
Abschnitt betitelt „Beispiel-Konfigurationen“Klassisch (kein Effekt)
Abschnitt betitelt „Klassisch (kein Effekt)“| Bereich | Einstellung |
|---|---|
| Blur | Aus |
| Gradient | Aus |
| Schatten | Erhöhung 0 |
| Linkes Icon | Container-Deckkraft 10% |
| Rechtes Icon | Container-Deckkraft 0% |
Modern Glasmorphismus
Abschnitt betitelt „Modern Glasmorphismus“| Bereich | Einstellung |
|---|---|
| Blur | An, Intensität 12, Deckkraft 70% |
| Gradient | Aus |
| Schatten | Erhöhung 2, Deckkraft 5% |
| Linkes Icon | Rund, Deckkraft 15% |
| Rechtes Icon | Rund, Deckkraft 10% |
Gradient-Stil
Abschnitt betitelt „Gradient-Stil“| Bereich | Einstellung |
|---|---|
| Blur | Aus |
| Gradient | An, Linear, 180°, Primärfarbe → Transparent |
| Schatten | Erhöhung 4, Deckkraft 8% |
| Linkes Icon | Eckig, Deckkraft 20% |
| Rechtes Icon | Aus |
Elevated Cards
Abschnitt betitelt „Elevated Cards“| Bereich | Einstellung |
|---|---|
| Blur | Aus |
| Gradient | Aus |
| Schatten | Erhöhung 8, Unschärfe 12, Deckkraft 12% |
| Linkes Icon | Abgerundet, Deckkraft 10% |
| Rechtes Icon | Container-Deckkraft 0% (nur Icon sichtbar) |