Lesefortschritt:

Blog-Modul-Special #1: Divi-Blog-Datum, den Autor oder die Kategorie auf dem Beitragsbild anzeigen

25. Dezember 2022 | CSS-Stylesheet, Divi-Theme

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

Die Krux mit den verunstalteten Telefon-Links

Kennen Sie das? Da nennen Sie auf Ihrer Website eine harmlose Telefonnummer - und schwups, wird diese in zahlreichen Browsern übel verunstaltet. Einige Browser - ganz besonders solche von Mobilgeräten - erkennen nämlich Telefonnummern auf ...

Werbung

 

Pin It on Pinterest

Share This