Listing Grid Divi szerkesztővel

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.