# Beállítás a blokkszerkesztőben

> Az Items Number Switcher blokk és a Listázórács blokk beállítása a WordPress blokkszerkesztőjében (Gutenberg).

A blokkszerkesztőben az elemszámot nem eszközökhöz, hanem **képernyőszélességekhez (töréspontokhoz)** rendeled. Ez a beállítás eltér az Elementorétól.

## Az Items Number Switcher blokk

1. Szerkeszd az oldalt a blokkszerkesztőben, és add hozzá az **Items Number Switcher** blokkot a Listázórács fölé.
2. A blokk beállításainál az **Általános** panelen ismétlődő elemekkel adhatod meg a töréspontokat. Minden elemhez két érték tartozik:
   - **Breakpoint**: a képernyő szélessége pixelben.
   - **Items Number**: az ekkor megjelenő elemek száma.
3. Az **This filter for** listából válaszd a **Listing Grid** értéket.
4. A **Query ID** mezőbe írd be a lekérdezés egyéni azonosítóját.
5. Ha több blokkot kell szűrni, kapcsold be az **Additional Providers Enabled** kapcsolót, és a megjelenő listában add meg az **Additional Provider** és **Additional Query ID** értékeket.

A blokk beállításainak feliratai a blokkszerkesztőben angolul jelennek meg.

Egy példa: 767 képernyőszélességhez 2 elem, 1024-hez 3 elem, 1920-hoz 6 elem.

| Breakpoint | Items Number |
| --- | --- |
| 767 | 2 |
| 1024 | 3 |
| 1920 | 6 |

### Melyik értéket használja a böngésző?

A böngésző az aktuális ablakszélességnél nem nagyobb töréspontok közül a legnagyobbat választja. Az ennél kisebb ablakoknál, amelyek a legkisebb töréspontot sem érik el, a legkisebb töréspont értéke érvényes.

A fenti példával:

- 1920 pixeles vagy szélesebb ablak: 6 elem.
- 1024 és 1919 pixel között: 3 elem.
- 767 és 1023 pixel között: 2 elem.
- 767 pixelnél keskenyebb ablak: 2 elem (a legkisebb töréspont értéke).

## A Listázórács blokk

1. Helyezd el a **Listing Grid** blokkot az Items Number Switcher blokk alatt.
2. A **Listing** mezőben válaszd ki a listázósablont.
3. Szükség szerint állítsd be az oszlopok számát: **Columns Number**, **Columns Number (Tablet)** és **Columns Number (Mobile)**.
4. Nyisd ki a **Custom Query** szakaszt, kapcsold be a **Use Custom Query** kapcsolót, és válaszd ki a lekérdezést a **Custom Query** listában.
5. A **Haladó** (Advanced) panelen a **CSS ID** mezőbe írd be a lekérdezés egyéni azonosítóját.

Mentsd az oldalt, és ellenőrizd a frontenden.