# Lapozás és Load More gomb a Listing Gridhez

> A Pagination blokk a Listing Grid mellé, és a Load More gomb beállítása Elementorban és a blokkszerkesztőben.

Ha a **Listing Grid** sok elemet tartalmaz, két módon oszthatod részekre: lapozóval (**Pagination**) vagy „Load More” gombbal. A lapozó oldalszámokat mutat, a gomb a következő elemeket tölti be a rácsba. Mindkettő lerövidíti az oldalt, és gyorsítja a betöltést.

## Lapozó a Listing Grid alatt (blokkszerkesztő)

A **Pagination** blokk a JetEngine **Listing Grid** blokkjával együtt működik.

1. Nyisd meg az oldalt, amelyen a **Listing Grid** blokk van, és kattints a blokkhozzáadó gombra.
2. Keresd meg a **Pagination** blokkot, és add hozzá a **Listing Grid** alá.
3. A jobb oldali beállításokban a **This filter for** listában válaszd a **Listing Grid** értéket. Ügyelj rá, hogy az oldalon ne legyen másik Listing Grid. WooCommerce-termékekhez is hozzáadható lapozó.
4. Az **Apply type** adja meg, hogyan jelenik meg a következő rész:
   - **AJAX**: az új rész az oldal újratöltése nélkül töltődik be;
   - **Page reload**: az oldal újratöltődik;
   - **Mixed**: az oldal nem töltődik újra, de a webcím megváltozik, így az adott lapozóoldal címe másolható.

### A vezérlők beállításai

| Beállítás | Mit csinál |
|---|---|
| **Prev/Next Text** | A „Prev Page” és „Next Page” gombok felirata. |
| **Items center offset** | Ha tíznél több oldal van, ennyi oldalszám látszik az aktuális oldal két oldalán, a többi rejtve marad. |
| **Items edge offset** | A tartomány két szélén látható oldalszámok száma; az **Items center offset** értékével együtt működik. |
| **Provider top offset** | A lapozás után ennyi képpontnyi felső eltolás lesz az oldalon. |

A stílusbeállítások a JetStyleManager bővítménnyel (ingyenes) érhetők el: a felső eszköztáron megjelenik a **Block Style** gomb. A mentés után a lapozás a frontenden próbálható ki.

## Load More gomb a Listing Gridben

A **Load More** funkcióval a rács csak az első részt mutatja, a többit a látogató kérésére tölti be. Bármilyen elem lehet „Load More” gomb: gomb, kép, szöveg, animáció. Az elem a **Listing Grid** alá kerül.

### Elementor

1. Nyisd meg az oldalt Elementorban, és kattints a **Listing Grid** widgetre.
2. A **Content → General** szakasz alján kapcsold be a **Load More** kapcsolót. Megjelenik a **Load more type** (kattintásra vagy görgetésre töltődik be a következő rész) és a **Load more element ID**.
3. Húzz be egy **Button** widgetet a rács alá. Állítsd be a feliratot, ikont és igazítást, a **Button ID** mezőbe pedig írj be egy azonosítót.
4. Ha nem gombot használsz (például **Image** widgetet), húzd a rács alá, és a **Advanced → Advanced** szakaszban a **CSS ID** mezőt töltsd ki.
5. Másold ki az azonosítót, és illeszd be a **Listing Grid** widget **Load more element ID** mezőjébe.
6. Kattints a **Update** gombra, és nézd meg a frontenden.

### Blokkszerkesztő

1. Nyisd meg az oldalt, és kattints a **Listing Grid** blokkra. A **General** szakasz alján kapcsold be a **Load More** kapcsolót.
2. Állítsd a **Status** értékét **On Click** értékre. Egyébként a rács a görgetéskor bővül.
3. Adj hozzá egy **Buttons** blokkot a rács alá, írd a feliratot (például „Load More”), és szabd testre.
4. A gomb **Advanced** szakaszában add meg a **HTML anchor** értékét, és másold ki.
5. Kattints újra a **Listing Grid** blokkra, és illeszd be az azonosítót a **Load more element ID** mezőbe.
6. Kattints a **Frissítés** gombra, és nézd meg az eredményt a frontenden.

A **Listing Grid** további beállításait lásd a [Listing Grid widget](https://hub.hellowp.io/hu/plugins/jet-engine/listazas-listing-grid/) fejezetben.