Trick # 235 | Dieser Beitrag beinhaltet 1089 Wörter. – Geschätzte Lesezeit: ca. 6 Minuten.
Das Blog-Modul des Divi-Themes ist recht beschränkt, was die Einstellungsmöglichkeiten für die Ausgabe betrifft. Vor allem hinsichtlich Spalten wünscht man sich oft mehr Optionen. Die gibt es auch: mit einem einfachen Trick. Hier zeigen wir Ihnen wie’s geht.
Das Divi-Blogmodul lässt sich unter dem «Design-Tab zwischen «Fullwidth»- und «Grid»-Ansicht umschalten. Wählt man letzteres ist aber alsbald Schluss mit den Einstellungsmöglichkeiten: 3 Spalten auf Desktops, 2 auf Tablets und eine Spalte auf Mobiltelefonen. Das ist schon das höchste der Gefühle.
Doch freilich gibt das mehr her: Dürfen es auf Desktops vielleicht 4, 5 oder gar 6 Spalten sein. Das lässt sich mit einer Reihe CSS-Codes erreichen.
Zunächst müssen Sie aber das Blogmodul vorbereiten. Berabeiten Sie es wie folgt.
- Wählen Sie unter «Design» die vollständige Breite «Fullwidth».
- Unter «Erweitert» oder «Advanced» klicken Sie auf «CSS-ID und Klassen» und fügen unter «CSS-Klasse» den Text «blog-layout» ein.
Nun kopieren Sie den folgenden Code in das CSS-Stylesheet Ihrer WordPress-Installation. Dieses erreichen Sie unter Design/Customizer/Zusätzliches CSS:
/* Grosse Bildschirme über 1405px */
@media only screen and ( min-width: 1406px ) {
.blog-layout {
column-count: 4;
column-gap: 60px;
}
}
/* Laptops & Desktops 1101-1405px */
@media only screen and ( min-width: 1101px ) and ( max-width: 1405px) {
.blog-layout {
column-count: 3;
column-gap: 40px;
}
}
/* Tablets in Landscape-Modus 981-1100px */
@media only screen and ( min-width: 981px ) and ( max-width: 1100px ) {
.blog-layout {
column-count: 2;
column-gap: 30px;
}
}
/* Tablets in Portrait-Modus 768-980px */
@media only screen and ( min-width: 768px ) and ( max-width: 980px ) {
.blog-layout {
column-count: 2;
column-gap: 30px;
}
}
/* Smartphones in Landscape-Modus 480-767px */
@media only screen and ( min-width: 480px ) and ( max-width: 767px ) {
.blog-layout {
column-count: 1;
column-gap: 0px;
}
}
/* Smartphones im Portrait-Modus bis 479px */
@media only screen and ( max-width: 479px ) {
.blog-layout {
column-count: 1;
column-gap: 0px;
}
}Der Code beinhaltet eine Reihe von Abfragen für die Anzeigengrösse und wiederholt dann jeweils zwei Designanweisungen:
- column-count: Hier definieren Sie die Zahl der Spalten für die jeweilige Ansicht.
- column-gap: Dies benennt den Abstand zwischen zwei Spalten.
Beide Werte können Sie nach Gusto für jede Anzeigengrösse anpassen.
Da das Blogmmodul bereits auf «Fullwidth»-Darstellung gesetzt ist, könnten Sie die Zeilen 29-42 auch weglassen.
Blogdarstellung stylen
Wenn Sie schon grad dabei sind: Mit untenstehendem CSS-Code können Sie das Blogmodul weiter stylen. Auch diese Werte können Sie natürlich nach Wunsch anpassen. Dann ab damit ins CSS-Stylesheet. Unter Design/Customizer/Zusätzliches CSS:
.et_pb_posts .et_pb_post {
padding: 30px;
background: #f2f2f2;
border-radius: 10px;
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */
}Beide Codes ergeben dann in etwa folgende Darstellungen. Für grössere Bilder einfach auf den Screenshot klicken:
Desktops
Tablets hochkant
Tablets quer
Mobiltelefon
Voilà: das wärs.
Werbung
Werbung
