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

> A szűrőelemek egymás mellé rendezése oszlopokkal, és a szűrőterületet megjelenítő vagy elrejtő váltógomb beállítása.

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.

![Az Oszlopok kezelése szakasz: Asztali gép, Tablet, Mobil és a térközök](./kepek/kereses-szurok-1-szuro-oszlopok.webp)

*Az Oszlopok kezelése szakasz: Asztali gép, Tablet, Mobil és a térközök* (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.

![Három oszlopra állított szűrőterület: a szűrőelem a sáv egy részében áll](./kepek/kereses-szurok-1-szurok-oszlop.webp)

*Három oszlopra állított szűrőterület: a szűrőelem a sáv egy részében áll* (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.

![A Szűrőterület-váltó gomb beállításai: alapértelmezett szűrők, gomb stílusa, szövegek, ikon és ikon pozíciója](./kepek/kereses-szurok-1-szuro-valto-gomb.webp)

*A Szűrőterület-váltó gomb beállításai: alapértelmezett szűrők, gomb stílusa, szövegek, ikon és ikon pozíciója* (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.

![A váltógomb a terméklista fölött: a felirata Több megjelenítése](./kepek/kereses-szurok-1-szurok-gomb.webp)

*A váltógomb a terméklista fölött: a felirata Több megjelenítése* (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.

![A gomb kinyitva: a felirat Kevesebb megjelenítése](./kepek/kereses-szurok-1-szurok-gomb-kinyitva.webp)

*A gomb kinyitva: a felirat Kevesebb megjelenítése* (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.