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:
Höhe von Testimonial-Modulen im Divi-Theme angleichen
Beim Designen mit dem Divi-Theme bedeutet ein einheitliches und ansprechendes Erscheinungsbild oft, dass man sich mit unterschiedlichen Höhen von Inhalten in Modulen wie dem Testimonial-Modul auseinandersetzen muss. Ungleichmässige Höhen können den visuellen Fluss Ihrer Website stören. Hier erfahren Sie, wie Sie die Höhen Ihrer Testimonial-Module angleichen können.
/* 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
