Blog-Modul-Special #6: Seitenverhältnis der Beitragsbilder im Divi-Blogmodul anpassen

20. Dezember 2022 | CSS-Stylesheet, Divi-Theme

Dieser Beitrag beinhaltet 1780 Wörter. Geschätzte Lesezeit: ca. 9 Minuten.

Das Seitenverhältnis der Beitragsbilder, welche im Divi-Blog-Modul angezeigt werden lässt sich anpassen. Standardmässig bildet das Blogmodul Bilder mit 400x250px ab – was einem Seitenverhältnis von 8:5 entspricht. Die Darstellung lässt sich aber übersteuern; selbst dann, wenn das Bild auf dem Server gar nicht im gewünschten Format vorliegt. Wir zeigen Ihnen wie das geht.

Gleich 7 verschiedene Bild-Seitenverhältnisse haben wir für Sie aufbereitet. Sie funktionieren auch dann, wenn das gewünschte Format gar nicht vorliegt.

Zwei Schritte sind bei der Umsetzung vonnöten:

  • Um den Trick anzuwenden, benutzen Sie eines der untenstehenden Snippets. Der Code gehört in das CSS-Stylesheet Ihrer Divi-Website – unter Design/Customizer/Zusätzliches CSS können Sie ihn einfügen.
  • Ferner müssen Sie dem Divi-Blog-Modul mitteilen, welche CSS-Klasse verwendet werden soll. Sie finden diese direkt bei untenstehenden Beispielen vermerkt. Die CSS-Klasse können Sie kopieren und im Bearbeitungsmodus des Blog-Moduls unter «Erweitert», «CSS-ID & Klassen» und «CSS-Klasse» eintragen.

Wählen Sie nun ein passendes Seitenverhältnis aus. Jeweils links sehen Sie den Effekt, rechts den zugehörigen CSS-Code sowie die Klasse für Ihr Blog-Modul:

Square 1:1
CSS-Code

CSS-Klasse «blog-image-1-1» 

.blog-image-1-1 .entry-featured-image-url {
  padding-top: 100%;
  display: block;
}

.blog-image-1-1 .entry-featured-image-url img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
}
Landscape 16:9
CSS-Code

CSS-Klasse «blog-image-16-9» 

.blog-image-16-9 .entry-featured-image-url {
  padding-top: 56.25%;
  display: block;
}

.blog-image-16-9 .entry-featured-image-url img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
}
Landscape 4:3
CSS-Code

CSS-Klasse «blog-image-4-3»

.blog-image-4-3 .entry-featured-image-url {
  padding-top: 75%;
  display: block;
}

.blog-image-4-3 .entry-featured-image-url img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
}
Landscape 3:2
CSS-Code

CSS-Klasse «blog-image-3-2»

.blog-image-3-2 .entry-featured-image-url {
  padding-top: 66.66%;
  display: block;
}

.blog-image-3-2 .entry-featured-image-url img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
}
Portrait 9:16
CSS-Code

CSS-Klasse «blog-image-9-16»

.blog-image-9-16 .entry-featured-image-url {
  padding-top: 177.77%;
  display: block;
}

.blog-image-9-16 .entry-featured-image-url img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
}
Portrait 3:4
CSS-Code

CSS-Klasse «blog-image-3-4»

.blog-image-3-4 .entry-featured-image-url {
  padding-top: 133.33%;
  display: block;
}

.blog-image-3-4 .entry-featured-image-url img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
}
Portrait 2:3
CSS-Code

CSS-Klasse «blog-image-2-3»

.blog-image-2-3 .entry-featured-image-url {
  padding-top: 150%;
  display: block;
}

.blog-image-2-3 .entry-featured-image-url img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
}

Viel Erfolg beim Ausprobieren.

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