WP-szűrők: vízszintes szűrősáv és a szűrőterület-váltó gomb

A WP-szűrők widget szűrőelemei alapból egymás alatt, teljes szélességben jelennek meg. Két beállítással alakíthatod át az elrendezést: az Oszlopok kezelése szakasszal vízszintes sávot készíthetsz, a Szűrőterület-váltó gomb pedig egy gombbal összecsukja vagy kinyitja a szűrőket. Mindkettő különösen táblagépen és telefonon hasznos, ahol a szűrők elvennék a helyet a terméklista elől.

A widget a Pro változat része; kapcsold be a The Plus Addons → Widgets oldalon a WP-szűrők widgetet. A példák WooCommerce-termékekkel dolgoznak, ezért a WooCommerce legyen aktív, néhány közzétett termékkel, és legyen a szűrőterületen már legalább egy szűrőtétel.

Vízszintes szűrősáv oszlopokkal

A widgetnek nincs külön vízszintes/függőleges kapcsolója. Az egymás melletti elrendezést az Oszlopok kezelése szakasz adja: itt állítod be, hogy a szűrőelemek hány oszlopban foglaljanak helyet.

1. Jelöld ki a WP-szűrők widgetet az Elementor szerkesztőben.
2. Nyisd ki az Oszlopok kezelése szakaszt.
3. Az Asztali gép mezőben válaszd ki az oszlopszámot: 1. oszlop, Oszlop 2, Oszlop 3, 4 oszlop, 5 oszlop vagy 6 oszlop. A Tablet és a Mobil mező ugyanezt kínálja a kisebb képernyőkre.
4. Az Oszlopok közötti térköz / távolság és az Oszlopok margója mezővel a szűrőelemek közti helyet állíthatod.

https://minta-bolt.hu/wp-admin/post.php?post=309&action=elementor

A képen a három eszközmező mind 1. oszlop értéken áll, ez az alapérték: a szűrőelemek egymás alatt, teljes szélességben jelennek meg.

Ha több szűrőelem van, az Asztali gép értékét például Oszlop 3-ra állítva a szűrők egymás mellé kerülnek, a terméklista fölé, sávként.

https://minta-bolt.hu/tp-ks1-szurok-oszlop/

A képen a csillagos szűrő a sáv bal szélére került, mert a sávot három oszlopra osztottuk, és az elem az első oszlopot foglalja el.

Tipp: a mobil és a tablet érték külön állítható, így asztali gépen vízszintes, telefonon egymás alatti sávot kaphatsz.

Szűrőterület-váltó gomb

A gomb az egész szűrőterületet összecsukja, és csak kattintásra mutatja meg, hogy a kisebb képernyőn ne foglaljon helyet. Nem külön oldalról becsúszó panel: a szűrőterület a megszokott helyén jelenik meg, csak elrejtve vagy kinyitva.

1. Jelöld ki a WP-szűrők widgetet.
2. Nyisd ki az Egyéb opció szakaszt.
3. A Szűrőterület-váltó gomb sor szerkesztés ikonjára kattintva nyisd ki a beállításokat, és kapcsold be a kapcsolót.
4. Állítsd be a gomb szövegét és ikonját.

https://minta-bolt.hu/wp-admin/post.php?post=311&action=elementor

A képen a beállítások látszanak: az Alapértelmezett szűrők értéke 3, a Gomb stílusa Relatív, a Gomb ikonja Ikon, az Ikon pozíciója Előtte.

Beállítás	Mit csinál	Alapérték
Szűrőterület-váltó gomb	Bekapcsolva megjelenik a váltógomb.	Kikapcsolva
Alapértelmezett szűrők	Hány szűrő látszik alapból.	3
Gomb stílusa	Javítás (rögzített) vagy Relatív a gomb helyzete.	Relatív
Több megjelenítése	A gomb szövege összecsukott állapotban.	Több megjelenítése
Kevesebb megjelenítése	A gomb szövege kinyitott állapotban.	Kevesebb megjelenítése
Gomb ikonja	Nincs, Ikon vagy Kép.	Ikon
Gomb ikonjának kiválasztása	Az ikon (vagy az SVG feltöltése).
Ikon pozíciója	Az ikon a felirat Előtte vagy Utána áll.	Előtte

A gomb a szűrőelemek alatt jelenik meg, a terméklista fölött.

https://minta-bolt.hu/tp-ks1-szurok-gomb/

A képen a gomb a csillagszűrő alatt, a terméklista fölött áll.

Kattintás után a gomb felirata Kevesebb megjelenítése-re vált; újabb kattintásra visszaáll.

https://minta-bolt.hu/tp-ks1-szurok-gomb/

A képen a gomb felirata már Kevesebb megjelenítése.

Hibaelhárítás

Nem jelenik meg a váltógomb. Az Egyéb opció szakaszban a Szűrőterület-váltó gomb kapcsolója legyen bekapcsolva.

Az oszlopok nem kerülnek egymás mellé. Az Asztali gép, a Tablet és a Mobil értéke is 1. oszlop; állítsd az aktuális eszköznek megfelelő mezőt 2 vagy több oszlopra.

A váltógomb szövege angol. A gomb szövegét a Több megjelenítése és a Kevesebb megjelenítése mezőben írhatod át.