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
Standardmässig fügt das Divi-Theme zu jedem Ihrer Widget-Listenelemente in Ihrem Footer-Bereich Aufzählungspunkte (Bullet-Points) hinzu. Einige Divi-Fusszeilendesigns können mit diesen Aufzählungspunkten arbeiten, aber viele Webdesigner ziehen ...
Texte in einem Textmodul des Divi-Themes können Sie vorzüglich mit einer Focus-In-Animation zum Eyecatcher umwandeln. Die Texte werden zunächst unscharf und gedehnt dargestellt und werden dann langsam schärfer und schmaler.
Neulich hat uns ein Mail erreicht: Darin war die Frage enthalten, wie sich Texte als Prägung auf der Website darstellen lassen. Natürlich ist das mit einem Grafikprogramm schnell gemacht – aber noch eleganter lösen wir dies mittels CSS-Code.
Divi enthält ein Galeriemodul, mit dem Sie ein Raster von Bildern anzeigen können. Wenn Sie darauf klicken, öffnen sich diese Bilder in einem Leuchtkasten. Wenn Sie dieses Galerie-Popup stärker hervorheben möchten, erfahren Sie hier, wie Sie ...
Keine Inhalte gefunden.
Werbung
