Wenn man mit Bildern und Textmodulen in Divi arbeitet, ist das eine sehr einfache Sache. Mit wenigen Klicks hat man alles eingebaut, und man muss dabei nicht wirklich viel konfigurieren. Aber oft hat man dann das Problem, dass Bilder und Texte unterschiedlich lang sind und somit sehr unschön aussehen können.

Wir alle wissen, dass im Webdesign das „schön aussehen“ wichtig ist, und danach fängt das Gefriemel an. Ja, man kann ein Bild nehmen und den Text daran anpassen, und wenn er zu kurz ist, den Text erweitern, oder wenn er zu lang ist, den Text kürzen. Aber wehe, man will einen Text oder ein Bild ersetzen – zack, schon hat man wieder Probleme und fängt von Neuem an.

Wäre es nicht viel einfacher, wenn dieser Abgleich von der Größe eines Bildes zur Größe eines Textes automatisch erfolgen würde?

Ja, und genau das zeige ich euch heute in diesem Video.

Video

Vorbereitung

Text und Bild einbauen

In Zeile Settings:
Spaltenhöhe ausgleichen

Als CSS Klasse dem Bildmodul hinzufügen

1

cb-full-height-image-column

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/*bild an text anpassen*/
/* bild höhe */
.cb-full-height-image-column {
	height: 100%;
}
/* container höhe vom bildmodul */
.cb-full-height-image-column .et_pb_image_wrap {
	height: 100%;
}
/* höhe bildmodul mit bildhöhe abgleichen*/
.cb-full-height-image-column img {
	object-fit: cover;
	height: 100%;
}