Lesefortschritt:

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

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

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:

Kategorie- oder Schlagwort-Widget Marke Eigenbau – mit wenig PHP-Code

Wordpress liefert ein Widget für Kategorien und Schlagworte mit. Damit lassen sich die verwendeten Taxonomien praktisch anzeigen und auch gleich mit den entsprechenden Übersichtsseiten verlinken. Das Styling der Widgets ist aber ziemlich haarig. Also habe ich kurzerhand selbst ein wenig getüftelt und mit PHP-Code ein eigenes Kategorie-Widget erstellt. Das können Sie auch.

mehr lesen
 /* 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?

Kategorie- oder Schlagwort-Widget Marke Eigenbau – mit wenig PHP-Code

Wordpress liefert ein Widget für Kategorien und Schlagworte mit. Damit lassen sich die verwendeten Taxonomien praktisch anzeigen und auch gleich mit den entsprechenden Übersichtsseiten verlinken. Das Styling der Widgets ist aber ziemlich haarig. Also habe ich kurzerhand selbst ein wenig getüftelt und mit PHP-Code ein eigenes Kategorie-Widget erstellt. Das können Sie auch.

mehr lesen

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