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
Haben Sie auch schon neidisch auf Websites geschielt, die ihren Firmenstandort mit Google Maps online anzeigen? Dafür benötigen Sie eigentlich einen bezahlten Code – das so genannte API. Es gibt aber einen Plan B zum Einbinden von Google Maps ...
Das Footer-Menu im Divi-Theme ist von Haus aus immer links ausgerichtet. Eine Option, um es zu zentrieren oder rechtsbündig anzulegen, sucht man vergebens. Dennoch ist das möglich: mithilfe von ein paar Zeilen CSS-Code.
Haben Sie die Adventsdekoration schon aus dem Schrank geholt? Und die alte Bing-Crosby-Platte aufgelegt? Wenn Ihnen zum heutigen ersten Advent schon vorweihnächtlich zumute ist, möchten Sie es vielleicht auf Ihrer Website schneien lassen. ...
Die Blog-Übersichten im Divi-Theme bieten schon einige Möglichkeiten zum Styling. Doch richtig cool wird die Bildwelt, wenn Sie mit ein paar CSS-Tricke noch ein wenig nachhelfen. Zwei Möglichkeiten möchten wir Ihnen heute vorstellen.
Keine Inhalte gefunden.
Werbung
