JetSmartFilters – Filter responsive darstellen (Workaround)

JetSmartFilters - Responsive

JetSmartFilters - von Hause aus nicht responsive

Das Programm JetSmartFilters* vom Hersteller Crocoblock ist schon nicht schlecht. Eine Einstellung, die dem Plugin aber noch nicht mitgegeben wurde, ist die automatische Anpassung ans Endgerät. Hat man lange Filterlisten eingestellt, so werden diese auch auf dem Handy so angezeigt, obwohl es an dieser Stelle nicht so viel Sinn macht und man eher auf eine etwas übersichtlichere Darstellung setzen würde.

Dieser kleine Workaround soll dir zeigen, wie du mithilfe des Pagebuilders Elementor aber trotzdem zu einer übersichtlichen Darstellung für Handys und Tablet kommst.

YouTube

Mit dem Laden des Videos akzeptierst du die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Workaround

Filter anlegen

Der erste Schritt ist natürlich, die Filter im WordPress-Backend ganz normal anzulegen, bspw. nach Kategorie, Stichwort oder nach in JetEngine* angelegten Meta Fields.

Filter für Desktop-Variante einfügen

Füge dann in Elementor den Filter mittels des Checkbox-Filter-Elements ein, das Ergebnis sieht in etwa so aus:

JetSmartFilters - Checkbox-Filter

Jetzt ist es wichtig, in den Einstellungen unter „Erweitert“ -> „Responsive“ die Sichtbarkeit für Tablet und Handy zu deaktivieren:

Filter für Tablet- und Handy-Variante einfügen

Als nächstes kopiere in Elementor das eingefügte Element direkt darunter und aktiviere im Reiter „Inhalt“ unter „Additional Settings“ den Punkt „Dropdown Enabled“:

Anschließend sollte der Filter wie folgt dargestellt werden:

Anschließend muss im Reiter „Erweitert“ und „Responsive“ die Sichtbarkeit für Desktop deaktiviert werden:

Fertig 😉

Damit hast du jetzt eine separate Darstellung für die kleineren Displays von Handy und Tablet.

Solltest du mehrere Filter eingebaut haben, musst du die Schritte für jeden Filter durchführen, so dass du letztendlich immer zwei Elemente pro Filter hast.

Abonnieren
Benachrichtige mich bei
0 Kommentare
Inline Feedbacks
View all comments

Die mit Sternchen (*) gekennzeichneten Verweise sind sogenannte Provision-Links. Wenn du auf so einen Verweislink klickst und über diesen Link einkaufst, bekomme ich von deinem Einkauf eine Provision. Für dich verändert sich der Preis nicht. 

0
Hast du Fragen? Dann schreibe einen Kommentar ;-)x
Newsletter abonnieren

Erhalte regelmäßig Informationen zu neuen Tipps und Tutorials.