Trick # 184 | Dieser Beitrag beinhaltet 443 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Das Divi-Blog-Modul kennt offiziell nur das «Gitterlayout» und die «volle Breite». Es fehlt ein Listenlayout. Doch dieses können Sie mit ein wenig Handarbeit selber gestalten.
In unserem Beispiel schwebt uns vor, dass das Beitragsbild in der Liste links steht und der Teasertext des Beitrags rechts. Folgende drei Schritte sind dazu nötig:
- Gehen Sie in den Einstellungen des Blog-Moduls auf die Registerkarte «Design» und setzen Sie das Layout auf «Volle Breite». Das Resultat sieht zunächst seltsam aus. Machen Sie sich keine Sorgen; wir stellen es so ein, damit die nächsten Schritte einfacher sind.
- Um nur bestimmte, gewünschte Blog-Module auf der Website zu gestalten, können Sie eine benutzerdefinierte Klasse verwenden. Öffnen Sie also erneut die Einstellungen des Divi Blog-Moduls und gehen Sie auf die Registerkarte «Erweitert». Öffnen Sie dort die Registerkarte «CSS ID & Klassen» und schreiben Sie die Klasse «blog-list» in das Eingabefeld «CSS-Klasse» ein.
- Nun definieren wir das Beitragsbild auf eine Breite von 30 %. Für den Titel, die Meta und den Auszug legen wir 70 % fest. Dies lösen wir mit einigen Zeilen CSS-Code, die Sie in das CSS-Sytlesheet Ihrer Website eintragen. Und zwar unter Design/Customizer/Zusätzliches CSS im WordPress-Backend:
@media (min-width: 767px) {
/* Bildbreite festlegen */
.blog-list .entry-featured-image-url {
width: 30%;
float: left;
margin-bottom: 0!important;
}
/* Teasertext stylen */
.blog-list .entry-title,
.blog-list .post-meta,
.blog-list .post-content {
width: 70%;
float: left;
padding-left: 30px;
}
}Ein paar erklärende Worte zum CSS-Code:
- Auf Zeile 1 legen wir fest, dass die Listenansicht nur auf Tablets und Desktops aktiv ist. Auf Smartphones bleibt die Darstellung bei der Standardansicht «Volle Breite».
- Auf Zeile 5 wird die Spalte für das Bild auf 30 % festgelegt. Diesen Wert können Sie bei Bedarf anpassen.
- Auf Zeile 14 folgt der Wert der Spaltenbreite (70 %) für den Teasertext. Auch diesen Wert können Sie anpassen.
Das ist schon alles. Ihr Blog-Modul «kann» damit auch Listendarstellungen.
Werbung
Besonders wenn Sie ab und an selber an ihren Theme-Dateien oder am CSS-Stylesheet Hand anlegen, kann es nach einiger Zeit unübersichtlich werden: Was genau tut der Code in der functions.php? Welches Styling wird von Zeile 987 in meinem ...
Als das WWW in den 90er-Jahren immer populärer wurde, war noch nicht viel los in Sachen Animationen. Ein Auswuchs von seinerzeit: Blinkende Texte. Diese vermochten richtig zu nerven und der blink-Tag ist denn auch aus dem HTML-Standard ...
Das Menu-Modul des Divi-Themes kennt zahlreiche Einstellungsmöglichkeiten. Aber nirgends lassen sich Separatoren zwischen den einzelnen Menupunkten festlegen. Mit diesem Trick gelingt auch dies.
Vielleicht möchten Sie eine kleine Bildsammlung oder eine Reihe von Zeitschriften als virtuellen Fächer darbieten? Geht ganz einfach.
Keine Inhalte gefunden.
Werbung
