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:

Mehrere Divi-Module mit dynamischen Inhalten auf einer Zeile darstellen

Beim Erstellen Ihrer Divi-Theme-Builder-Vorlagen oder von Layouts mit benutzerdefinierten Feldern müssen Sie häufig zwei oder mehr Module mit dynamischen Inhalten nebeneinander einfügen. Etwa um das Datum, die Kategorie und den Autor in Blogbeiträgen nebeneinander einzufügen. Das Problem ist, dass die Module vertikal gestapelt sind, und der Versuch, sie in Zeilenspalten unterzubringen nicht besonders gut funktioniert. Doch gibt es eine wirklich einfache Lösung, die wir Ihnen gerne zeigen.

mehr lesen

Divi-Informationstext-Modul (Blurb-Modul) mit einem Button versehen

Es gibt gute Gründe, das Informationstext-Modul (Blurb-Modul) mit einem Button zu ergänzen. Insbesondere in Situationen, in denen das Hinzufügen eines separaten Button-Moduls aufgrund der Gestaltung des Blurbs nicht sinnvoll wäre. Da Sie aber kein Modul innerhalb eines Moduls platzieren können, arbeiten Sie ersatzweise mit einem einfachen HTML-Link und etwas CSS direkt im Textbereich des Informationstext-Moduls.

mehr lesen

Ade Bullet-Points im Footer: Aufzählungspunkte aus der Fusszeile des Divi-Themes entfernen

Standardmässig fügt das Divi-Theme zu jedem Ihrer Widget-Listenelemente in Ihrem Footer-Bereich Aufzählungspunkte (Bullet-Points) hinzu. Einige Divi-Fusszeilendesigns können mit diesen Aufzählungspunkten arbeiten, aber viele Webdesigner ziehen es vor, alle Aufzählungspunkte aus der Fusszeile zu entfernen, da sie häufig unnötig sind. Durch Hinzufügen einiger Zeilen CSS-Codes können Sie alle Aufzählungspunkte von Listenelementen aus Ihrer Fusszeile entfernen.

mehr lesen

WordPress-User ohne Mailadresse einrichten

Ein neuer Wordpress-User kann nur eingerichtet werden, wenn auch eine Mailadresse existiert. Das ist meist sinnvoll – aber nicht immer. Benötigt man etwa für Beiträge die Namen von AutorInnen, die aber keinen Zugang zum Backend benötigen, so sollte die Mailadresse nicht zwingend sein. Die Pflichtangabe lässt sich denn auch leicht abschalten.

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