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:

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

Meine Vorlagen

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

Vorlage erstellen

Gestalte die AppBar nach deinen Wünschen im Stil-Tab
Wechsle zum Vorlagen-Tab
Scrolle nach unten zu “Als Vorlage speichern”
Tippe auf den Button
Gib einen Namen für deine Vorlage ein
Optional: Füge eine Beschreibung hinzu
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

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

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

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