Trick # 194 | Dieser Beitrag beinhaltet 1135 Wörter. – Geschätzte Lesezeit: ca. 6 Minuten.
Die Metatexte (Datum, Kategorie, AutorIn) erscheinen im Divi-Blog-Modul standardmässig unter dem Titel als Links. Es gibt aber die Möglichkeit, daraus Schaltflächen zu bauen und diese über das Bild zu legen. Hier zeigen wir Ihnen, wie Sie dies hinkriegen.
Wir beginnen mit dem Hinzufügen einer benutzerdefinierten CSS-Klasse zum Divi Blog-Modul. Die Verwendung einer benutzerdefinierten Klasse stellt sicher, dass unser Code nur das Modul mit dieser Klasse beeinflusst und nicht andere Blog-Module auf Ihrer Website.
Öffnen Sie dazu die Einstellungen des Divi-Blog-Moduls, gehen Sie auf die Registerkarte «Erweitert» und öffnen Sie den Schalter «CSS ID & Klassen». Im Feld «CSS-Klasse» geben Sie «blog-separators» ein.
Nun folgen CSS-Blöcke für verschiedene Anwendungen. Selbstvertändlich können Sie die einzelnen Werte und Farben passend zu Ihrem Webdesign anpassen.
Publikationsdatum auf dem Beitragsbild anzeigen
Um das Datum aus der Metazeile aufs Beitragsbild zu verlegen kopieren Sie den folgenden Block und fügen Sie ihn in das CSS-Stylesheet Ihrer Website (unter Design/Customizer/Zusätzliches CSS) ein:
.blog-separators article {
position: relative;
}
.blog-separators .et_pb_blog_grid .et_pb_post .post-meta span.published {
position: absolute;
top: 0;
left: 0;
margin-bottom: 0;
color: #ffffff!important;
background: #293280 !important;
padding: 6px 12px;
margin: 15px;
border-radius: 50px;
}Das sieht dann so aus wie nebenan:
Es geht aber noch mehr.
Kategorie auf dem Bild anzeigen
Erneut ein CSS-Code, den Sie (unter Design/Customizer/Zusätzliches CSS) in das Stylesheet Ihrer Website ablegen können:
.blog-separators article {
position: relative;
}
.blog-separators .et_pb_blog_grid .et_pb_post .post-meta a:nth-child(3) {
position: absolute;
top: 0;
left: 0;
margin-bottom: 0;
color: #ffffff!important;
background: #293280!important;
padding: 6px 12px;
margin: 15px;
border-radius: 50px;
}Den Effekt sehen Sie hier:
Und weiter gehts.
Datum UND Kategorie auf dem Bild anzeigen
Wiederum ein CSS-Code, den Sie (unter Design/Customizer/Zusätzliches CSS) in das Stylesheet Ihrer Website ablegen können:
.blog-separators article {
position: relative;
}
.blog-separators .et_pb_blog_grid .et_pb_post .post-meta span.published {
position: absolute;
top: 0;
left: 0;
margin-bottom: 0;
color: #ffffff!important;
background: #293280 !important;
padding: 6px 12px;
margin: 15px;
border-radius: 50px;
}
.blog-separators .et_pb_blog_grid .et_pb_post .post-meta a {
position: absolute;
top: 0;
right: 0;
margin-bottom: 0;
color: #ffffff!important;
background: #293280 !important;
padding: 6px 12px;
margin: 15px;
border-radius: 50px;
}Das ergibt diese Ansicht:
Und noch das letzte Snippet:
AutorIn auf dem Beitragsbild anzeigen
OK – Sie wissen Bescheid: CSS-Code unter Design/Customizer/Zusätzliches CSS:
.blog-separators article {
position: relative;
}
.blog-separators .et_pb_blog_grid .et_pb_post .post-meta span.author.vcard a {
position: absolute;
top: 0;
left: 0;
margin-bottom: 0;
color: #ffffff!important;
background: #293280 !important;
padding: 6px 12px;
margin: 15px;
border-radius: 50px;
}… was dann dieses Bild erzeugt.
Viel Spass beim Pröbeln!
Werbung
Werbung
