Ein Bild, das über den Rand seiner Spalte hinausragt. Eine Textkarte, die halb in der Sektion darüber hängt. Solche Überlappungen machen eine Seite lebendiger als die übliche Kästchen-Optik, und in Divi 5 bekommst du sie ohne eigenen Code hin.
Ich zeige dir die drei Stellschrauben, die wirklich zählen: den negativen Außenabstand, den Z-Index (mit einer Falle) und das Verschieben. Dazu kommt die Falle auf dem Handy, bei der eine Überlappung das gestapelte Layout zerschießt. Getestet mit Divi 5.13 (deutsche Oberfläche), Stand Oktober 2026.
Wie Überlappung in Divi 5 überhaupt entsteht
Divi legt Zeilen und Spalten per Flexbox nebeneinander, jedes Element hat seinen eigenen Platz. Zum Überlappen musst du dieses Gefüge bewusst brechen. Dafür gibt es zwei Werkzeuge: Du ziehst ein Element mit negativem Außenabstand in den Nachbarbereich, oder du schiebst es per Transformieren optisch an eine andere Stelle. Welches Element oben liegt, entscheidet danach die Reihenfolge im Code und der Z-Index.
Für meine Tests habe ich eine Sektion mit zwei Spalten gebaut, in jeder ein Text-Modul mit Hintergrundfarbe. Darunter liegt eine zweite Sektion mit einem weiteren Modul. So siehst du jede Überlappung sofort.
Weg 1: Negativer Außenabstand
Das ist der sauberste Weg und meine Empfehlung für fast jeden Fall. Wähl das Modul, das überlappen soll (Maus drüber, Zahnrad in der Leiste), und geh so vor:
- Reiter „Design“, Gruppe „Zwischenraum“ öffnen.
- Unter „Außenabstand“ trägst du bei „Links“ einen negativen Wert ein, zum Beispiel
-100 (Einheit px), und bestätigst mit der Tabulatortaste.
Außenabstand Links mit -100, dazu Innenabstand Links mit 120 (dazu gleich mehr).
Das Modul in der zweiten Spalte wächst um 100 Pixel nach links und liegt über der Nachbarspalte. Es liegt oben, weil es im Code später kommt. In meinem Test ist es dabei von 405 auf 505 Pixel Breite gewachsen. Es wandert also nicht, es wird breiter.
Damit der Text nicht mit nach links rutscht, habe ich den „Innenabstand“ bei „Links“ von 20 auf 120 erhöht. Dann steht die Schrift an ihrer alten Stelle, nur die Fläche dahinter ragt hinaus.
Die orange Fläche deckt den rechten Rand der blauen ab, der Text der orangen Karte steht weiter an seiner Stelle.
Dasselbe funktioniert in alle Richtungen: Negatives „Rechts“ zieht das Modul nach rechts hinaus, negatives „Oben“ nach oben, negatives „Unten“ lässt die Nachfolger heranrücken.
Senkrecht: ein Element in die Sektion darüber ziehen
Der Klassiker ist die Karte, die aus dem nächsten Abschnitt in den Kopfbereich ragt. Nimm das Modul der zweiten Sektion und setz bei „Außenabstand“ den Wert bei „Oben“ auf einen negativen Wert. Ich habe -200 genommen, bei einer ersten Sektion mit 100 Pixel Innenabstand oben und unten.
Das grüne Modul sitzt jetzt im unteren Teil der blauen Sektion.
Gib der oberen Sektion unten genug Luft. Sonst deckt die hochgezogene Karte Text oder Bilder ab, die du eigentlich lesen willst.
Z-Index: Wer liegt oben?
Normalerweise gewinnt das spätere Element. Soll die erste Spalte vor der zweiten liegen, brauchst du den Z-Index. Und hier steckt die Falle: Der Z-Index am Modul hilft nicht. Ich habe beim Modul in Spalte 1 unter „Erweitert“ → „Arbeitsstelle“ den Z-Index auf 10 gesetzt, und die orange Karte lag weiter obenauf. Der Grund: Beide Spalten haben von Haus aus einen eigenen Stapel (Position relativ, Z-Index 2), und das Modul liegt nur innerhalb seiner Spalte.
Du musst den Wert an der Spalte setzen:
- Zeile wählen (Zahnrad), im Reiter „Inhalt“ die Gruppe „Elemente“ öffnen und beim Eintrag „Spalte“ auf den Stift klicken.
- Reiter „Erweitert“, Gruppe „Arbeitsstelle“.
- Bei „Z-Index“ trägst du
10 ein. Die Spalte hat hier auch „Position“ (bei mir „Relativ“) sowie „Vertikaler Versatz“ und „Horizontaler Versatz“.
Der Z-Index gehört an die Spalte, nicht an das Modul darin.
Jetzt liegt die blaue Spalte vorn und deckt den Anfang der orangen ab.
Weg 2: Verschieben mit „Transformieren“
Statt den Abstand zu ändern, kannst du ein Modul auch optisch verschieben: Reiter „Design“, Gruppe „Transformieren“. Dort stehen unter „Transforms“ fünf Symbole. Das zweite öffnet „Transform Position“ mit den Feldern „X“ und „Y“. Zwischen den beiden Feldern sitzt ein Kettensymbol. Klick es einmal an, sonst bewegst du beide Achsen zusammen. Trag dann bei X zum Beispiel -100 ein.
Die orange Karte ist nur verschoben und bleibt 405 Pixel breit. Ihr Platz in der Zeile bleibt reserviert.
Der Unterschied zum Außenabstand: Das Modul wird nicht breiter, und der Platz in der Zeile bleibt so, wie er war. Praktisch für kleine Versätze, bei denen das übrige Layout stehen bleiben soll. Für größere Überlappungen nehme ich den Außenabstand, weil er sich beim Umbruch auf dem Handy leichter zurücknehmen lässt.
Die Handy-Falle: Der negative Abstand bleibt
Auf dem Handy stapelt Divi die Spalten untereinander. Dein negativer Außenabstand bleibt dabei aktiv. Die zweite Karte beginnt dann 100 Pixel links von allen anderen und ragt aus dem Bildschirm. Auch der erhöhte Innenabstand gilt weiter und schiebt den Text zur Seite.
Gestapelt ragt die orange Karte links aus dem Bild, der Text hängt eingerückt darin.
So behebst du es:
- Schalte oben in der Leiste auf das Gerätesymbol „Telefon“. Das Einstellungsfeld bleibt offen.
- Setz „Außenabstand“ bei „Links“ auf
0 und „Innenabstand“ bei „Links“ zurück auf 20.
Die Werte gelten nur für das Telefon, am Desktop bleibt alles beim Alten. Im Test standen die Module danach sauber untereinander, live bei 390 Pixel Fensterbreite jeweils 312 Pixel breit.
Live auf Handybreite: alle drei Karten stehen sauber untereinander.
Auch beim senkrechten Hochziehen lohnt sich ein Blick aufs Handy. Der Überlapp bleibt dort bestehen, prüf also, ob der Text in der Sektion darüber noch frei liegt. Mit „Tablet“ gehst du genauso vor wie mit „Telefon“.
Meine Empfehlung
Nimm den negativen Außenabstand am Modul, gleich den Innenabstand aus, setz den Z-Index an der Spalte und schau dir danach immer Tablet und Telefon an. Speichern nicht vergessen, dann ist die Überlappung fertig. Wenn du Spalten erst in ihrer Breite anpassen willst, hilft Spaltenbreite in Divi 5 ändern. Wie Zeile und Sektion drumherum funktionieren, steht in Zeilen in Divi 5 und Sektionen in Divi 5. Divi selbst gibt es bei Elegant Themes (Werbung).
