Hinweis: Dieses Tutorial ist für Divi 4

Für Divi 5 funktioniert es so nicht mehr. Wie du einen Blogfilter für Divi 5 erstellst, kannst du in meinem aktuellen Blogbeitrag Divi 5 Filter für Blogkategorien mit Interaktionen erstellen nachlesen.

Wie du ganz einfach für deine Blogübersichtsseite einen Kategorienfilter erstellst

 

Wenn du auf deiner Blogübersichtsseite keine Sidebar verwendest, hast du auch die Kategorieauswahl nicht zur Verfügung. Divi selbst bietet so einen Filter nicht an; ich zeige dir hier einen Workaround, wie du über dem Blogmodul eine Kategorieauswahl zur Verfügung stellst. Das ist zwar kein richtiger “Filter”, erfüllt den Zweck jedoch wunderbar. Der Vorteil ist zudem, dass keine neue Seite geladen werden muss. So machst du es deinen Websitebesuchern leicht, in deinem Blog zu schmökern. So wird es am Ende aussehen:

 

 

Videotutorial

 

Wenn du lieber schauen statt lesen möchtest:

 

https://youtu.be/WVILklH_jAI?si=Oq1NsoA33-r4KeR3

 

Folge einfach dieser Schritt für Schritt Anleitung

 

Plugin „Shortcode for Divi“

 

Gehe zu Plugins -> installieren und suche das Plugin “Shortcodes for Divi”. Nach der Installatione infach nur noch aktivieren. Hier sind keine weiteren Einstellungen vorzunehmen. Wir können direkt zum nächsten Schritt weitergehen.

 

 

Blogmodul einrichten und designen

 

Wenn du schon eine Blogübersichtsseite hast, dann kannst du das vorhandene Modul nutzen. Wichtig ist, dass deine Blogübersicht so gestaltet ist, wie du sie gerne haben möchtest, weil wir dieses Modul als Grundlage verwenden und mehrfach kopieren werden.

 

Speichere die Blogkategorien in die Divi Bibliothek

 

Sobald du das Design hast, speicherst du einmal dieses Blogmodul so wie es ist in die Divi Bibliothek und vergibst einen Namen, wie z.B. “Blogkategorie alle”. Danach rufst du wieder die Einstellungen des Blogmoduls auf, wählst die nächste Kategorie aus und speicherst diese ebenfalls in der Divi Bibliothek. Als Namen vergibst du nun “Blogkategorie xy”. So machst du das für alle Kategorien bzw. für alle Kategorien, die du über den Filter zur Verfügung stellen möchtest.

 

Modul speichern anklicken:

 

 

 

Namen vergeben und „in Bibliothek speichern“, anschließend wieder in die Einstellungen und nächste Kategorie auswählen und die Schritte für alle Kategorien wiederholen.

 

 

In der Divi Bibliothek den Shortcode kopieren

 

Lass die Blogübersichtsseite geöffnet und wechsel in das Dashbord und gehe zu Divi -> Divi Bibliothek. Dort findest du nun die eben gespeicherten Blogkategorien und ganz rechts einen Shortcode – den hat uns das Plugin “Shortcodes for Divi” automatisch generiert. Kopiere den ersten Shortcode und wechsel wieder zurück zur Blogübersichtsseite. Die Divi Bibliothek lässt du geöffnet.

 

 

Modul Registerkarte einfügen

 

Das auf der Blogübersichtsseite vorhandene Blogmodul kannst du nun löschen. Füge stattdessen das Modul “Registerkarte” ein. Als Titel für die Tabs vergibst du jeweils den Kategorienamen, diesen sehen wir später in der Auswahl der Leiste. Der erste Tab könnte z.B. “alle” heißen. In den Textbereich dieses Moduls fügst du den Shortcode ein. Du wirst wahrscheinlich an dieser Stelle die Inhalte noch nicht sehen. Sobald du den Divi Builder beendest, wird alles da sein.

 

Nun gehst du wieder zurück in die Divi Bibliothek, um den nächsten Shortcode zu kopieren. Dann vergibst du dem 2. Register wieder den Kategorienamen und fügst im Textfeld den Shortcode hinzu. Diese Schritte wiederholst du, bis alle Kategorien erfasst sind.

 

 

Design des Registermoduls anpassen

 

Passe nun das Design des Registermoduls nach deinen Wünschen an. Ich empfehle den aktiven Tab bzw. die aktuelle Kategorie farblich hervorzuheben und die kleine Linie zu entfernen, die das Modul um die Tabinhalte macht. So sieht es etwas mehr nach einem Menü aus.

 

 

Hintergrund entfernen für „leere“ Tabs

 

Wenn deine Kategorien die Seite nicht komplett ausfüllen, hast du einen solchen grauen Hintergrund.

 

 

Dieser lässt sich ganz einfach mit einem Code entfernen. Gehe dazu in den Theme Customizer -> Zusätzliches CSS und füge diesen Code ein:

 

ul.et_pb_tabs_controls.clearfix {
background: transparent;
border: none;
}
ul.et_pb_tabs_controls:after {
border-color: transparent;
}

 

Glückwunsch, du hast jetzt einen Filter für deine Blogbeiträge!