Lesefortschritt:

Blog-Modul-Special #8: Meta-Angaben im Divi-Blog-Modul mit Icons ergänzen

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

Trick # 187 | Dieser Beitrag beinhaltet 661 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.

Im Blog-Modul des Divi-Themes lassen sich Meta-Angaben anzeigen: Kategorien, Datum, AutorIn etc. Diesen Meta-Angaben können passende Icons vorangestellt werden. Wir zeigen Ihnen, wie dies geht.

Nebenan sehen Sie ein Blog-Modul in der Standardansicht. Die Metaangaben sind grau hinterlegt – an diesen werden wir arbeiten.

 

Fügen Sie ein Blogmodul an der gewünschten Stelle Ihrer Divi-Website ein und bearbeiten Sie das Modul bis es wie gewünscht erscheint. Anschliessend gehen Sie in den Blog-Einstellungen auf den Tab «Erweitert», klicken auf «CSS-ID & Klassen» und fügen im Textfeld «CSS-Klasse» den Namen «blog-meta-icons» ein.

Nun kopieren Sie den folgenden CSS-Code und platzieren diese im Stylesheet Ihrer Website. Im Backend am besten unter Design/Customizer/Zusätzliches CSS:

 /* AutorInnen-Icon anpassen */
.blog-meta-icons .post-meta .author a:before {
	content: "\e08a";
	font-family: ETMODULES;
	color: #293280;
	margin-right: 4px;
}

/* Kategorie-Icon anpassen */
.blog-meta-icons .post-meta>a:before {
	content: "\e078";
	font-family: ETMODULES;
	color: #293280;
	margin-right: 4px;
}

/* Datums-Icon anpassen */
.blog-meta-icons .post-meta .published:before {
	content: "\e023";
	font-family: ETMODULES;
	color: #293280;
	margin-right: 4px;
}

Die Farbcodes können Sie im CSS-Stylesheet einfach anpassen. Ebenso die Abstände zum jeweiligen Eintrag, die hier mit 4px angegeben sind.

Unser Beispiel ergibt die nebenstehende Ansicht:

 

Hübsch – nicht?

Werbung

Keine Inhalte gefunden.

Werbung

 

Pin It on Pinterest

Share This
Überblick über den Datenschutz

Diese Website verwendet Cookies, damit wir Ihnen die bestmögliche Benutzererfahrung bieten können. Cookie-Informationen werden in Ihrem Browser gespeichert und dienen dazu, Sie wiederzuerkennen, wenn Sie auf unsere Website zurückkehren, und unserem Team zu helfen, zu verstehen, welche Bereiche der Website Sie am interessantesten und nützlichsten finden.