Lapozás és Load More gomb a Listing Gridhez

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 fejezetben.