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
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.
Die Standard-Fusszeile des Divi-Themes bietet die Möglichkeit, SocialMedia-Icons zu platzieren. Schön und gut; doch die Gestaltungsmöglichkeiten dieser Icons sind eher dürftig. Mit ein wenig CSS-Code lassen sich die einschlägigen Symbole aber ...
Heute zeigen wir Ihnen, wie Sie ein bestimmtes CSS-Styling einzig und alleine auf der Homepage Ihres Webauftritts aktivieren. Auf allen anderen Seiten wird das Styling nicht berücksichtigt. Ein kleiner praktischer Trick fürs Webdesign.
Die Rows (Zeilen) im Divi-Theme und dessen Sections (Sektionen) lassen immer einen Abstand zum nächsten gleichen Element frei. Das ist manchmal OK - auf vielen Websites aber auch störend. Via CSS lassen sich die Abstände anpassen oder gleich ...
Keine Inhalte gefunden.
Werbung
