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

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

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

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This