Layout & Design

Im letzten Schritt des Galerie-Setups siehst du eine Übersicht der Layout-Optionen, die du später im Galerie-Editor anpassen kannst.

Übersicht

Der Design-Schritt zeigt dir die verfügbaren Layout-Optionen:

Grid

Gleichmäßiges Raster mit fester Größe.

Masonry

Pinterest-ähnliches Layout.

Carousel

Horizontaler Slider.

---

Was du im Setup siehst

Der Design-Schritt ist ein Info-Schritt. Du siehst:

1. Eine Info-Box: „Du kannst das Design jederzeit im Galerie-Editor anpassen.”

2. Eine Vorschau der verfügbaren Layouts:

   • Grid
   • Masonry
   • Carousel

3. Einen „Einrichtung abschließen” Button

Kein aktives Design-Setup

Im Setup-Wizard wählst du nur Speicherort und konfigurierst Firebase-Regeln. Das detaillierte Design (Layout, Farben, Funktionen) konfigurierst du später im Galerie-Editor.

---

So schließt du das Setup ab

1. Design-Schritt erreichen

   Nach den Firebase Storage Rules (oder direkt nach Speicherort bei lokalem Speicher) erreichst du den Design-Schritt.

2. Übersicht ansehen

   Du siehst eine Liste der verfügbaren Layouts, die du später im Editor anpassen kannst.

3. Einrichtung abschließen

   Tippe auf „Einrichtung abschließen”, um das Setup zu beenden.

4. Fertig!

   Das Galerie-Modul ist jetzt vollständig eingerichtet. Du kannst jetzt Bilder hochladen und verwalten.

---

Verfügbare Layout-Optionen im Editor

Nach dem Setup hast du im Galerie-Editor Zugriff auf alle Layout-Optionen:

Die 3 Layout-Typen

Grid

Gleichmäßiges Raster mit fester Größe

Eigenschaft	Beschreibung
Aussehen	Alle Bilder gleich groß
Spalten	Konfigurierbar (Portrait/Landscape)
Ideal für	Produktfotos, Teams

┌──────┐ ┌──────┐ ┌──────┐
│      │ │      │ │      │
│  📷  │ │  📷  │ │  📷  │
│      │ │      │ │      │
└──────┘ └──────┘ └──────┘
┌──────┐ ┌──────┐ ┌──────┐
│      │ │      │ │      │
│  📷  │ │  📷  │ │  📷  │
│      │ │      │ │      │
└──────┘ └──────┘ └──────┘

Einstellungen:

• Spalten (Portrait): 2-4
• Spalten (Landscape): 3-6
• Abstand zwischen Bildern
• Seitenverhältnis
• Eckenradius

Masonry

Pinterest-ähnliches Layout mit variablen Höhen

Eigenschaft	Beschreibung
Aussehen	Bilder mit unterschiedlichen Höhen
Dynamisch	Passt sich an Bildverhältnisse an
Ideal für	Kunstgalerien, Fotografie

┌──────┐ ┌──────┐ ┌──────┐
│      │ │      │ │      │
│  📷  │ │  📷  │ │      │
│      │ │      │ │  📷  │
└──────┘ └──────┘ │      │
┌──────┐ ┌──────┐ └──────┘
│  📷  │ │      │ ┌──────┐
└──────┘ │  📷  │ │  📷  │
┌──────┐ │      │ │      │
│  📷  │ └──────┘ └──────┘
│      │
└──────┘

Einstellungen:

• Spalten (Portrait): 2-3
• Spalten (Landscape): 3-5
• Abstand zwischen Bildern
• Eckenradius

Carousel

Horizontaler Slider mit Auto-Play Option

Eigenschaft	Beschreibung
Aussehen	Ein Bild im Fokus
Navigation	Swipe oder Buttons
Ideal für	Hero-Bereiche, Features

◀ ┌──────────────────────┐ ▶
  │                      │
  │         📷          │
  │                      │
  └──────────────────────┘
         ● ○ ○ ○ ○

Einstellungen:

• Auto-Play aktivieren
• Wechsel-Intervall
• Carousel-Höhe
• Seitenindikatoren anzeigen

---

Weitere Design-Optionen

Bereich	Einstellungen
Farben	Hintergrund, Karten, Text, Overlay
Lightbox	Zoom, Swipe, Navigation, Overlay-Farbe
Organisation	Kategorien/Alben, Tags
Funktionen	Download, Teilen, Bildinfo

---

Empfehlungen nach Anwendungsfall

Produktfotos

Empfohlene Einstellungen:

Einstellung	Wert
Layout	Grid
Spalten	2-3
Seitenverhältnis	1:1 (quadratisch)
Lightbox	Aktiviert
Zoom	Aktiviert

Für Produktfotos: Grid-Layout mit einheitlichem Seitenverhältnis für professionellen Look.

Kunstgalerie

Empfohlene Einstellungen:

Einstellung	Wert
Layout	Masonry
Spalten	2-3
Lightbox	Aktiviert
Zoom	Aktiviert
Bildinfo	Aktiviert

Für Kunstgalerien: Masonry-Layout für natürliche Präsentation verschiedener Bildformate.

Event-Fotos

Empfohlene Einstellungen:

Einstellung	Wert
Layout	Grid oder Masonry
Kategorien	Aktiviert (nach Event)
Download	Aktiviert
Teilen	Aktiviert

Für Events: Kategorien für verschiedene Events, Download für Gäste aktivieren.

Hero-Bereich

Empfohlene Einstellungen:

Einstellung	Wert
Layout	Carousel
Auto-Play	Aktiviert
Intervall	5 Sekunden
Indikatoren	Aktiviert

Für Hero-Bereiche: Carousel mit Auto-Play für automatische Bildwechsel.

---

Design später anpassen

Das Design kann jederzeit im Galerie-Editor angepasst werden:

1. Öffne den Edit Mode
2. Gehe zu Module & Features > Galerie
3. Tippe auf „Bearbeiten”
4. Nutze die verschiedenen Tabs für Einstellungen
5. Änderungen werden sofort übernommen

Verfügbare Tabs im Editor

Tab	Einstellungen
Layout	Grid/Masonry/Carousel, Spalten, Abstände
Aussehen	Farben, Eckenradius, Dark Mode
Funktionen	Lightbox, Zoom, Download, Teilen
Navigation	Swipe, Buttons, Indikatoren
Organisation	Kategorien, Tags
Speicher	Speichermodus-Info

👉 Zum Galerie-Editor

---

Nach dem Setup

Nach Abschluss des Setups kannst du:

1. Kategorien/Alben erstellen - Organisiere deine Bilder thematisch
2. Bilder hochladen - Lade Fotos in deine Galerie
3. Layout wählen - Grid, Masonry oder Carousel
4. Funktionen aktivieren - Download, Teilen und mehr

---

Tipps

Mit wenigen Bildern starten

Lade zunächst 3-5 Bilder hoch und teste alle Funktionen (Lightbox, Zoom, Download), bevor du weitere hinzufügst.

Layout testen

Probiere alle drei Layouts aus, um das beste für deine Bilder zu finden. Verschiedene Bildformate sehen in verschiedenen Layouts unterschiedlich gut aus.

Kategorien von Anfang an

Erstelle Kategorien/Alben, bevor du viele Bilder hochlädst. Das spart später Sortierarbeit.

Thumbnails nutzen

Die Galerie erstellt automatisch Thumbnails. Lade hochauflösende Originale hoch - sie werden automatisch optimiert.

---

Setup abschließen

Nach der Design-Übersicht:

1. Tippe auf „Einrichtung abschließen”
2. Das Galerie-Modul ist jetzt vollständig eingerichtet
3. Du kannst jetzt Bilder hochladen und verwalten

---

Nächste Schritte

Galerie-Editor Lade Bilder hoch und verwalte sie

Layout anpassen Grid, Masonry oder Carousel

Zurück zur Übersicht Galerie-Modul Setup Übersicht