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:

Animation im Filter-Portfolio-Modul anpassen

Im Divi-Theme ist ein Portfolio-Modul enthalten, welches mit Filtern dargestellt wird. Wechselt man den Filter werden die anzuzeigenden Beiträge elegant von links nach rechts ins Bild geschoben. Dieser Effekt lässt sich aber verändern: Beiträge können von rechts oder auch von oben – bzw. unten – einfliegen. Eine Petitesse vielleicht; aber ab und an mag das besser passen. Der Hack ist simpel – wir stellen Ihnen den Trick vor.

mehr lesen

Filterbuttons im Divi-Portfolio-Modul stylen

Das Divi-Theme enthält ein Portfoliomodul mit Filtern, mit dem Sie Ihre Projekte zusammen mit Registerkarten-Schaltflächen anzeigen können. So können Ihre User bestimmte Projektkategorien zur Ansicht auswählen. Die Filter kommen aber etwas öde daher. Hier finden Sie Tipps für die Gestaltung der Filterbuttons des Portfoliomoduls.

mehr lesen

Mobilmenü des Divi-Themes am Seitenkopf fixieren

Während das Divi-Theme das Headermenu standardmässig am Seitenkopf fixiert, lässt Divi das Menu in der Mobilansicht verschwinden. Die Überlegung dahinter gründet im Platzbedarf: Auf den kleinen Anzeigen der Mobiltelefone und Tablets kann das Menü zuviel Platz beanspruchen. In besonderen Situationen möchte man aber das Menü immer sichtbar anzeigen. Freilich lässt sich auch dies ganz einfach bewerkstelligen.

mehr lesen

Divi-Theme-Builder: Kopfzeile mit Telefon und E-Mail in einem Modul erstellen

Die Divi-Standardkopfzeile kann mit einer sekundären Kopfzeile konfiguriert werden, die unter anderem eine Telefonnummer und eine E-Mail-Adresse anzeigt. Wenn Sie jedoch eine mit dem Divi-Builder eine benutzerdefinierte Kopfzeile verwenden, können Sie diese sekundäre Kopfzeile nicht nutzen. Hier erfahren Sie, wie Sie den Telefon-/E-Mail-Teil in einem Modul nachbilden können.

mehr lesen

Automatisch aktualisierte Jahreszahl berechnen und anzeigen lassen

Es ist üblich, die Anzahl der Jahre, die ein Unternehmen bereits im Geschäft ist, auf seiner Website anzugeben, vor allem auf der Info-Seite. Bloss veralten diese Angaben jährlich – und Updates gehen bei sowas sehr gerne vergessen. Hier zeigen wir Ihnen also, wie Sie einen Zahlenwert in Divi mithilfe eines Shortcodes und eines Snippets automatisch jedes Jahr aktualisieren können.

mehr lesen

Ändern der Reihenfolge von Projekten im Divi-Portfolio-Modul

Standardmässig zeigt das Divi-Portfoliomodul Projekte in chronologischer Reihenfolge an, basierend auf dem Datum, an dem das Projekt veröffentlicht wurde, wobei das neueste Projekt an erster Stelle steht. Dies ist jedoch in vielen Fällen nicht sinnvoll, und es wäre besser, andere Sortieroptionen zu haben. Mit dieser Anleitung werden Sie in der Lage sein, die Elemente in alphabetischer Reihenfolge, in umgekehrt-alphabetischer Reihenfolge und in zufälliger Reihenfolge zu sortieren.

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