Trick # 412 | Dieser Beitrag beinhaltet 642 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.
Das Blog-Modul des Divi-Temes präsentiert die veröffentlichten Beiträge ganz hübsch. Wenn aber die Höhe der Teaser – wegen sehr unterschiedlichen Umfängen – stark differiert, kann das unschön aussehen. Doch die Beitragshöhen in der Blogübersicht lassen sich leicht anpassen.
Bei unterschiedlich langen Blogteasern kann sich im Blog-Modul des Divi-Themes auch mal eine Ansicht wie nebenan präsentieren:
Die Artikel werden unterschiedlich hoch dargestellt. Vor allem bei mehreren Blogreihen wirkt das unruhig.
Abhilfe schafft ein wenig CSS-Code. Doch zunächst sollten Sie Ihrem Blogmodul eine CSS-Klasse namens «bloggrid» vergeben. Das können Sie im bearbeiteten Blogmodul unter dem Tab «Erweitert» tun. Klicken Sie dort auf «CSS-ID und Klassen» und geben Sie den Term «bloggrid» ins Textfeld «CSS-Klassen» ein.
Nun kopieren Sie den folgenden CSS-Code und fügen Sie ihn in das CSS-Stylesheet Ihrer Website ein – unter Design/Customizer/Zusätzliches CSS:
.bloggrid .et_pb_salvattore_content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.bloggrid article {
margin-bottom: 20px !important;
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.bloggrid .post-content {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.bloggrid .column {
margin-bottom: 20px !important;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}Schon ist die Höhe Ihrer Blogteaser angeglichen:
Die «Read more»-Buttons erscheinen auf derselben Höhe.
Werbung
Werbung
