JetSmartFilters - Responsive

JetSmartFilters – Filter responsive darstellen (Workaround)

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:

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.

Kommentar schreiben

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Weitere Artikel

Plugin installieren Die Installation von Learnpress kannst du direkt Ă¼ber die in WordPress integrierte Plugin-Datenbank vornehmen. Suche dafĂ¼r nach „Learnpress“...
Nachdem wir im März bereits eine Schulung zu den Basis-Funktionen (Lite-Version) des Modern Events Calendars veröffentlicht haben, folgt nun der...
Learnpress selbst bietet aktuell keine Möglichkeit, um automatisch (in Deutschland rechtlich zulässige) Rechnungen zu verschicken. Aus diesem Grund empfehle ich...

Weitere Tutorials

Eine häufige Frage ist, wie Learnpress-Kurse individuell sortiert werden können. Von Hause aus bietet Learnpress nur die Möglichkeit, Kurse nach...
Learnpress und Masterstudy zählen zu den beliebtesten WordPress-Plugins fĂ¼r Onlineschulungssysteme. Es wird also Zeit, einmal zu schauen, wie sich die...
Neben der von Learnpress automatisch abgelegten KursĂ¼bersicht, kannst du bspw. in Elementor auch an jeder beliebigen Stelle auf deiner Website...
Newsletter abonnieren

Erhalte regelmĂ¤ĂŸig Informationen zu neuen Tipps und Tutorials.