Auch wenn Elegantthemes Divi 5 viele neue Funktionen spendiert hat, einen Blogfilter für das Blogmodul gibt es nach wie vor nicht. Allerdings gibt es mit der neuen Funktion „Interactions“ eine Fülle von neuen Möglichkeiten. In diesem Beitrag zeige ich dir einen Workaround, wie du mit Interaktionen auf deiner Blogübersichtsseite einen ganz einfachen Filter zur Blog-Navigation haben kannst.
Das Ziel dieses Tutorials: Eine Blogübersichtsseite, auf der das Blogmodul für alle Kategorien nach Aufruf der Seite ganz normal angezeigt wird. Alle anderen Kategorien sind über die Navigation wählbar. Sobald eine Kategorie ausgewählt wird, wird diese direkt unterhalb der Navigation angezeigt.
Wenn du noch mit Divi 4 unterwegs bist und eine Lösung dafür suchst, lies den Beitrag „Divi Filter für Blogkategorien (Divi 4)„.
Divi 5 Blogfilter als Videotutorial
Klicke auf Inhalt anzeigen, um das Video zu starten.
Du siehst gerade einen Platzhalterinhalt von Standard. Um auf den eigentlichen Inhalt zuzugreifen, klicke auf den Button unten. Bitte beachte, dass dabei Daten an Drittanbieter weitergegeben werden.
Weitere InformationenVorbereitungen
Wenn du schon eine Blogübersichtsseite hast, dann kannst das weiter verwenden. Falls nicht, erstelle mit dem Blogmodul deine Blogübersicht und gestalte sie nach deinen Wünschen, bis du mit dem Design zufrieden bist. Mit deinem ersten Blogmodul lässt du alle Kategorien anzeigen.
Achte darauf, dass du in der Sektion mit dem Blogmodul nur dieses eine Element hast. Außerdem ist es für unseren Zweck wichtig, dass du jeder Sektion einen Namen über das Admin-Label gibst. Am besten verwendest du den jeweiligen Kategorienamen. Das benötigen wir später für die richtige Zuordnung einer Interaktion.
Sobald dies erledigt ist, machst du von der kompletten Sektion eine Kopie. Passe das Blogmodul an: wähle diesmal eine Kategorie aus und vergiss nicht, das Admin-Label entsprechend umzubenennen. Wiederhole dies für alle Kategorien.
Die Blognavigation
Oberhalb deiner Blogübersicht kommt unsere Navigation hin. Da wir sie nicht automatisch generieren lassen können, müssen wir sie uns selbst bauen. Wichtig: Leider funktionieren Buttons für unseren Zweck nicht (Stand 08/2025), da es hier ein Problem mit den Interaktionen gibt. Wir verwenden stattdessen das Textmodul und fügen einen Hintergrund hinzu, so dass es wie ein Button aussieht. Die Schritte im Detail:
- Erstelle für die Blognavigation ebenfalls eine extra Sektion.
- Füge eine Zeile mit einer Spaltenanzahl ein, die der Anzahl deiner Kategorien entspricht.
- Füge in jede Spalte mit dem Textmodul den Namen einer Kategorie ein.
- Nun kommen wir zum Hintergrund. Ich habe dafür den Spaltenhintergrund genutzt und die Ecken etwas abgerundet.
Einstellungen für die Sektion mit der Navigation
- Gehe zum Reiter Advanced (oder Fortgeschritten). Ganz unten findest du die Einstellung für „Scroll-Effects“. Dort wählst du Sticky aus. Das sorgt dafür, dass die Navigation immer oben sichtbar bleibt.
- Gib der Sektion eine weiße Hintergrundfarbe. Ansonsten scheinen die Elemente zwischen den Buttons durch und das sieht nicht schön aus. So haben wir eine klare Abrenzung.
Jetzt richten wir die Interaktionen ein
Mit den Interaktionen steuern wir nun, wann welche Elemente angezeigt werden.
Textfelder Interaktion
Jedem Textfeld (also jedem Kategorienamen, die du angelegt hast) fügen wir nun 2 Interaktionen hinzu (außer Kategorie „alle“). Interaktionen können verschiedene Trigger haben, wir benötigen heute den „Click“ als Trigger.
- Wir beginnen mit dem Textmodul für alle Kategorien. Gehe in die Einstellungen und wechsle zum Reiter Advanced. Hier findest du Interactions. Klicke auf „add Interaction“.
- Vergib einen Namen für die Interaktion und wähle als Trigger-Event „click“.
- Bei Effect Action stellst du ein, was bei click passieren soll: in unserem Fall, soll zur entsprechenden Sektion gescrollt werden, also „scroll to element“.
- Als nächstes musst du ein Ziel (Target Module) auswählen – also zu welchem Element soll gescrollt werden. Wenn du darauf klickst, wirst du eine lange Liste sehen, wo alle deine Elemente der Seite angezeigt werden (section, rows, module). Wähle die Section mit deinem Namen – dafür haben wir das Admin-Label genutzt. Wenn die Liste sehr lang ist, gib den Suchbegriff oben im Suchfeld ein.
- Speichern.
- Die Schritte von oben wiederholst du nun für alle Sektionen mit einer eigenen Kategorie. Für alle anderen Kategorien benötigen wir noch eine 2. Interaktion:
- Klicke wieder auf add interaction oder kopiere dir die vorhandene Interaktion.
- Passe das Admin-Label.
- Effect Action ist nun „show element“. Alle anderen Einstellungen können so bleiben.
- Achte auf die Reihenfolge der Interaktion. Show Element muss an erster Stelle stehen – du kannst die Interaktionen ganz einfach mit der Maus verschieben.
Wir benötigen hier „show element“, weil wir alle Sektionen (bis auf alle Kategorien) zunächst ausblenden werden. Die Interaktion sorgt dafür, dass es wieder eingeblendet wird. Und im nächsten Schritt kann hingescrollt werden. Deshalb ist die Reihenfolge an dieser Stelle wichtig.
Sektionen bzw. Blogkategorien ausblenden
Was wir bis jetzt haben: Beim Aufrufen der Seite wird uns die Kategorie-Navigation und alle Sektionen mit den verschiedenen Kategorien angezeigt. Wir wollen, dass zu Beginn nur die Kategorie allgemein angezeigt wird und die Ansicht dann wechselt, wenn eine andere Kategorie gewählt wird.
Um nur die Sektion mit der Kategorie allgemein anzeigen zu lassen, müssen wir alle anderen ausblenden. Auch das geht mit einer Interaktion. Diesmal rufe bitte die Einstellungen der jeweiligen Sektio
- Gehe in die Einstellungen für die jeweilige Sektion.
- Wechsle wieder zum Reiter Advanced und füge eine Interaction hinzu.
- Vergib einen Namen.
- Als Trigger wählst du diesmal „Load“. Dieser Trigger wird immer aktiv, wenn die Seite neu geladen wird.
- Als Effect Action stellst du „Hide Element“ ein.
- und das Ziel ist wieder die jeweilige Section – also die, in der du dich gerade befindest. Fertig.
Sobald du gespeichert hast, wird die Sektion verschwinden. Deshalb haben wir dies im 2. Schritt erst gemacht. Keine Sorge, du kannst es auch in der Bearbeitung durch einen Klick auf unseren „Button“ wieder anzeigen lassen.
Test und Fehlerquellen
Nun ist es an der Zeit, unsere Navigation zu testen. Es sollte bei jedem Klick die passende Blogkategorie angezeigt werden. Probiere alle Links durch. Was ist, wenn etwas nicht wie erwartet funktioniert?
- Prüfe noch einmal, ob alle Interaktionen richtig hinterlegt sind und auch alle Target Module noch ausgewählt sind. Divi 5 ist noch in der Alpha-Phase und mir ist es bei den Interaktionen immer wieder passiert, dass die Einstellungen nicht mehr richtig waren.
- Wenn deine Blogkategorie erst mit dem 2. Klick oben angezeigt wird, dann stimmt die Reihenfolge der Interaktionen noch nicht – das Element muss erst sichtbar gemacht werden, bevor hingescrollt werden kann.
- Sind die Interaktionen an den richtigen Stellen?
Pro-Tipp 1 für unseren nachgebauten Button
Das Textfeld wird bei Klick so funktionieren wie geplant – es fehlt allerdings eine Cursor-Animation. Wir sind es gewohnt, dass die Maus sich verändert, wenn wir über ein klickbares Modul fahren. Um das zu erreichen, benötigst du einen minikleinen Code:
- Gehe dazu in die Einstellungen des jeweiligen Textfeldes.
- Wechsel zum Reiter „Advanced“ und dort zu „Custom CSS“.
- Dort wählst du den 2. Reiter „Module Elements“ und gibst folgendes ein:
cursor: pointer;
Das war es. Damit sieht es jetzt noch mehr nach Button aus!
Fazit:
Auch wenn das Blogmodul von Divi 5 noch immer keinen Kategoriefilter an Bord hat, so stehen uns mit den Interaktionen doch eine Menge Möglichkeiten offen. Ein bisschen kennengelernt hast du sie jetzt schon.
Hat die Einrichtung bei dir geklappt? Sind Fragen aufgetaucht? Ich freue mich auf deinen Kommentar!
Tipp – meine Erfahrungen mit Divi 5
In meinem Blogbeitrag „Divi 5 Alpha im produktiven Einsatz“ findest du eine Übersicht über neue Funktionen, aktuelle Bugs und meine Erfahrungen mit dem neuen Divi.
Oder schau dir meinen Rungang für Divi 5 auf Youtube an:
- Divi 5 Rundgang – das ist neu (30 Min.)
0 Comments