Wie lasse ich Elemente in Divi überlappen?

Nutze negative Margins im Divi Builder: Element → Design → Abstände → negativen Wert für oberen oder unteren Abstand eingeben (z.B. -50px). Alternativ über Custom CSS mit position: relative und top/left-Werten.

DIVI: Elemente überlappen lassen

Marius Marzian • 26. Oktober 2020 • 3 Min. Lesezeit

Bildschirmfoto 2020 10 26 Um 14.31.18 1024x739 1

SEO-Experte

Marius Marzian

OIT GmbH

Profil ansehen

Überlappende Designelemente – etwa eine Headline, die halb auf einem Bild sitzt, oder eine Card, die eine Sektionsgrenze durchbricht – sind ein beliebter moderner Design-Kniff. Mit Divi lässt sich das per negativem Margin und Stapel-Reihenfolge sehr sauber umsetzen, ohne custom Code zu schreiben.

So kannst du die überlappende Reihenfolge ändern!
Standardmäßig befindet sich das erste Element auf der Seite immer hinter dem darauf folgenden Element, wenn sich die beiden überlappen. Deshalb überlappt der Inhalt rechts immer dem Inhalt links.

Du kannst dies einfach mit einer Zeile benutzerdefinierten CSS ändern.

Gehen Sie zu dem Abschnitt (oder der Zeile), in dem sich Ihre erste Spalte befindet (die linke), und geben Sie unter der Registerkarte „Erweitert“ das folgende CSS in das Feld „Hauptelement“ ein:

z-index: 10

Der Grund dafür ist, dass alle Spalten standardmäßig den Z-Index 9 haben. Wenn Sie die Zahl auf 10 erhöhen, wird das Element übereinander gestapelt. Dies funktioniert nur auf Spaltenebene.

Tipps für überlappende Divi-Elemente

z-index kontrollieren

Welches Element liegt oben? Das bestimmt der z-index. Divi vergibt automatisch z-index-Werte – bei Überlappungen musst du diese oft manuell in den Custom CSS-Feldern des Moduls überschreiben.

Mobile Check Pflicht

Überlappungen sehen auf Desktop toll aus, brechen auf Mobile oft komplett aus dem Layout. Prüfe jede Überlappung in der Divi-Responsive-Vorschau für Tablet und Mobile.

Overflow verstecken

Wenn ein Element über den Seitenrand hinausragt, hilft overflow: hidden auf dem Eltern-Container – verhindert horizontales Scrollen auf Mobile.

Du brauchst professionelle Unterstützung bei WordPress oder Divi? OIT GmbH aus Osnabrück bietet WordPress-Webdesign und WordPress-Wartung für Ihr Unternehmen.