Das Bildmodul ist eines der einfachsten Module in Divi und gleichzeitig eines, bei dem man schnell an Kleinigkeiten hängen bleibt: Wo trage ich den Alternativtext ein? Warum hängt unten ein Abstand? Und was heißt „Rahmen“, wenn ich doch abgerundete Ecken will?
Ich gehe das Modul in Divi 5 einmal durch, vom Einfügen über die Auswahl aus der Mediathek bis zu runden Ecken und der Lightbox. Alle Schritte habe ich in Divi 5.13 mit deutscher Oberfläche durchgeklickt, Stand Oktober 2026. Die Beschriftungen stehen so da, wie Divi sie anzeigt.
Modul einfügen und Bild wählen
Klick in der Spalte auf das Plus, tippe „Bild“ ins Suchfeld und wähl den Treffer „Bild“. Das Modul erscheint mit einem grauen Platzhalter, und die Einstellungen öffnen sich sofort. Im Reiter Inhalt steht die Gruppe „Bild“ mit der Vorschau des Platzhalters.
Klick auf diese Vorschau. Es öffnet sich der Dialog „Bild auswählen“ mit den Reitern „Dateien hochladen“ und „Mediathek“. Hast du das Bild schon hochgeladen, nimm die Mediathek, über „Medien suchen“ findest du es schneller. Nach einem Klick auf ein Bild erscheint ein Häkchen, und rechts öffnen sich die „Anhang-Details“.
In den Anhang-Details trägst du den Alternativtext ein.Hier sitzt der „Alternativtext“. Schreib kurz hin, was auf dem Bild zu sehen ist, etwa „Zwei Hände halten grüne Blätter“. Screenreader lesen ihn vor, und Suchmaschinen verstehen das Bild besser. Divi übernimmt ihn ins Modul: Im gespeicherten Seiteninhalt stand er bei mir als alt. Das Feld „Titel“ landet ebenfalls im Modul, und er erscheint später als Unterschrift in der Lightbox. Prüf ihn also, bevor du ihn so stehen lässt. Nach dem Auswählen übernimmst du das Bild mit dem blauen Knopf unten rechts. Der heißt „Ein Bild hochladen“, auch wenn du nur ein vorhandenes Bild nutzt.
Das Bild ist gesetzt.Ausrichtung, Größe und Abstände
Alles Optische liegt im Reiter Design. Die wichtigsten Gruppen:
- „Ausrichtung“: Unter „Bildausrichtung“ stehen drei Symbole für links, mittig und rechts. Das nutzt du, wenn das Bild schmaler ist als seine Spalte.
- „Größe Einstellen“: Mit dem Schalter „Volle Breite Nutzen“ füllt das Bild die ganze Spalte. Sonst steuerst du „Breite“, „Maximale Breite“, „Mindesthöhe“ und „Höhe“. Wenn ich nur die Höhe auf 260 px setze, bleibt das Seitenverhältnis erhalten und die Breite folgt.
- „Zwischenraum“: Hier findest du den Schalter „Raum Unter Dem Bild Entfernen“. Er hilft, wenn unter dem Bild ein schmaler Streifen übrig bleibt. Außerdem gibt es „Außenabstand“ und „Innenabstand“.
Die Gruppe „Ausrichtung“ mit der „Bildausrichtung“Runde Ecken: Achtung, Namensverwirrung
Abgerundete Ecken stellst du nicht unter „Rahmen“ ein, sondern unter „Rand“. Dort steht der „Rahmenradius“ mit vier Feldern für die Ecken. Sie sind verknüpft: Ich habe in ein Feld 24 eingetragen, und alle vier standen auf 24 px. Darunter wählst du bei „Umrandungsart“, an welchen Seiten ein Rand läuft.
„Rahmenradius“ in der Gruppe „Rand“
So sieht das Bild mit 24 px Radius aus.Die Gruppe „Rahmen“ hat mit Linien nichts zu tun. Dort stellst du die „Objektanpassung“ ein (Füllung, Einpassen, Abdeckung, Keine, Verkleinern) und die „Objektposition“. Das betrifft vor allem Fälle, in denen du Breite und Höhe fest vorgibst und das Bild in diesen Kasten passen muss. Wie sich die einzelnen Optionen auswirken, habe ich nicht durchgespielt. Probier sie mit deinem eigenen Bild aus, die Vorschau im Canvas reagiert sofort.
Weitere Gruppen sind „Box Schatten“, „Filter“ (Farbton, Sättigung, Helligkeit, Kontrast und mehr) und „Animation“ mit den Stilen Keine, Verblassen, Gleiten, Hüpfen, Zoom und Flip.
Bild verlinken oder in der Lightbox öffnen
Zurück im Reiter Inhalt öffnest du die Gruppe „Link“. Der Schalter „Mit Lightbox Öffnen“ sorgt dafür, dass ein Klick auf das Bild es vergrößert über der Seite zeigt. Wenn du statt dessen auf eine Seite verlinken willst, trägst du die Adresse bei „Link-URL Für Das Bild“ ein und wählst unter „Bildlinkziel“, ob sie im aktuellen oder in einem neuen Tab aufgeht.
Lightbox eingeschaltetBeides zugleich geht nicht: Divi weist in der Oberfläche darauf hin, dass die URL-Optionen ignoriert werden, sobald die Lightbox an ist. Nach dem Speichern habe ich im Frontend aufs Bild geklickt, und die Lightbox öffnete sich mit dem Mediathek-Titel als Unterschrift.
Die Lightbox im FrontendHäufige Fragen
Wo trage ich den Alternativtext ein?
Im Auswahldialog unter „Anhang-Details“ im Feld „Alternativtext“. Er wird beim Auswählen ins Modul übernommen.
Warum steht unter meinem Bild ein Abstand?
Schalte im Reiter Design in der Gruppe „Zwischenraum“ die Option „Raum Unter Dem Bild Entfernen“ ein und prüf zusätzlich Außen- und Innenabstand.
Wie mache ich das Bild kleiner?
Gib unter „Größe Einstellen“ eine „Breite“ oder „Maximale Breite“ vor und richte das Bild über „Ausrichtung“ aus.
Das Theme und seine Module bekommst du bei Elegant Themes (Werbung).
