Ü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: 10Der 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.
Verwandte Artikel
Für anspruchsvolle Layout-Ideen und Divi-Customizing steht unser Webdesign-Team bereit.
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.
Hast du eine Frage zu diesem Artikel?
Schreib uns – wir antworten in der Regel innerhalb eines Werktages.