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:
Dem Informationstext-Modul (Blurb-Modul) des Divi-Themes einen hübschen Hover-Effekt hinzufügen
Mit dem Informationstext-Modul des Divi-Themes – auch «Blurb-Modul» genannt – lassen sich Teaser ganz einfach anlegen. Und mit ein wenig CSS-Code auch ganz nett aufhübschen. Wir zeigen Ihnen, wie das geht.
/* 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