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:
Beitragsnummerierung im Backend anzeigen – wahlweise auch im Frontend
Möchten Sie die fortlaufende Beitragsnummer in der WordPress-Beitragsübersicht anzeigen lassen? Dieser Trick kann besonders hilfreich sein, wenn Sie Beiträge chronologisch analysieren oder organisieren möchten. In diesem Beitrag zeigen wir, wie Sie mit einer handlichen Funktion Beitragsnummern aufgrund des jeweiligen Veröffentlichungsdatums berechnen, in der Übersicht hinzufügen und die Backend-Spalte sortierbar machen.
/* 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
