MagyarmagyarMobilbarát szűrők: a szűrők elrejtése gombbal
A szűrőket tartalmazó oszlop vagy konténer elrejtése mobilon a Jet Offcanvas Column kiegészítővel, kinyitó és bezáró gombbal.
A Jet Offcanvas Column kiegészítővel a szűrők (vagy bármilyen más, oszlopban vagy konténerben lévő tartalom) mobilon elrejthetők, és egy gombra kattintva nyílnak ki. Követelmények: Elementor, JetSmartFilters a megjelenítendő tartalmat tartalmazó oszloppal, a kiegészítő telepítve és aktiválva.
Az oszlop beállítása
Szekció neve “Az oszlop beállítása”- Nyisd meg azt az oldalt vagy sablont, amelyen a szűrők mobilon rejtve legyenek, és kattints az oszlop vagy konténer ikonjára.
- A Advanced fülön nyisd ki az Offcanvas Settings részt, és kapcsold be az Enable kapcsolót.
- A Expand Label és a Collapse Label mezőben add meg a gombok szövegét.
- Az Expand Background Color és az Expand Text Color mezővel állítsd a színeket, a Typography beállítás a betűtípust adja.
- Az Expand Padding, Expand Margin, Border Type és Expand Border Radius mezőkkel a gomb helyét és kerete szabható. Az Expand Button Icon a gomb ikonja (a példában a „filter” ikon), az Icon Size az ikon mérete.
- A „Collapse” gombhoz ugyanezek a beállítások tartoznak: Collapse Background Color, Collapse Text Color, Typography, Collapse Padding, Collapse Margin, Border Type, Collapse Border Radius és Collapse Button Icon (például nyíl ikon).
- Kattints a Publish/Update gombra.
Az eredmény
Szekció neve “Az eredmény”Asztali nézetben a szűrők a megszokott módon jelennek meg. Telefonon vagy a böngésző fejlesztői eszközeinek reszponzív módjában a szűrők helyett a kinyitó gomb látszik (a példában „Filters”). Rákattintva kinyílik a konténer, és a bezáró gombbal (a példában „Back”) visszazárható.
Bármely elem bezáró gombbá tehető
Szekció neve “Bármely elem bezáró gombbá tehető”Bármelyik elem bezárhatja a kinyílt konténert. Például az Apply gomb is:
- Keresd meg vagy vedd fel az elrejtendő oszlopban az elemet.
- A Advanced fülön a CSS Classes mezőbe írd:
offcanvas-collapse. - Kattints a Publish/Update gombra.
Az osztály akkor működik, ha a látogató közvetlenül az osztállyal ellátott elemre, vagy az abban lévő gombra kattint. A látogató így a szűrők kiválasztása után az Apply gombbal egyszerre alkalmazza a szűrőt és bezárja az ablakot.
Készült: