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:
Google-Maps in Schwarz-Weiss statt farbig
Mit dem Karten-Modul des Divi-Themes können Sie auf einfache Weise eine Google-Karte auf Ihrer Website einblenden. Diese wird farbig dargestellt – hin und wieder passt aber die Kartenfarbe nicht zum übrigen Webdesign. Mit ein wenig CSS-Code können Sie die Karte darum schwarz-weiss darstellen.
/* 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
Bilder-Special – Trick #5: Coole 3D-Flip-Cards ganz einfach in HTML erstellen – komplett ohne Plugin
Werbung
