# Eltérő elemszám minden töréspontnál

> Hogyan jelenít meg a Listing Grid más számú elemet asztali, tablet és mobil nézetben az Items Number Switcher szűrővel, Elementorban, blokkszerkesztőben és Bricksben.

A **Listing Grid** képernyőmérettől függően más számú elemet (bejegyzést, kifejezést, felhasználót stb.) mutathat. Az **Items Number Switcher** szűrőt a JetSmartFilters adja, a Lekérdezéskészítő egyéni lekérdezésével együtt működik, és Elementorban, a blokkszerkesztőben és Bricksben is használható.

Előfeltételek: Elementor (az ingyenes változat elég), blokkszerkesztő vagy Bricks; aktív JetEngine és aktív JetSmartFilters.

## 1. Az Items Number Filter külső modul bekapcsolása

A **JetEngine → JetEngine → Modulok → Külső modulok** fülön kapcsold be az **Items Number Filter** kapcsolót. A modul külön bővítményként települ és kapcsol be.

![A külső modulok listája](./kepek/listazas-6-kulso-modulok.webp)

*A külső modulok listája* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine)

A képen az **Items Number Filter** kapcsolója a külső modulok utolsó sorában látszik.

## 2. Lekérdezés létrehozása

1. Nyisd meg a **JetEngine → Lekérdezéskészítő** oldalt, és kattints az **Új hozzáadása** gombra.
2. Add meg a lekérdezés **Név** mezőjét, és válaszd ki a **Lekérdezés típusa** listából a típust. Ha egyéni bejegyzéstípus elemeit jelenítenéd meg, a **Bejegyzések lekérdezése** típus a jó.
3. Írd be az **Egyéni lekérdezés-ID** mezőbe az azonosítót. Ezt később a szűrő és a **Listing Grid** beállításainál is használni fogod. Egyedinek kell lennie, és csak kisbetűt, számot, kötőjelet vagy aláhúzást tartalmazhat.
4. Állítsd be a lekérdezés többi részét: például a **Bejegyzések lekérdezése** szakasz **Általános** fülén a bejegyzéstípust („Állások”).

## 3. Listázási sablon

Készíts listázási sablont a megjelenítendő elemekhez (a bejegyzéstípusok sablonjának lépéseit lásd: [Listázási sablon bejegyzéstípushoz Elementorban](https://hub.hellowp.io/hu/plugins/jet-engine/listazas-sablon-bejegyzestipushoz/)).

## 4. Items Number Switcher és Listing Grid beállítása

### Elementorban

1. Nyisd meg az oldalt vagy sablont, és húzd be az **Items Number Switcher** widgetet.
2. A **Posts number** mezőben eszközönként adhatod meg az elemek számát. Az eszközikonok között váltva állítsd be mindegyiket, például asztali nézetben 6-ot, mobilon 2-t.
3. A **This filter for** értéke legyen **JetEngine**.
4. A **Query ID** mezőbe írd az egyéni lekérdezés azonosítóját.
5. Az **Additional Providers Enabled** kapcsolót akkor kapcsold be, ha több widgetet is szűrnöd kell.
6. Húzd be a **Listing Grid** widgetet, és válaszd ki a **Listing** sablont. Az oszlopok számát is eszközönként állíthatod (például 3 asztali és 1 mobil nézetben).
7. A **Custom Query** szakaszban kapcsold be a **Use Custom Query** kapcsolót, és válaszd ki a létrehozott lekérdezést.
8. A **Haladó** fülön a **CSS ID** mezőbe írd az egyéni lekérdezés azonosítóját.

### A blokkszerkesztőben

1. Add hozzá az **Items Number Switcher** blokkot. Az ismétlő tételekkel képernyőszélességenként (töréspontonként) adhatod meg az elemek számát: a példában 2 elem a 767 (mobil), 3 a 1024 (tablet), 6 az 1920 (asztali) töréspontnál. A **ITEMS NUMBER** az elemek száma, a **BREAKPOINT** a képernyő szélessége.
2. A **THIS FILTER FOR** listában válaszd a **Listing Grid** lehetőséget.
3. A **QUERY ID** mezőbe írd az egyéni lekérdezés azonosítóját.
4. Add hozzá a **Listing Grid** blokkot, és válaszd ki a **LISTING** sablont. Szükség szerint állítsd be a **COLUMNS NUMBER**, **COLUMNS NUMBER(TABLET)** és **COLUMNS NUMBER(MOBILE)** értékét.
5. A **Custom Query** szakaszban kapcsold be a **Use Custom Query** kapcsolót, és válaszd ki a lekérdezést.
6. A **Haladó** fülön a **CSS ID** mezőbe írd az egyéni lekérdezés azonosítóját.

### Bricksben

1. Add hozzá az **Items Number Switcher** elemet, és a **Posts number** mezőben eszközönként állítsd be az elemek számát.
2. A **This filter for** értéke legyen **JetEngine**, a **Query ID** az egyéni lekérdezés azonosítója. Több elem szűréséhez kapcsold be az **Additional Providers Enabled** kapcsolót.
3. Add hozzá a **Listing Grid** elemet, válaszd ki a **Listing** sablont, és állítsd be az oszlopok számát eszközönként.
4. A **CUSTOM QUERY** szakaszban kapcsold be a **Use Custom Query** kapcsolót, és válaszd ki a lekérdezést.
5. A **STYLE** szakasz **CSS** részén a **CSS ID** mezőbe írd az egyéni lekérdezés azonosítóját.

## Az eredmény ellenőrzése

Nyisd meg az oldalt a frontenden. Asztali nézetben a rács a beállított számú elemet mutatja (a példában hatot). A tablet és a mobil nézetet a böngésző fejlesztői eszközeivel nézheted meg (Chrome-ban **Ctrl+Shift+I**, Mac-en **Cmd+Opt+I**): válaszd ki az eszközt a méretek listájában, vagy állítsd a szélességet. Mobilnézetben a példában két elem látszik, és az oszlopok száma is megváltozik.