Wir werden ein Divi-Blogmodul verwenden um es in der Seitenleiste zu platzieren und die letzten Beiträge anzuzeigen. Ohne diese Methode müssten Sie ein Widget verwenden – verlören aber einige Gestaltungsfreiheit.
Platzieren Sie zunächst ein Blog-Modul in der Sidebar Ihrer Divi-Website. Stellen Sie das Blog-Modul unter der Registerkarte Design/Layout auf «Volle Breite» ein – standardmässig sollte das von Haus aus der Fall sein. In der Seitenleiste werden Sie vermutlich nur das Bild, den Titel und das Datum anzeigen wollen – dies können Sie im «Inhalt»-Tab der Blog-Einstellungen (unter «Elemente» definieren.
Als nächstes fügen Sie eine benutzerdefinierte CSS-Klasse in das Modul ein. Gehen Sie auf der Registerkarte «Erweitert» auf «Benutzerdefinierte CSS-ID & Klassen» und fügen Sie «blog-sidebar-list» in das Eingabefeld «CSS-Klasse» ein. Speichern Sie nun das Blog-Modul.
In der Folge kopieren Sie den folgenden CSS-Code und fügen ihn in das CSS-Stylesheet Ihrer Website ein – unter Design/Customizer/Zusätzliches CSS:
/* Bildbreite festlegen*/
.blog-sidebar-list .entry-featured-image-url {
width: 100px;
float: left;
margin-bottom: 0!important;
}
/* Textbreite fetslegen */
.blog-sidebar-list .entry-title,
.blog-sidebar-list .post-meta {
width: calc(100% - 100px);
float: left;
padding-left: 20px;
}
/* Bild quadratisch darstellen */
.blog-sidebar-list .entry-featured-image-url {
padding-top: 100px;
display: block;
}
.blog-sidebar-list .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
/* Abstände festlegen und Beiträge mit einer Linie trennnen */
.blog-sidebar-list .et_pb_post:not(:last-child) {
border-bottom: 1px solid #dddddd!important;
padding-bottom: 20px;
margin-bottom: 20px;
}Der Code legt ein quadratisches Bild fest. Wir haben es auf 100px Höhe und Breite festgelegt. Wenn Sie dies ändern möchten, können Sie dies auf den Zeilen 3, 11 und 18 tun.
Einfach, oder?
Werbung
Werbung
