Entdecke, wie Du die Elementor Galerie im Gutenberg Editor einsetzen kannst – mit Shortcodes, Lightbox & hilfreichen Tipps. Schnell & einfach im Video erklärt!
Verbinde das Beste aus beiden Welten
Du hast Deine Website mit Elementor gestaltet (oder gestalten lassen), möchtest zum Bloggen aber weiterhin den Gutenberg Editor – also den klassischen Block Editor – verwenden?
Dann habe ich gute Nachrichten für Dich: Du musst deswegen nicht auf die tollen Funktionen von Elementor verzichten. Im Gegenteil — viele davon kannst Du ganz leicht auch in Deinen Blogartikeln nutzen. Zum Beispiel eine schöne Bildergalerie mit Lightbox-Effekt.
In diesem Video zeige ich Dir Schritt für Schritt, wie Du in Elementor eine Galerie erstellst und sie anschließend per Shortcode in Deinen Gutenberg Blogartikel einfügst.
Inhalt
Warum ich lieber die Elementor Galerie nutze
Einzelne Bilder einzufügen ist im Gutenberg Editor kein Problem. Du kannst dort auch einstellen, dass sich beim Klick auf ein Bild eine Lightbox öffnet – inklusive Bildunterschrift. Praktisch, schnell, unkompliziert.
Sobald es aber um Bildergalerien geht, stoße ich persönlich im Block Editor recht schnell an Grenzen. Ich möchte zum Beispiel:
- mehrere Bilder in einer Lightbox durchswipen können
- ein einheitliches, ruhiges Layout
- saubere Bildunterschriften
- und volle Kontrolle über das Design
Und genau hier kommt Elementor ins Spiel.
Schritt 1 – Bilder vorbereiten (sehr empfohlen!)
Bevor ich überhaupt an die Galerie gehe, bereite ich meine Bilder vor:
- alle Bilder haben das gleiche Format
- ich verkleinere und komprimiere sie bereits vor dem Upload
- nach dem Upload in die Mediathek vergebe ich direkt Alt-Texte und Bildunterschriften
In meinem Beispiel habe ich Handyfotos im Hochformat gemacht und sie anschließend am Computer ins Format 2:3 (ca. 500 × 750 px) zugeschnitten. Das sorgt dafür, dass die Galerie später ruhig und harmonisch wirkt — und ich mir Ärger mit verzogenen Thumbnails spare.
Mein Tipp: Je sauberer die Vorbereitung, desto schöner die Galerie.
Schritt 2 – Ein Elementor Template anlegen
Jetzt geht’s in WordPress weiter:
- Gehe im Dashboard zu
Templates → Gespeicherte Templates - Klicke auf „Abschnitt“ und dann „Neu erstellen“
- Wähle als Templatetyp Abschnitt
- Vergib einen klaren Namen, damit Du den Shortcode auch klar zuordnen kannst
(z. B.JRB 2025 Galerie XY)
Warum nutze ich als Vorlage einen Abschnitt? Weil wir genau diesen Abschnitt später per Shortcode in Gutenberg einfügen.
Danach öffnet sich der Elementor Editor.
Schritt 3 – Container vorbereiten
Im Elementor Editor:
- neuen Container anlegen
- volle Breite aktivieren
- oben & unten etwas Abstand vergeben (ob in
remoderpxbleibt Dir überlassen)
So stellst Du sicher, dass sich die Galerie auch in einem zweispaltigen Bloglayout gut einfügt und optisch „Luft zum Atmen“ hat.
Schritt 4 – Die Basisgalerie einfügen
Jetzt suchst Du unter den Elementor Widgets nach „Galerie“.
Du findest zwei Varianten:
- Basisgalerie (kostenlos)
- Galerie (Pro Widget)
Ich nutze hier die Basisglerie — die reicht völlig, wenn Deine Bilder alle dasselbe Format haben.
Dann:
- Widget in den Container ziehen
- Bilder auswählen (ich nehme gern max. 9 Bilder pro Galerie)
- Reihenfolge per Drag & Drop sortieren
- Und wie immer, das Speichern dazwischen nicht vergessen 😉
Schritt 5 – Einstellungen für ein harmonisches Layout
Damit die Galerie gut aussieht, passe ich Folgendes an:
Bildgröße
Volle Größe (weil ich sie vorher schon verkleinert habe)
Spalten
3 Spalten für 9 Bilder (3×3 wirkt sehr ruhig und übersichtlich)
Linkziel
Zur Mediendatei damit die Lightbox aufgeht
Untertitel
Aktivieren – aber möglichst kurz halten 😉
Abstände
z. B. 20 px Abstand zwischen den Bildern
So entsteht eine moderne, klare Galerie, die danke der angezeigten Bidlunterschriften dennoch persönlich wirkt.
Schritt 6 – Lightbox aktivieren
Die Lightboxfunktion kannst Du global in Elementor aktivieren.
Dann:
- Mit Klick auf das Bild öffnet sich die Lightbox
- Leser:innen können durch die Galerie swipen
- Dabei werden auch die Bildunterschriften angezeigt
Genau so, wie ich es mir für Blogartikel wünsche.
Schritt 7 – Galerie per Shortcode in Gutenberg einfügen
Jetzt fehlt nur noch der letzte Schritt:
- Template speichern
- Den Shortcode kopieren
- Im Gutenberg Editor einen Shortcodeblock einfügen
- Shortcode dort einfügen
- Fertig 🎉
Deine Elementor Galerie erscheint nun direkt in Deinem Blogartikel.
Bonus Tipp: Einheitliche Bildunterschriften
Wenn Du Bildunterschriften verwendest, achte darauf, dass sie ähnlich lang, gut lesbar sind und nicht zu textlastig wirken. Das sorgt für ein ruhigeres Gesamtbild.
Fazit: Das Beste aus zwei Welten
Mit diesem kleinen Workflow kannst Du:
- in Gutenberg entspannt bloggen
- und trotzdem Elementordesigns nutzen
- ohne weitere Plugins
- ohne komplizierte Hacks
Gerade für einen Jahresrückblick, Eventberichte oder Moodsammlungen, die viele Fotos beinhalten, ist das eine wunderschöne Lösung 😊
CSS Snippet, um die Bildunterschrift in der Lightbox anzupassen
/**BILDUNDERSCHRFT IN LIGHTBOX**/
.elementor-slideshow__title {
font-weight: 400 !important;
background: #111111;
}
@media (min-width:1024px){
.elementor-slideshow__title {
padding-left: 25vw;
padding-right: 25vw;
}
}Blogempfehlung: WordPress Block Editor und Elementor richtig kombinieren
Wenn Du vor der Herausforderung stehst: „Soll ich lieber, wie oft empfohlen, den WordPress Block Editor (Gutenberg) zum Bloggen nutzen oder doch auf Elementor setzen?“ habe ich eine Empfehlung: Nutze beides und kombiniere die kreativen Möglichkeiten von Elementor Pro mit der Einfachheit des Block Editors. Damit Du Deinen Blog schnell starten, saubere Inhalte schreiben und trotzdem mit einem ansprechenden Design punkten kannst, ohne dass Deine Performance leidet oder Dein Workflow chaotisch wird.
Was die Unterschiede sind und worauf Du achten solltest, erläutere ich in meinem Blogartikel „Der ultimative Guide für Blogger: Den WordPress Block Editor und Elementor richtig kombinieren„.
