Bildergalerie

Die Bildergalerie zeigt mehrere Bilder in einem strukturierten Raster an. Jedes Bild kann mit einer Bildunterschrift versehen werden und ist per Klick vergrößerbar. Ideal für Portfolios, Produktgalerien oder Impressionen.

Voraussetzungen

Du benötigst mehrere Bilder, die thematisch zusammengehören. Die Bilder sollten ähnliche Qualität und möglichst ähnliche Proportionen haben.

Aufbau der Seite

Galerie-Struktur

• Titel: Optional eine Überschrift über der Galerie
• Raster-Layout: Bilder werden in gleichmäßigen Spalten angeordnet
• Responsive Design: Automatische Anpassung an Bildschirmgröße
• Bildunterschriften: Optional für jedes Bild

Bilddarstellung

• Einheitliche Größe: Alle Bilder werden auf gleiche Höhe skaliert
• Abgerundete Ecken: Moderne, ansprechende Darstellung
• Hover-Effekte: Subtile Animationen bei Mausberührung
• Klick-Vergrößerung: Vollbild-Ansicht per Klick

Spalten-Konfiguration

• 1-6 Spalten: Flexible Anzahl je nach Bildmenge
• Automatische Umbrüche: Auf kleineren Bildschirmen weniger Spalten
• Gleichmäßige Verteilung: Optimale Nutzung des verfügbaren Platzes

So arbeitest du mit dieser Seite

Galerie-Titel hinzufügen

1. Füge eine aussagekräftige Überschrift hinzu (z.B. "Unsere Projekte")
2. Verwende Markdown für Formatierungen
3. Der Titel wird zentriert über der Galerie angezeigt
4. Lasse das Feld leer, wenn du keinen Titel möchtest

Bilder hinzufügen

1. Klicke auf "Bild hinzufügen"
2. Lade das gewünschte Bild hoch
3. Füge optional eine Bildunterschrift hinzu
4. Wähle eine Einblendanimation
5. Wiederhole den Vorgang für alle Bilder

Spaltenanzahl festlegen

1. Wähle die Anzahl der Spalten (1-6)
2. 3 Spalten: Standard, funktioniert fast immer gut
3. 4 Spalten: Für viele kleine Bilder
4. 2 Spalten: Für wenige, große Bilder
5. 1 Spalte: Für Hochformat-Bilder oder Listen-Darstellung

Bildunterschriften erstellen

1. Füge für jedes Bild eine kurze Beschreibung hinzu
2. Bildunterschriften erscheinen unter dem Bild
3. Verwende sie für Titel, Beschreibungen oder Credits
4. Halte sie kurz und prägnant

Animationen einstellen

1. Wähle für jedes Bild eine Einblendanimation
2. Verschiedene Animationen schaffen Dynamik
3. Bilder erscheinen beim Scrollen mit dem gewählten Effekt
4. Teste die Wirkung in der Vorschau

Tipps und Hinweise

Bildauswahl:

• Verwende Bilder mit ähnlichen Proportionen
• Einheitliche Bildqualität und -stil
• Optimale Auflösung: mindestens 800x600 Pixel
• Thematisch zusammengehörige Bilder

Spalten-Optimierung:

• Desktop: 3-4 Spalten meist optimal
• Tablet: Automatisch 2-3 Spalten
• Smartphone: Automatisch 2 Spalten
• Teste verschiedene Einstellungen

Performance:

• Bilder werden automatisch optimiert
• Lazy Loading für schnelle Seitenaufbauzeiten
• Progressive JPEG für bessere Ladezeiten
• WebP-Format bei Browser-Unterstützung

Bildunterschriften:

• Kurz und aussagekräftig
• Einheitlicher Stil für alle Beschreibungen
• Wichtige Keywords für SEO
• Optional: Datum, Ort oder Kategorie

Reihenfolge:

• Beste Bilder zuerst
• Chronologische oder thematische Sortierung
• Abwechslung zwischen verschiedenen Motiven
• Drag & Drop für einfache Neuordnung

Barrierefreiheit:

• Aussagekräftige Bildunterschriften
• Alt-Texte werden automatisch generiert
• Tastaturnavigation in der Vollbild-Ansicht
• Ausreichende Kontraste

SEO-Optimierung:

• Beschreibende Dateinamen verwenden
• Keywords in Bildunterschriften
• Strukturierte Daten für Bildsuche
• Optimierte Ladezeiten

Verwendungszwecke:

• Portfolio: Arbeitsproben und Projekte
• Produktgalerie: Verschiedene Produktansichten
• Event-Fotos: Impressionen von Veranstaltungen
• Team-Fotos: Mitarbeiter-Portraits
• Vorher-Nachher: Transformationen zeigen

Verwandte Seiten

• Bildkarussell mit Text - Bilder als Diashow
• Karten - Bilder mit Text in Kartenform
• Feature-Liste - Einzelbild mit Beschreibung