Lesefortschritt:

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

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

Trick # 189 | 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

Einheit im Divi-Zählermodul ändern

Das Divi-Theme beinhaltet ein adrettes Zählermodul. Doch standardmässig zeigt dieses stets ein Prozentzeichen als Einheit an. Das passt natürlich nicht immer. Sie können das Zeichen aber auf einfache Weise entweder ganz ausblenden oder - noch ...

Werbung

 

Pin It on Pinterest

Share This