Eine schöne Galerie-Seite bauen

Diese Anleitung macht aus einer leeren WordPress-Seite eine Kundengalerie, die ankommt: Titelbild, Galerie, Druck-CTA, optional Passwortschutz. Etwa zehn bis fünfzehn Minuten pro Hochzeit oder Shooting. Gedacht für alle, die schon eine Galerie veröffentlicht haben und eine wiederholbare Routine wollen.

Was du lernst

• Der typische Aufbau einer Galerie-Seite (Titelbild → Intro → Galerie → Druck-CTA)
• Wie du ein Titelbild direkt an der Galerie setzt (Pro)
• Der Spacer-Block-Trick für Themes mit transparentem Header
• Dieselbe Seite im Block-Editor, in Elementor und in Divi
• Wie du die mobile Darstellung prüfst, bevor die URL zum Kunden geht

Voraussetzungen

• Mindestens eine veröffentlichte Galerie (siehe Deine erste Galerie)
• Plugin installiert und ein Cloud-Anbieter verbunden

Aufbau-Vorschlag

So bauen die meisten Fotograf:innen ihre Übergabe-Seiten — von oben nach unten:

Block	Zweck
(Spacer)	nur bei Themes mit transparentem Header — 80–120 px
Titelbild (Pro)	Titelfoto mit dem Galerie-Titel darauf — Teil der Galerie, kein eigener Block
Kurzes Intro	2–3 Sätze für den Kunden („Hier sind eure Fotos. Herunterladen, favorisieren, Abzüge bestellen.“)
Galerie	Der Block Cloud Gallery
Druck-CTA (Pro)	„Abzüge bestellen? → Zur Bestellseite“
Kontakt im Fuß	Optional: eine Zeile, wie man dich erreicht

Bewusst minimal halten — die Fotos sollen wirken.

Schritt für Schritt

1. Neue Seite anlegen

Seiten → Erstellen. Titel mit Kundenname und Datum, z. B. „Sarah & Tom · August 2025“. URL automatisch lassen oder auf sarah-und-tom kürzen.

2. (Nur bei transparentem Header) Spacer-Block einfügen

Manche Themes — vor allem Fotografie-Themes wie Astra, Kadence, GeneratePress oder OceanWP — rendern einen transparenten Header, der den Seiteninhalt überlagert. Ohne Spacer verschwindet der obere Teil deiner Seite hinter der Navigation.

Workaround: ganz oben auf der Seite einen Spacer-Block mit 80–120 px Höhe einfügen (je nach Header-Höhe deines Themes).

Bei einem klassischen, deckenden Header kannst du den Spacer weglassen. Einfach ausprobieren — wird oben etwas abgeschnitten, kommt der Spacer rein.

3. Intro-Text

Ein Absatz-Block mit zwei bis drei Sätzen für den Kunden:

„Sarah, Tom — hier sind eure Fotos vom Tag. Ladet einzelne Bilder oder alles auf einmal herunter, markiert eure Favoriten, bestellt Abzüge direkt aus der Galerie. Meldet euch jederzeit, wenn ihr Fragen habt.“

Diese paar Zeilen machen aus einer „WordPress-Seite mit Galerie“ eine Übergabe.

4. Galerie einfügen

Den Block Cloud Gallery einfügen und die Galerie wählen. Der Block zeigt eine Vorschau-Karte, damit du siehst, dass es die richtige ist; über die Werkzeugleiste gibt es Breite Breite und Volle Breite, wenn das Raster randlos laufen soll.

Du nutzt Elementor, Divi oder Beaver Builder? Siehe Block, Elementor und andere Page-Builder.

5. Druck-CTA (Pro)

Wenn du den Pro-Druckshop nutzt, ein paar Zeilen unter der Galerie einen klaren Call-to-Action setzen:

„Eines davon als hochwertigen Abzug oder Leinwand zu Hause? Abzüge bestellen →“

Der Link zeigt auf die automatisch angelegte Bestellseite des Plugins (Standard: /print-order/). Auch diese Seite braucht den Spacer-Block, wenn dein Theme einen transparenten Header hat — gleicher Workaround.

6. Mobil prüfen

Bevor die URL zum Kunden geht:

1. Im Editor die Vorschau öffnen und auf Mobil umschalten.
2. Zusätzlich die veröffentlichte URL auf einem echten Handy öffnen — der Editor nähert das nur an.
3. Prüfen: Titelbild vollständig sichtbar (nicht hinter dem Header), Raster stapelt sinnvoll, der Nachlade-Button ist erreichbar.

Wirkt das Raster mobil zu gequetscht, stelle die Bildgröße im Raster der Galerie höher (siehe Deine erste Galerie).

7. Optional: Passwortschutz

Wenn die Galerie nicht für die Öffentlichkeit gedacht ist: Editor → rechte Seitenleiste → Status & Sichtbarkeit → Sichtbarkeit → Passwortgeschützt. Passwort setzen, dem Kunden mitteilen. Ausführlich: Passwortschutz.

Titelbild (Pro)

Statt ein Hero-Bild aus Blöcken zu bauen, kann die Galerie ihr eigenes mitbringen. Ein Titelbild ist ein großes Titelfoto über dem Raster, mit dem Galerie-Titel und optional einem Untertitel darauf. Weil es zur Galerie gehört, reist es mit — jede Seite und jeder Builder, der die Galerie zeigt, zeigt auch das Titelbild.

Galerie öffnen und in der Galerie-Konfiguration zu Titelbild scrollen:

• Quelle — Foto aus dem Galerie-Ordner öffnet einen Picker mit den Fotos, die ohnehin im Cloud-Ordner liegen; Bild aus der Mediathek nimmt stattdessen einen WordPress-Upload. (Für den Ordner-Picker muss die Galerie mit ihrem Cloud-Ordner gespeichert sein.)
• Höhe — in Pixeln. 400–500 ist ein guter Bereich für eine Übergabe-Seite.
• Breite — Inhaltsbreite bleibt im Container deines Themes, Randlos (volle Breite) bricht auf die volle Fensterbreite aus.
• Überlagerung — Weicher Verlauf unten lässt das Foto hell und legt den Text auf eine abgedunkelte Basis; Ganzes Bild abdunkeln, Text mittig ist das klassische Hero; Keine lässt das Foto in Ruhe (nur bei einem ruhigen Bild sinnvoll, sonst ist der Titel schwer lesbar).
• Bildausschnitt — Oben, Mitte oder Unten: welcher Teil des Fotos den Beschnitt überlebt. Bei Gesichtern im oberen Bilddrittel meist Oben.
• Titel auf dem Bild anzeigen — und optional ein eigener Titel (leer = Galerie-Titel) sowie ein Untertitel wie „12. Juni 2026 · Gardasee“.

Das Foto auswählen:

Und das Ergebnis auf der Seite:

Transparente Header: Ein randloses Titelbild mit der Überlagerung Ganzes Bild abdunkeln wirkt unter einem transparenten Header meist gewollt — das kann den Spacer ersparen. Vorher mobil prüfen, bevor du dich darauf verlässt.

Hinweise für Page-Builder

Block-Editor

Der Ablauf oben. Funktioniert mit allen modernen Themes.

Elementor

• Abschnitt in voller Breite für das Intro
• Das Widget Cloud Gallery für die Galerie
• Spacer-Workaround: ein Abschnitt ganz oben mit fester Höhe von 100–120 px

Divi

• Standard-Abschnitt und -Zeile für das Intro
• Das Modul Code mit dem Shortcode, oder ein Text-Modul (Divi rendert Shortcodes dort automatisch)
• Spacer-Workaround: eigenes padding-top am ersten Abschnitt

Beaver Builder

• Page Builder → Modul hinzufügen → Shortcode
• Gleiche Logik wie bei Divi

Häufige Stolpersteine

Galerie verschwindet hinter einem transparenten Header. Spacer-Block fehlt oder ist zu niedrig. 80–120 px ist der übliche Bereich; sehr große Logos brauchen bis zu 140 px.

Bilder wirken riesig, die Spalten stimmen nicht. Bildgröße im Raster steht auf Extra groß — das ist für Schau-Galerien gedacht, nicht für die Übergabe. Zurück auf Groß oder Mittel.

Der Kunde sagt „die Seite ist leer“. Die Galerie ist ein Entwurf und nicht veröffentlicht.

Das Titelbild ist an der falschen Stelle beschnitten. Bildausschnitt ändern oder ein Foto mit mehr Luft nach oben wählen. Der Beschnitt ist gewollt — das Titelbild behält seine Höhe auf jeder Bildschirmbreite.

Der Page-Builder zeigt den Shortcode als Text. Du hast ihn in einen Code-Block statt in ein Shortcode-Element eingefügt. Im WordPress-Editor nimm stattdessen den Cloud-Gallery-Block.

Nächster Schritt

Falls der Druckshop noch nicht steht: Print-Shop einrichten (Pro). Sonst weiter zur Shortcode-Referenz.