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.
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:
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.
