Lesefortschritt:

Blog-Modul-Special #7: Beiträge im Blog-Modul nach Kategorien einfärben

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

Dieser Beitrag beinhaltet 631 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.

Dieses Sujet ist für mich ein Highlight. Und ums highlighten geht es auch gleich in diesem Hack: Die Beiträge, welche im Blog-Modul des Divi-Themes gelistet werden, können nämlich farblich unterschiedlich hinterlegt werden. So finden sich User noch besser zurecht und finden Inhalte zu Themen, die sie interessieren, besonders schnell. Das aufzusetzen, ist wirklich unglaublich einfach. Auch darum: Ein Highlight.

Konkret: Das Divi-Theme kann von Haus aus nicht unterscheiden, welcher Art die Artikel sind, welche in einem Blog-Modul angezeigt werden. Sie hingegen können das und vergeben vermutlich verschiedene Kategorien.

Das machen auch wir in der Praxis von Dr. Code nicht anders. Wobei WordPress jeder Kategorie einen Slug vergibt. Diese Slugs werden für diesen Tipp benötigt – Sie finden diese im WordPress-Backend unter Beiträge/Kategorien.

Wir verwenden etwa die Kategorien

  • Divi-Theme – Slug: divi-theme
  • WordPress – Slug: wordpress
  • PlugIns – Slug: plugins
  • Scripts – Slug: scripts

Nun benötigen Sie noch den CSS-Code, der die Farbe eingiesst. Der steht unten und gehört in das CSS-Stylesheet Ihrer Divi-Website – unter Design/Customizer/Zusätzliches CSS:

.et_pb_blog_grid .category-divi-theme.et_pb_post {
	background-color: lightgreen;
}
.et_pb_blog_grid .category-wordpress.et_pb_post {
	background-color: lightblue;
}
.et_pb_blog_grid .category-scripts.et_pb_post {
	background-color: lightgrey;
}
.et_pb_blog_grid .category-plugins.et_pb_post {
	background-color: pink;
}

Betrachten Sie z.B. Zeile 4. Da steht .et_pb_blog_grid .category-wordpress.et_pb_post {

Der Begriff wordpress ist der Slug unserer WordPress-Kategorie und spricht also diese Beiträge an. Sie ersetzen diese Namen also mit einem Ihrer existierenden Slugs und schon funktionierts. Wichtig ist bloss, dass Sie dem Slug noch ein category- voranstellen. Anpassen möchten Sie vielleicht überdies auch die Hintergrundfarben.

Tatsächlich ein Highlight.

Unser Code ergibt übrigens folgende Blog-Darstellung:

So schliessen Sie das Divi-Mobile-Menü – mit einem simplen Klick ausserhalb des Dropdowns

Wenn Sie eine Divi-Website auf dem Handy betrachten und das Menü öffnen, es dann aber schliessen möchten, neigen Sie vielleicht dazu, auf den Bereich ausserhalb des Dropdowns zu klicken (oder ihn zu berühren) – in der Annahme, dass dies wie bei anderen Apps funktioniert. Aber nein, im Divi-Theme ist das von Haus aus nicht der Fall. Dafür benötigen Sie ein jQuery-Snippet, das genau das tut.

mehr lesen

App-Farbe für den Mobilbrowser festlegen

Den Mobilversionen der Browser lässt sich – vornehmlich unter Android – Farbe geben. Statt in eintönigem Hellgrau erscheint der Mobilbrowser beim Seitenaufruf in Farbe. Ist ganz einfach zu machen und wir zeigen Ihnen wie.

mehr lesen

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