Schöne Galerie-Seite gestalten

Diese Anleitung zeigt, wie du aus einer leeren WordPress-Seite eine Kundengalerie machst, die wirkt: Hero, Galerie, Druck-CTA, optional Passwortschutz. In Summe etwa zehn bis fünfzehn Minuten pro Hochzeit oder Shooting. Gedacht für alle, die die erste Galerie hinter sich haben und eine wiederholbare Routine wollen.

Was du lernst

• Wie eine Galerie-Seite typischerweise aufgebaut ist (Hero → Titel → Galerie → Druck-CTA)
• Wie du den Spacer-Block-Workaround bei transparenten Theme-Headern einsetzt
• Wie du dieselbe Seite im Block-Editor, in Elementor und in Divi aufbaust
• Wie du Mobile-Darstellung vor dem Übergeben prüfst
• Wo du den Passwortschutz für Kunden-Privatsphäre einbaust

Voraussetzungen

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

Tutorial-Video

Video folgt.

Layout-Vorschlag

So bauen die meisten Foto-Profis ihre Galerie-Seiten auf — von oben nach unten:

Block	Zweck
(Spacer)	nur bei transparentem Theme-Header — 80–120 px
Hero-Bild	Ein einzelnes Lieblingsbild in voller Breite, setzt die Stimmung
Titel + Datum	„Sarah & Tom · 12. August 2025” — Cormorant oder Theme-Display-Font
Kurzer Intro-Text	2–3 Sätze für den Kunden („Hier sind eure Bilder. Lade sie herunter, markiere Lieblinge, bestelle Drucke.”)
Galerie	Der [ccgal_gallery]-Shortcode
Druck-CTA (Pro)	„Möchtest du Abzüge bestellen? → Zur Druckbestellung”
Footer-Kontakt	Optional: kurzer Hinweis, wo der Kunde dich erreicht

Diese Reihenfolge funktioniert auf nahezu jedem Theme. Halte es bewusst minimal — die Bilder sollen wirken, nicht das Drumherum.

Schritt für Schritt

1. Neue Seite anlegen

WordPress-Admin → Seiten → Erstellen. Titel mit dem Kundennamen und Datum, z. B. „Sarah & Tom · August 2025”. Lasse die URL automatisch oder kürze auf sarah-und-tom.

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

Manche Themes — vor allem moderne Foto-Themes wie Astra, Kadence, GeneratePress oder OceanWP — haben einen über das Hero ragenden, halb-transparenten Header. Wenn du keinen Spacer einbaust, verschwindet der obere Teil deiner Galerie hinter der Navigation.

Workaround: Ganz oben auf der Seite einen Spacer-Block einfügen mit Höhe 80–120 px (je nach Header-Höhe deines Themes). Das schafft Platz unter dem Header, sodass der Hero-Inhalt nicht überlagert wird.

Du kannst den Spacer auch komplett überspringen, wenn dein Theme einen klassischen, undurchsichtigen Header hat. Probier’s aus — wenn die Galerie oben angeschnitten wird, kommt der Spacer rein.

3. Hero-Bild (optional, aber empfohlen)

Direkt unter dem Spacer einen Cover-Block oder Bild-Block in voller Breite. Wähle ein einzelnes, ruhig komponiertes Bild aus der Session — meist ein Detail oder das Brautpaar von hinten. Das setzt sofort die Stimmung.

Theme-Tipp: Cover-Block hat oft eine „Vollständige Breite” / „Full width”-Option. Aktivieren.

4. Titel + Intro-Text

Drunter:

• Heading-Block (H1) mit dem Anlassnamen, z. B. „Sarah & Tom · Hochzeit am Bodensee”.
• Paragraph-Block mit 2–3 Sätzen für deine Kunden:

„Liebe Sarah, lieber Tom — hier sind eure Bilder von eurem Tag. Lade sie einzeln oder als komplette Sammlung herunter, markiere Lieblinge mit dem Herzchen und bestelle Drucke direkt aus der Galerie. Bei Fragen: schreibt mir.”

Diese 2–3 Zeilen machen aus „WordPress-Seite mit Galerie” ein Übergabe-Erlebnis.

5. Galerie einbetten

Shortcode-Block hinzufügen, deinen Galerie-Shortcode einfügen:

[ccgal_gallery id="42"]

(Deine Galerie-ID findest du in der Galerie-Seitenleiste — siehe Shortcodes-Referenz.)

Wenn du das Standard-Verhalten der Galerie für diese Seite anpassen willst, hängst du Attribute an:

[ccgal_gallery id="42" per_page="40" load="scroll" size="large"]

6. Druckbestellungs-CTA (Pro)

Wenn du den Pro-Druckshop nutzt: ein paar Zeilen unter der Galerie ein klares Call-to-Action. Beispiel:

„Möchtet ihr eure Lieblingsbilder als hochwertigen Druck oder Leinwand bei euch zu Hause? Hier zur Druckbestellung →”

Der Link zeigt auf deine vom Plugin angelegte Druck-Seite (Standard: /druckbestellung/). Auf dieser Seite muss der Spacer-Block ebenfalls oben sein, falls dein Theme transparente Header hat — derselbe Workaround.

7. Mobil prüfen

Vor der Übergabe an den Kunden:

1. Klicke im WordPress-Editor auf die Vorschau-Optionen und wähle Mobile.
2. Öffne die veröffentlichte URL zusätzlich auf einem echten Telefon — der Editor approximiert nur.
3. Prüfe: Hero-Bild komplett sichtbar (nicht hinter dem Header), Galerie-Spalten sinnvoll gestapelt, Lightbox-Lade-Button gut erreichbar.

Galerie-Bildgröße auf Mittel oder Groß stellen, wenn die Mobil-Spalten zu klein wirken (siehe Erste Galerie).

8. Optional: Passwortschutz für Privatsphäre

Wenn die Galerie nicht für die Öffentlichkeit ist:

WordPress-Editor → rechte Seitenleiste → Status & Sichtbarkeit → Sichtbarkeit → Passwortgeschützt. Passwort vergeben, an Kunden schicken.

Detail-Anleitung: Passwortschutz.

Page-Builder-Hinweise

Block-Editor (Gutenberg)

Standard-Workflow oben. Funktioniert mit allen modernen Themes.

Elementor

• Elementor → Add New Page, leere Vorlage wählen
• Sektion mit voller Breite für den Hero
• Sektion für Titel + Intro
• Sektion mit dem „Shortcode”-Widget für die Galerie (statt Block-Editor-Shortcode-Block)
• Spacer-Workaround: Sektion ganz oben mit fixer Höhe von 100–120 px

Divi

• Divi Builder → Use Builder
• Standard-Section + Row für Hero/Titel
• Spezielles „Code”-Modul mit dem Shortcode oder das „Text”-Modul (Divi rendert Shortcodes in Text-Modulen automatisch)
• Spacer-Workaround: Custom Padding-Top auf der ersten Section

Beaver Builder

• Page Builder → Add Module → Shortcode
• Selbe Logik wie Elementor

Typische Stolpersteine

Galerie überlagert von transparentem Header. Spacer-Block fehlt oder Höhe zu klein. 80–120 px sind üblich; bei sehr großen Logos kann es auch 140 px werden.

Bilder erscheinen riesig, Spalten stimmen nicht. Galerie-Einstellung Bildgröße im Raster ist auf xlarge — das ist für Hero-Galerien, nicht für Übergabe-Galerien. Auf large oder medium zurück.

Kunde sagt „die Seite ist leer”. Galerie ist im Status Entwurf, nicht Veröffentlicht. Im Galerie-Admin auf Veröffentlichen klicken.

Hero-Bild zerschneidet sich auf Mobile. Cover-Block hat keinen mobilen Fokus-Punkt gesetzt. Block-Editor → Cover-Block → Fokus-Punkt setzen (zeigt auf das Hauptmotiv).

Page-Builder zeigt Shortcode als Text. Du hast den Shortcode in einen Code-Block gepackt statt in einen Shortcode-Block. Block-Editor unterscheidet die zwei — Shortcode rendert nur im Shortcode-Block.

Nächster Schritt

Wenn du den Druck-Shop noch nicht eingerichtet hast: Druckshop einrichten (Pro). Sonst geht’s weiter zur Shortcode-Referenz für alle Attribute, die du pro Seite überschreiben kannst.