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 ...
Mit dem HTML-Element button können Sie ganz einfach Schaltflächen erstellen. Mit der Zugabe von noch ein wenig CSS-Code, werden die Buttons überdies richtig schmuck. Drei Gestaltungsmöglichkeiten zeigen wir Ihnen in diesem Beitrag.
Bilder-Special – Trick #5: Coole 3D-Flip-Cards ganz einfach in HTML erstellen – komplett ohne Plugin
Heute bauen wir einen echten Hingucker: So genannte Flip-Cards, die sich umdrehen, sobald der Mauszeiger darüber bewegt wird. Das gibt ein ebenso cooles wie professionelles Look & Feel für Ihre Website.
Sehr grosse und hohe Bilder können im Divi-Theme ganz einfach scrollbar eingebunden werden. Das ist total simpel und kann auch mal hilfreich sein. Der Trick, der zeigt wie's geht, folgt hier.
Keine Inhalte gefunden.
Werbung
