Page Builder (Elementor, Divi, Beaver Builder)
Customer Cloud Gallery funktioniert mit Elementor, Divi, Beaver Builder, dem Block-Editor (Gutenberg) und dem Classic-Editor von Haus aus — es gibt kein separates Add-on zu installieren. Du fügst eine Galerie per Shortcode ein, und das Plugin lädt seine Styles und Skripte genau dann und dort, wo der Shortcode gerendert wird. Es ist also egal, ob deine Seite mit dem WordPress-Editor oder einem Page Builder gebaut ist — die Galerie funktioniert einfach.
Was du lernst
Section titled “Was du lernst”- Den schnellsten Weg, eine Galerie in eine Elementor-Seite zu setzen
- Die Schritt-für-Schritt-Variante, plus randlose Darstellung
- Denselben Ansatz in Divi, Beaver Builder und im Block-Editor
- Wie du die paar typischen Stolpersteine behebst
Voraussetzungen
Section titled “Voraussetzungen”- Mindestens eine veröffentlichte Galerie (siehe Deine erste Galerie) — du brauchst nur ihren Shortcode, z. B.
[ccgal_gallery id="42"] - Permalinks auf Beitragsname gestellt (Einstellungen → Permalinks) — die Galerie lädt Bilder über die WordPress-REST-API, und die braucht „schöne” Permalinks
Kurzfassung
Section titled “Kurzfassung”- Lege im WP-Admin eine Galerie an und verbinde deinen Google-Drive- oder Dropbox-Ordner.
- Kopiere den angezeigten Shortcode, z. B.
[ccgal_gallery id="42"]. - Zieh in Elementor ein Shortcode-Widget auf die Seite und füge ihn ein.
- Aktualisieren — fertig.
Schritt für Schritt
Section titled “Schritt für Schritt”1. Galerie anlegen
Section titled “1. Galerie anlegen”Geh im WordPress-Admin auf Customer Cloud Gallery → Neu hinzufügen. Gib ihr einen Titel, wähle Google Drive oder Dropbox, wähle oder füge deinen Ordner ein und speichere. Der Shortcode der Galerie wird im Bearbeiten-Bildschirm angezeigt — kopiere ihn (er sieht aus wie [ccgal_gallery id="42"]).
2. In Elementor einfügen
Section titled “2. In Elementor einfügen”- Bearbeite deine Seite mit Elementor.
- Suche im Widget-Panel nach „Shortcode”.
- Zieh das Shortcode-Widget auf die Seite.
- Füge
[ccgal_gallery id="42"]in das Widget ein. - Ein Text-Editor- oder HTML-Widget funktioniert genauso gut.
- Für eine randlose Galerie stell die Seitenvorlage unter Seiteneinstellungen → Seitenlayout auf „Elementor Canvas” oder „Elementor Volle Breite”.
3. Vorschau und veröffentlichen
Section titled “3. Vorschau und veröffentlichen”Die Galerie rendert auf der Live-Seite. (Im Elementor-Editor selbst erscheint sie eventuell nur als Platzhalter — das ist bei Shortcodes normal; nutze die Vorschau.)
Andere Page Builder
Section titled “Andere Page Builder”Das Prinzip ist überall gleich — finde das Shortcode-Element und füge deinen Galerie-Shortcode ein:
| Builder | Element |
|---|---|
| Divi | „Code”- oder „Text”-Modul |
| Beaver Builder | „Shortcode”- oder „HTML”-Modul |
| Block-Editor (Gutenberg) | „Shortcode”-Block |
| Classic-Editor | Shortcode direkt in den Inhalt einfügen |
Anzeige-Optionen
Section titled “Anzeige-Optionen”Du kannst die Galerie über Shortcode-Attribute feinjustieren. Vollständige Referenz: Shortcodes.
| Attribut | Funktion | Werte |
|---|---|---|
id | Welche Galerie angezeigt wird (Pflicht) | die ID der Galerie |
per_page | Wie viele Bilder pro Ladevorgang | eine Zahl, z. B. 30 |
load | Wie weitere Bilder nachladen | scroll (Endlos-Scroll) oder button (Mehr-laden-Button) |
size | Thumbnail-Größe | small, medium, large, xlarge |
Beispiel: [ccgal_gallery id="42" per_page="40" load="button" size="large"]
Fehlerbehebung
Section titled “Fehlerbehebung”Die Toolbar erscheint, aber es laden keine Bilder. Das liegt fast immer am Ordner der Galerie, nicht am Page Builder. Öffne die Galerie und prüfe, ob der Google-Drive-/Dropbox-Ordner verbunden und der Pfad korrekt ist. Achte außerdem darauf, dass deine Permalinks nicht auf „Einfach” stehen (Einstellungen → Permalinks → „Beitragsname”) — die Galerie lädt Bilder über die WordPress-REST-API, die schöne Permalinks braucht.
Die Galerie steckt in einem Tab, Akkordeon oder Popup. Solche Elemente sind ausgeblendet, bis ein Besucher sie öffnet. Falls dort keine Bilder erscheinen, setze die Galerie direkt auf die Seite oder teste sie, sobald das Element aufgeklappt ist.
Der Shortcode erscheint als reiner Text. Du hast ihn in eine Überschrift, ein Titelfeld oder einen Code-Block eingefügt. Nutze das dedizierte Shortcode-Element des Builders (Elementor, Divi und Beaver Builder haben alle eins) oder den Shortcode-Block im Block-Editor.
Es rendert gar nichts.
Stell sicher, dass dein Theme/Template den Standard-WordPress-Footer ausgibt — jede Standard-Elementor-Vorlage tut das. Eine nackte „Blank”-Vorlage ohne wp_footer() verhindert, dass die Skripte der Galerie laden.
Nächster Schritt
Section titled “Nächster Schritt”Du willst die vollständige Liste der Shortcode-Attribute und den Druckshop-Shortcode? Siehe Shortcodes.