Elrendezésváltás a Listing Gridben

A Layout Switcher widgettel a látogató átválthatja a Listing Grid elrendezését (például rácsról listára). Előfeltétel az Elementor (a szabad verzió elég), az aktív JetEngine és egy elkészített listázási sablon. A widget az oldalon a Listing Grid mellé kerül.

A widget bekapcsolása

A widget egy külön bővítménycsomagban érkezik. A Bővítmények → Új bővítmény hozzáadása oldalon kattints a Bővítmény feltöltése gombra, válaszd ki a ZIP-fájlt a gépedről, majd Telepítés most, utána Bővítmény bekapcsolása.

Beállítás

1. Nyisd meg az Elementorban azt az oldalt, ahol a Listing Grid van, vagy ahová szeretnéd tenni, és állítsd be a widgetet.
2. Húzd be a Layout Switcher widgetet is.
3. A Select a Listing Grid widget mezőben válaszd ki a vezérelt Listing Grid widgetet.
4. Az alapértelmezett Grid és List tételek mellé az Add Item gombbal új elrendezéseket vehetsz fel. A tételeket húzással rendezheted.
5. Állíts be egy alapértelmezett elrendezést az Is Default Layout kapcsolóval. Az alap Grid tétel ilyen, ezen nem kell változtatnod.

A példában két egyéni elrendezés készült:

• „Két oszlop”: a tétel Settings fülén a Columns Number értéke 2.
• „Csak árak”: a Settings fülön másik listázási sablont választasz a Listing mezőben (ez más tartalmat mutat, nem az alapértelmezett sablont), és a Columns Number itt is 2.

A widget a Listing Elements csoportban található, vagy a keresőben a nevére rákeresve. Csak akkor választhatsz vezérelt rácsot, ha az oldalon van legalább egy Listing Grid widget. A listában a widgetek neve mellett zárójelben az azonosítójuk látszik; ezt az Elementor automatikusan rendeli a rácshoz. A Layout Switcher külön, béta állapotú funkció.

A Content fül egyetlen szakasza a General. Az alapértelmezett két tételt (Grid és List) a másolás és a bezárás gombbal megkettőzheted vagy törölheted; a szerkesztéshez kattints a tételre.

Egy tétel beállításai

A tétel Content fülén:

Beállítás	Mit csinál
Label	Az elrendezés címe, amely a gombon látszik (később ki is kapcsolható).
Slug	Az elrendezés azonosítója: kisbetűs latin betűk, számok, „-” és „_” lehet benne, szóköz nem. Ha üresen hagyod, a Label alapján készül (de a mezőben nem jelenik meg).
Icon	A felirathoz rendelhető ikon: None (nincs ikon, az alapérték), Upload SVG (SVG-fájl feltöltése a médiatárból) vagy Icon Library (az Elementor ikonkönyvtára; a My Libraries mellett más ikonkönyvtár is feltölthető).

A tétel Settings fülén:

Beállítás	Mit csinál
Is Default Layout	Ezt az elrendezést jelöli alapértelmezettnek. Pontosan egy elrendezésnek kell alapértelmezettnek lennie.
Listing	Ha az Is Default Layout ki van kapcsolva: Default (az alapértelmezett sablon) vagy másik, előre elkészített sablon.
Columns number	Az oszlopok száma az elrendezésben.

A General szakasz utolsó kapcsolója a Labels. Alapból be van kapcsolva, így a gombon a felirat látszik. Kikapcsolva a gomb üres, vagy csak az ikont mutatja, ha van hozzárendelve.

A JetSmartFilters bővítménnyel is együttműködik: ha a rácshoz szűrőt kapcsoltál, az elrendezésváltás után is működik a szűrés.

Stílus

A Style → Buttons → Active fülön kiemelheted az éppen aktív elrendezés gombját (például a szín vagy a háttér módosításával). A stílus nem kötelező. Ha elkészültél, kattints a Publish/Update gombra.

Az eredmény

A frontenden bármelyik gombra kattintva az adott elrendezés jelenik meg:

• Grid: az alapértelmezett, a példában háromoszlopos elrendezés;
• List: egy oszlop;
• Két oszlop: kétoszlopos rács;
• az utolsó gomb egy másik sablonú listát mutat (a példában „Túrák”).

Ha másik listázási sablonra váltasz, AJAX-os betöltés indul, ezért a tartalom egy kis késéssel jelenik meg. Az alapértelmezett elrendezések közötti váltás azonnali.