Eine Masonry-Galerie („gemauerte“ Galerie) kennst du von Pinterest oder aus Fotoportfolios: Bilder in unterschiedlichen Größen schließen bündig aneinander, ohne dass ein starres Raster entsteht. Wenn du sie in Divi bauen willst, stolperst du in Divi 5 gleich zu Beginn.
Das Galerie-Modul kann es nicht. Ich habe dessen Einstellungen durchgesehen: Unter „Layout“ gibt es nur „Gitter“ und „Slider“, dazu die Thumbnail-Orientierung „Breitformat“ oder „Hochformat“. Eine Masonry-Option fehlt. Dafür hat Divi 5 jetzt Zeilen mit einem Masonry-Gitter, in die du Bild-Module setzt. Das ist der heutige Weg, und ihn beschreibe ich hier. Getestet mit Divi 5.13 (deutsche Oberfläche), Stand Oktober 2026.
Masonry-Zeile anlegen
Fahr mit der Maus an den unteren Rand einer Sektion und klick auf das blaue Plus („Neues hinzufügen Sektion“). Im Dialog „Abschnitt einfügen“ findest du mehrere Gruppen. Weiter unten steht „Gitter“ → „Masonry“ mit einer Reihe von Vorlagen, in denen große, hohe und kleine Felder gemischt sind. Wähl eine, die dir gefällt.
Unter „Gitter“ gibt es die Gruppe „Masonry“.Ich habe die erste Vorlage genommen. Sie ergibt eine Zeile mit fünf Feldern: zwei breite, ein hohes in der Mitte und zwei schmale. Divi öffnet sofort die Modulauswahl für das erste Feld. Die Felder sind die „Spalten“ der Zeile, du siehst sie auch in den Zeileneinstellungen unter „Elemente“. Dort steht außerdem der Knopf „Grid-Editor öffnen“, falls du das Raster selbst umbauen willst. Den habe ich nicht ausprobiert.
Die leere Masonry-Zeile mit fünf FeldernBilder einsetzen
In jedes Feld kommt ein Modul „Bild“. Klick im Feld auf das Plus, such „Bild“, und wähl das Bild über die Vorschau im Reiter Inhalt aus der Mediathek (Reiter „Mediathek“, Bild anklicken, blauer Knopf unten rechts, der trotzdem „Ein Bild hochladen“ heißt). Wie das Bildmodul im Detail funktioniert, beschreibe ich im Artikel zum Bildmodul in Divi 5.
Das erste Bild sitzt im ersten Feld.Die Stolperfalle: Bilder füllen die Felder nicht von allein
Hier hängen die meisten fest. Mein erster Versuch war, im Reiter Design unter „Größe Einstellen“ bei „Höhe“ den Wert 100% einzutragen. Das Ergebnis: Nur das erste Bild füllte sein Feld, und das nur, weil Feld und Foto zufällig dasselbe Seitenverhältnis hatten. Die anderen blieben klein und ließen das Feld leer. Die Prozentangabe hat also bei mir nicht gewirkt.
Was funktioniert hat: Gib dem Bild die Höhe seines Feldes in Pixeln.
- Reiter Design, Gruppe „Größe Einstellen“.
- Schalter „Volle Breite Nutzen“ einschalten.
- Bei „Höhe“ die Höhe des Feldes eintragen, mit Einheit, zum Beispiel
340px. Das hohe Feld in der Mitte ist bei dieser Vorlage so hoch wie zwei Reihen plus Abstand, bei mir 740px.
„Volle Breite Nutzen“ und eine feste „Höhe“Die Feldhöhen findest du, indem du die Zeile im Canvas mit dem Browser-Inspektor misst. Bei der Vorlage, die ich gewählt habe, waren es 340 px je Reihe und 60 px Abstand dazwischen. Bei anderen Vorlagen stimmen die Zahlen nicht, miss sie also bei dir nach.
Jetzt noch der Zuschnitt: Damit ein Querformat-Foto in einem hohen, schmalen Feld nicht gequetscht wird, öffne die Gruppe „Rahmen“ (ja, die heißt so, sie hat mit Linien nichts zu tun) und stell „Objektanpassung“ auf „Abdeckung“. Das Bild füllt dann das Feld und wird an den Rändern beschnitten.
„Objektanpassung“ auf „Abdeckung“Wiederhol die drei Einstellungen für jedes Bild. Das ist Handarbeit. Hast du ein Bild fertig, kannst du es über das Duplizieren-Symbol der Hover-Leiste kopieren und nur das Bild austauschen.
Ergebnis
Auf dem Canvas sieht die Zeile so aus. Im Frontend wirkt sie wie eine echte Masonry-Galerie: ein breites Bild oben links, ein hohes Bild in der Mitte, daneben und darunter die übrigen.
Die fertige Zeile im Visual Builder
Die Galerie im BrowserZwei Einschränkungen solltest du kennen. Erstens ist das keine dynamische Galerie: Neue Bilder musst du von Hand in ein Feld setzen, das Galerie-Modul zieht sie dagegen aus der Mediathek. Zweitens habe ich die Handy-Ansicht nicht geprüft. Feste Pixelhöhen können dort ungünstig sein, kontrollier es mit den Geräte-Symbolen oben im Builder.
Häufige Fragen
Hat das Galerie-Modul in Divi 5 keine Masonry-Ansicht?
Ich habe keine gefunden. Es kennt „Gitter“ und „Slider“. Nutz stattdessen die Masonry-Zeile.
Warum füllt mein Bild das Feld nicht?
Setz „Volle Breite Nutzen“ auf an, gib eine feste Höhe in Pixeln an und wähl unter „Rahmen“ die „Objektanpassung“ „Abdeckung“.
Kann ich das Raster ändern?
Ja, in den Zeileneinstellungen gibt es den Knopf „Grid-Editor öffnen“. Mehr dazu kann ich nicht sagen, ich habe ihn nicht benutzt.
Divi und die Module gibt es bei Elegant Themes (Werbung).
