Vorlagen

Der Vorlagen-Tab im AppBar Editor bietet dir eine Galerie mit fertigen AppBar-Designs sowie die Möglichkeit, eigene Vorlagen zu erstellen und zu verwalten.

Übersicht

Der Vorlagen-Tab ist in drei Bereiche unterteilt:

Bereich	Beschreibung
Vordefinierte Vorlagen	8 fertige AppBar-Designs zum sofortigen Anwenden
Meine Vorlagen	Eigene gespeicherte Designs
Als Vorlage speichern	Aktuelles Design als neue Vorlage speichern

---

Vordefinierte Vorlagen

Blocq bietet 8 sorgfältig gestaltete AppBar-Vorlagen, die verschiedene Stile abdecken:

Klassische Stile

Vorlage	Stil-Kategorie	Beschreibung
Standard	Classic	Klassisches Material Design mit blauem Hintergrund und weißem Titel
Bold Title	Bold	Dunkler Hintergrund mit größerer, fetterer Schrift und erhöhter Elevation

Moderne Stile

Vorlage	Stil-Kategorie	Beschreibung
Rounded	Modern	Material Purple mit abgerundeten unteren Ecken (24px Radius)
Dark Elegance	Elegant	Dunkelblaue Töne mit feinem Gradient und eleganter Typografie

Gradient-Stile

Vorlage	Stil-Kategorie	Beschreibung
Gradient Blue	Gradient	Blau-zu-Lila Farbverlauf von links nach rechts
Gradient Sunset	Gradient	Warmer Rot-zu-Gelb Sonnenuntergang-Gradient

Minimalistische Stile

Vorlage	Stil-Kategorie	Beschreibung
Transparent	Minimal	Komplett durchsichtig, perfekt für Overlay-Effekte
Minimal	Minimal	Weißer Hintergrund, keine Elevation, reduzierte Höhe (48px)

---

Vorlage anwenden

So wendest du eine vordefinierte Vorlage an:

1. Öffne den AppBar Editor (Stift-Icon in der AppBar)
2. Wechsle zum Vorlagen-Tab (drittes Tab)
3. Scrolle durch die vordefinierten Vorlagen
4. Jede Vorlage zeigt eine Live-Vorschau der AppBar
5. Tippe auf “Anwenden” bei der gewünschten Vorlage
6. Das Design wird sofort übernommen

Vorschau nutzen

Jede Vorlage zeigt eine echte AppBar-Vorschau mit dem jeweiligen Stil. So siehst du sofort, wie das Design aussehen wird, bevor du es anwendest.

---

Meine Vorlagen

Neben den vordefinierten Vorlagen kannst du eigene Designs als Vorlagen speichern.

Vorlage erstellen

1. Gestalte die AppBar nach deinen Wünschen im Stil-Tab
2. Wechsle zum Vorlagen-Tab
3. Scrolle nach unten zu “Als Vorlage speichern”
4. Tippe auf den Button
5. Gib einen Namen für deine Vorlage ein
6. Optional: Füge eine Beschreibung hinzu
7. Tippe auf Speichern

Eigene Vorlage anwenden

Deine gespeicherten Vorlagen erscheinen im Bereich “Meine Vorlagen” unterhalb der vordefinierten Templates. Tippe auf “Anwenden”, um das Design zu übernehmen.

Vorlage löschen

Um eine eigene Vorlage zu löschen:

• Wische auf der Vorlage nach links, oder
• Tippe auf das Papierkorb-Icon

Nur eigene Vorlagen löschbar

Die 8 vordefinierten Vorlagen können nicht gelöscht werden. Nur selbst erstellte Vorlagen lassen sich entfernen.

---

Was wird in einer Vorlage gespeichert?

Eine AppBar-Vorlage speichert alle visuellen Einstellungen:

Basis-Einstellungen

• Sichtbarkeit (AppBar anzeigen/ausblenden)
• Höhe
• Zurück-Button anzeigen
• Titel zentrieren

Farben (Light Mode)

• Hintergrundfarbe
• Schattenfarbe
• Titelfarbe

Farben (Dark Mode)

• Dunkler Hintergrund
• Dunkle Schattenfarbe
• Dunkle Titelfarbe

Typografie

• Schriftgröße
• Schriftfamilie
• Schriftstärke (Light, Regular, Medium, Bold)
• Schriftstil (Normal, Kursiv)
• Zeichenabstand

Design-Details

• Elevation (Schattenhöhe)
• Untere Eckenradien (links und rechts)
• Leading-Breite
• Titel-Abstand

Gradient-Einstellungen

• Gradient aktiviert
• Gradient-Typ (Linear, Radial, Sweep)
• Gradient-Farben und Stops
• Gradient-Ausrichtung und Optionen
• Separate Dark Mode Gradient-Einstellungen

Was NICHT gespeichert wird

• Action Buttons - Diese bleiben seitenspezifisch
• Logo - Das Logo wird separat verwaltet
• Titel-Text - Der Seitentitel bleibt individuell

---

Vorlagen im Detail

Standard

Classic

Das klassische Material Design mit bewährten Werten:

• Material Blue (#1976D2)
• 56px Höhe
• Zentrierter Titel
• 4px Elevation
• Roboto Medium, 20px

Transparent

Minimal

Perfekt für Seiten mit Hintergrundbildern oder Vollbild-Inhalten:

• Komplett durchsichtiger Hintergrund
• Keine Elevation
• Dunkler Titel im Light Mode, heller im Dark Mode

Gradient Blue

Gradient

Moderner Farbverlauf für einen dynamischen Look:

• Blau (#1976D2) zu Lila (#7C4DFF)
• Horizontaler Verlauf (links → rechts)
• 0.5 Zeichenabstand für luftigere Typografie

Gradient Sunset

Gradient

Warmer, einladender Farbverlauf:

• Rot (#FF6B6B) zu Gelb (#FFE66D)
• Farbiger Schatten passend zum Gradient
• Ideal für Lifestyle- und Freizeit-Apps

Bold Title

Bold

Macht eine Aussage mit kräftiger Typografie:

• Sehr dunkler Hintergrund (#212121)
• Erhöhte Höhe (64px)
• Bold-Schrift, 24px, 1.0 Zeichenabstand
• Linksbündiger Titel
• 6px Elevation

Minimal

Minimal

Reduziert auf das Wesentliche:

• Weißer Hintergrund
• Keine Elevation
• Kompakte Höhe (48px)
• Kleine Schrift (16px)
• Dunkler Titel

Rounded

Modern

Weiche Formen für einen modernen Look:

• Material Purple (#6200EE)
• 24px Eckenradius unten links und rechts
• 8px Elevation mit farbigem Schatten
• Ideal für Apps mit abgerundeten UI-Elementen

Dark Elegance

Elegant

Premium-Look mit subtilen Details:

• Dunkelblaue Töne (#1A1A2E → #16213E)
• Vertikaler Gradient
• Erhöhte Höhe (60px)
• Leichte Schrift (w300) mit 2.0 Zeichenabstand
• Geringe Elevation (2px)

---

Tipps

Schneller Start mit Vorlagen

Beginne mit einer vordefinierten Vorlage, die deinem Stil am nächsten kommt, und passe dann nur die Details an. Das spart Zeit und liefert professionelle Ergebnisse.

Eigene Vorlagen für Konsistenz

Wenn du ein perfektes Design erstellt hast, speichere es als eigene Vorlage. So kannst du es später auf anderen Seiten oder nach einem Reset schnell wiederherstellen.

Light und Dark Mode prüfen

Alle vordefinierten Vorlagen haben sowohl Light als auch Dark Mode Farben konfiguriert. Prüfe beide Modi, bevor du dich für eine Vorlage entscheidest.

Gradient-Vorlagen als Basis

Die Gradient-Vorlagen (Blue und Sunset) zeigen, wie Farbverläufe konfiguriert werden. Nutze sie als Ausgangspunkt für eigene Gradient-Designs.

---

Häufige Fragen

Kann ich vordefinierte Vorlagen bearbeiten?

Nein, aber du kannst eine Vorlage anwenden, dann Änderungen vornehmen und das Ergebnis als eigene Vorlage speichern.

Werden meine Action Buttons überschrieben?

Nein, Action Buttons bleiben seitenspezifisch und werden beim Anwenden einer Vorlage nicht verändert.

Kann ich Vorlagen zwischen Geräten teilen?

Eigene Vorlagen werden lokal in der ISAR-Datenbank gespeichert. Sie sind an das jeweilige Gerät gebunden und können derzeit nicht exportiert werden.

Was passiert, wenn ich “Anwenden” tippe?

Das Design wird sofort auf die aktuelle AppBar angewendet. Du siehst die Änderungen in der Live-Vorschau. Vergiss nicht, am Ende auf “Speichern” zu tippen, um die Änderungen zu behalten.

Wie viele eigene Vorlagen kann ich erstellen?

Es gibt kein Limit für eigene Vorlagen. Du kannst so viele speichern, wie du möchtest.

---

Weiterführende Themen

Stil-Einstellungen Alle Optionen für Sichtbarkeit, Logo, Farben, Typografie und mehr

Action Buttons Icon-Buttons, Text-Buttons und Popup-Menüs konfigurieren

AppBar Editor Übersicht Zurück zur Hauptübersicht

Theme Suite Vorlagen Globale Theme-Vorlagen für deine gesamte App