# Listing Grid Divi szerkesztővel

> Listázási sablon és Listing Grid elem készítése egyedi bejegyzéstípushoz a Divi szerkesztőben, az elem beállításaival.

A JetEngine listázási sablonját a Divi szerkesztőben is megépítheted, és a Listing Grid elemmel egy egyedi bejegyzéstípus tartalmát dinamikusan jelenítheted meg.

Előfeltétel: a Divi 5 téma, a hozzá tartozó JetEngine és Divi közötti integrációs kiegészítő telepítve és aktiválva, valamint a JetEngine.

## Listázási sablon létrehozása

1. Nyisd meg a **JetEngine → Listázások/komponensek** oldalt, és kattints az **Új elem hozzáadása** gombra.
2. A **Lista forrása** mezőben válaszd a **Bejegyzések** forrást, a **Bejegyzéstípusból** mezőben a kívánt típust.
3. Add meg a **Listázási elem neve** mezőt, és a **Listázási nézet** mezőben válaszd a **Divi** szerkesztőt.
4. Kattints a **Listázási elem létrehozása** gombra. A sablon a Divi vizuális szerkesztőjében nyílik meg.

A Divi szerkezete: a szakaszok (standard, teljes szélességű és speciális) sorokat, a sorok oszlopokat, az oszlopok modulokat (elemeket) tartalmaznak.

5. A **+** gombbal adj hozzá egy sort (például egyoszlopost), majd az elemeket.

### Dinamikus elemek

- **Dynamic Image**: az **General** lapon kiválaszthatod a forrást (például a bejegyzés kiemelt képét), megadhatsz képet kézzel vagy egy kép URL-előtagot. A **Layout** lapon a kép méretét, a késleltetett betöltést, a hivatkozást, a tartalék képet és a környezetet állíthatod. A **Design** lapon a szokásos stílusbeállítások érhetők el.
- **Dynamic Field**: ez a legfontosabb elem, az alapértelmezett és az egyedi metamezők kiírására. A **Post/Term/User/Object Data** forrással az általános adatok (például a cím), a **Meta Data** forrással a metamezők jeleníthetők meg a **Meta Key** kiválasztásával (például „Cím” mező). A **Layout** lapon ikon, tartalék érték vagy visszahívás (callback) adható meg, és a kimenet formázható; például egy ármezőnél a **Format number** visszahívás a **Field Format** mezővel.
- **Dynamic Terms**: a bejegyzés kifejezéseit írja ki. Az **General** lapon kiválasztható a taxonómia, a megjelenő kifejezések száma, és szöveg a kifejezések elé vagy után.
- **Dynamic Link**: előre meghatározott forrásból (szöveg, kép vagy hivatkozás) hivatkozást készít, például a bejegyzés címét a bejegyzésre mutató linkkel.
- **Dynamic Meta** és **Dynamic Repeater**: további dinamikus elemek.

Minden elemnél beállítható az **Element Label** (elemcímke), amellyel az azonos típusú elemek megkülönböztethetők.

Új elem hozzáadásához a **+** gombbal vagy az oszlop **Elements → + Add Element** gombjával nyiss elemlistát. Ha kész a sablon, kattints a **Mentés** gombra.

## A Listing Grid elhelyezése oldalon

1. Nyisd meg azt az oldalt, ahol a listát meg akarod jeleníteni (vagy hozz létre újat), adj neki címet, és kattints a **Use Divi Builder** gombra. Az oldal a frontenden, a Divi vizuális szerkesztőjével töltődik újra.
2. Adj hozzá egy oszlopot, és abba a **Listing Grid** elemet.
3. A **Listing** legördülő listában válaszd ki a sablont. Az oszlopok számát eszköztípusonként állíthatod, és megadhatod a bejegyzések minimális és maximális számát.

A Listing Grid további beállításai:

| Beállítás | Mit csinál |
| --- | --- |
| **Use as Archive Template** | Az oldalt archívumsablonként használja; a bejegyzések számát a **Beállítások → Olvasás** oldal blogoldali értéke adja. |
| **Status** | Mely állapotú bejegyzések jelenjenek meg: **Publish**, **Future**, **Draft**, **Pending review**, **Private** vagy **Inherent**. |
| **Use Random Posts Number** | Minden újratöltéskor véletlen számú bejegyzést mutat; a minimumot a **Posts number**, a maximumot a **Max Random Posts number** értéke adja. |
| **Not Found Message** | A szöveg, amely akkor jelenik meg, ha nincs találat. |
| **Lazy Load** | A rács tartalma csak görgetéskor töltődik be, ami gyorsítja az oldal megjelenítését. |
| **Lazy Load Offset** | A rács aljától mért távolság (px), amelynél a következő elemek betöltése elindul. |
| **Is Masonry Grid** | Masonry (kőműves) elrendezés. |
| **Equal Columns Height** | Az oszlopok azonos magasságúak. |
| **Load More** | Bekapcsolva a megadott számú bejegyzést mutatja, a többit kérésre tölti be; a viselkedés kiválasztható: kattintásra vagy végtelen görgetéssel. |
| **Load more element ID** | A listához kapcsolt gomb azonosítója: ezt az azonosítót a külön, oldalra tett gomb beállításában is meg kell adni. |
| **Loader text** | A betöltés alatt megjelenő szöveg. |
| **Loader spinner** | Betöltésjelző forgó ikon. |

Ne csodálkozz, ha a Divi szerkesztőjében a rács nem mutatja a bejegyzések tartalmát: mentés után a frontenden helyesen jelenik meg.

### Egyéni lekérdezés és láthatóság

A **Custom Query** lapon a **Use Custom Query** kapcsolóval és a **Custom Query** listával a Lekérdezéskészítővel összeállított lekérdezést alkalmazhatod. Ez akkor hasznos, ha az egyedi típus bejegyzéseit feltételek vagy felhasználói adatok szerint kell szűrni. A **Block Visibility** részben beállíthatod, hogy az elem mindig látsszon, vagy tűnjön el, ha a lekérdezés üres.

### Csúszka (Slider Settings)

| Beállítás | Mit csinál |
| --- | --- |
| **Enable Slider** | Bekapcsolja a csúszkát. |
| **Slides to Scroll** | Egy kattintásra hány bejegyzés lépjen. |
| **Show Arrows Navigation** | Nyilak mindkét oldalon; bekapcsolva az **Arrow Icon** is választható. |
| **Show Dots Navigation** | Pöttyös navigáció alul. |
| **Autoplay** | Automatikus lejátszás. |
| **Autoplay Speed** | A lejátszás sebessége. |
| **Pause on Hover** | Az egér ráhúzására megáll. |
| **Effect** | Váltás típusa: **Slide** vagy **Fade**. |
| **Infinite Loop** | Az utolsó után újra az első következik. |
| **Center Mode** | A középső elem kiemelt, a szélén a következők részben látszanak. |
| **Animation Speed** | A váltás animációjának sebessége. |
| **Enable Scroll Slider** | Vízszintes görgetés a rácson, mobilon ujjal húzható. |
| **Scroll Slider On** | Melyik eszközön legyen engedélyezve: asztali gép, táblagép vagy mobil. |
| **Static column width** | Állandó oszlopszélesség eszközönként. |

Az **Element Label** lapon átnevezheted az elemet. A **Design** lapon az oszlopok, a betöltő, a csúszka és a „nincs találat” üzenet stílusa állítható.

Kattints a **Mentés** gombra: a frontenden a rács a bejegyzéseket helyesen jeleníti meg.