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:
Hover-Animation für das Divi-Standard-Menü
Die Gestaltungsmöglichkeiten des Standard-Menüs im Divi-Theme sind beschränkt. Es lässt sich aber noch das eine oder andere herauskitzeln. Heute zeigen wir Ihnen eine einfache Animation für das Standardmenü.
/* 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
Werbung
