Blog-Modul-Special #10: Neueste Beiträge in der Sidebar anzeigen – mit dem Divi-Blog-Modul

16. Dezember 2022 | CSS-Stylesheet, Divi-Theme

Dieser Beitrag beinhaltet 428 Wörter. Geschätzte Lesezeit: ca. 3 Minuten.

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

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This