# Elrendezésváltás a Listing Gridben

> A Layout Switcher widget beállítása: egyéni elrendezések, másik listázási sablon, ikonok, alapértelmezett elrendezés és stílus.

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.