Lesefortschritt:

Bilder-Special – Trick #7: Bilder im Divi-Theme überlappend darstellen

6. März 2023 | CSS-Stylesheet, Divi-Theme, Mediathek

Trick # 215 | Dieser Beitrag beinhaltet 639 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.

Zwei oder mehr Bild-Module im Divi-Theme überlappen lassen? Kein Problem. Ein wenig CSS und gut ist. Wir zeigen Ihnen wie’s geht.

Erstellen Sie zunächst auf einer Divi-Seite eine zweispaltige Zeile und fügen Sie je ein Bildmodul ein. Sieht dann so aus:

Da überlappt zunächst mal gar nichts. Dieser Schritt kommt nun: Bearbeiten Sie das linke Bildmodul, wechseln Sie in den Tab «Erweitert» und klicken Sie auf «Benutzerdefinierte CSS». Dort sehen Sie das Feld «Hauptelement», in welches Sie den folgenden Code einfügen:

margin-right: -175px;

Nun bearbeiten Sie das rechte Bildmodul. Wieder unter «Erweitert» und «Benutzerdefinierte CSS» fügen Sie im Fenster «Hauptelement» den Code …

margin-top: 170px;

… ein. Das Ergebnis ist das folgende:

Natürlich werden Sie die Pixelwerte in den CSS-Codes anpassen müssen, bis die Anzeige bei Ihren Sujets stimmig ist. So lassen sich aber überlappende Bilder recht einfach darstellen.

Übrigens lassen sich auch Texte überlappend darstellen. Wie die geht, zeigen wir Ihnen im Beitrag «Zwei Textmodule überlappend darstellen».

Werbung

Keine Inhalte gefunden.

Werbung

 

Pin It on Pinterest

Share This
Überblick über den Datenschutz

Diese Website verwendet Cookies, damit wir Ihnen die bestmögliche Benutzererfahrung bieten können. Cookie-Informationen werden in Ihrem Browser gespeichert und dienen dazu, Sie wiederzuerkennen, wenn Sie auf unsere Website zurückkehren, und unserem Team zu helfen, zu verstehen, welche Bereiche der Website Sie am interessantesten und nützlichsten finden.