Lesefortschritt:

Bilder-Special – Trick #6: Bild im Divi-Theme aus einem Bereich herausragen lassen

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

Dieser Beitrag beinhaltet 759 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.

Eine interessante Möglichkeit für hübsche Darstellungen: Lassen Sie – etwa auf einer Übersichtsseite – Bilder über einen Hintergrund hinausragen. Das ist einfacher zu machen, als man meint.

Sie benötigen für diesen Trick ein Bild mit transparentem Hintergrund. Zum Beispiel also ein PNG-File. Weiter kommt eine Divi-Sektion zum Zug. In diese fügen Sie eine Zeile mit Hintergrundfarbe ein. Definieren Sie auch die Höhe der Zeile – sie sollte ein wenig kleiner ausfallen als die Höhe des später anzuzeigenden Bildes.

Nun erstellen Sie eine zweite Divi-Zeile. In diese fügen Sie ein Bildmodul ein. Im Backend wird dies dann etwa so aussehen:

Dies ergibt zunächst folgende Darstellung auf der Live-Seite:

Lorem ipsum dolor sit amet

Damit das Bild nun auf den blauen Hintergrund zu liegen kommt und aus diesem ein Stück weit hinausragt, benötigen Sie noch eine kleine CSS-Anweisung. Diese legen Sie im Bild-Modul ab: Im Tab «Erweitert» finden Sie «Benutzedefinierte CSS». Dort fügen Sie den folgenden Code im Fenster «Hauptelement» ein:

margin-top: -230px;

Die Darstellung wechselt nun auf der Live-Website:

Lorem ipsum dolor sit amet

Das war’s auch schon. Je nach Bilddimension werden Sie den Pixelwert im CSS-Code ein wenig anpassen müssen. Da wird pröbeln hilfreich sein.

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This