Beitragsbild im Divi-Blog neben dem Text platzieren

12. Januar 2021 | CSS-Stylesheet, Divi-Theme

Das Blog-Modul in Divi zeigt die Bilder stets über dem Titel und dem Textauszug. Das gefällt nicht allen. Mit ein paar Zeilen CSS können Sie das Bild links oder rechts des Textes platzieren.

Wählen Sie – je nach Wunsch – einen der folgenden Codes und fügen sie ihn in Ihr CSS-Stylesheet unter Design/Customizer/Zusätzliches CSS ein.

Bild links – Text rechts

.et_pb_post a img {
height: 200px!important;
float: left;
width: 200px;
left: 0;
padding-right: 20px;}

@media only screen and (max-width: 980px) {
.et_pb_post a img {
float:none;
width:200px;
height:200px;}}

Bild rechts – Text links

.et_pb_post a img {
height: 200px!important;
float: right;
width: 200px;
right: 0;
padding-left: 20px;}

@media only screen and (max-width: 980px) {
.et_pb_post a img {
float:none;
width:200px;
height:200px;}}

Dieses Snippet gilt nur für die Darstellung «Volle Breite», nicht aber für «Gitter». Ersetzen Sie die Zahlenwerte bei width: und height: mit Ihrer gewünschten Bildgrösse.

Beide Codes haben nur einen Einfluss auf die Desktop-Ansicht. Auf mobilen Geräten bleibt das Bild über dem Text.

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