# Rácsok, csúszkák és oldalsáv

> A bejegyzés- és médiarácsok, a bejegyzés-csúszka és a widgetterület elem beállításai.

A rácselemek a webhely tartalmát (bejegyzéseket, oldalakat, egyedi tartalmakat, médiatárbeli képeket) jelenítik meg rácsban. A rácselemek kinézetét a **Rácsépítő** sablonjaival szabhatod testre, lásd az [Eszközök](https://hub.hellowp.io/hu/plugins/js_composer/eszkozok/#rácsépítő) fejezetet.

## Post grid és Post masonry grid

A **Post grid** a webhely bejegyzéseit rácsban jeleníti meg: kiválaszthatod a tartalomtípust, megadhatsz saját lekérdezést, és megszabhatod, milyen adatok jelenjenek meg. A **Post masonry grid** ugyanez falazott (masonry) elrendezésben.

![A bejegyzésrács szerkesztőablaka](./kepek/szerkesztes-elem-post-grid.webp)

*A bejegyzésrács szerkesztőablaka* (https://minta-bolt.hu/wp-admin/post.php?vc_action=vc_inline&post_id=8&post_type=page)

A szerkesztőablak fülei: **Általános**, **Data settings**, **Design options** (és a választott megjelenítéstől függően a **Szűrés**, a **Lapozás** és a **Továbbiak betöltése gomb** fül).

### Általános fül

| Beállítás | Mit csinál |
|---|---|
| **Grid item template** | A rácselem kész sablonja. Új sablont is létrehozhatsz, vagy a kiválasztottat módosíthatod: a kész sablonokról másolat készül. |
| **Adatforrás** | A rács tartalomtípusa (például **Post**). Ha a **List of IDs** értéket választod, megjelenik az **Include only** mező, ahol cím szerint adhatsz hozzá bejegyzéseket, oldalakat. A **Custom query** választásával saját lekérdezést építhetsz a WordPress `query_posts` függvénye szerint. |
| **Adatforrás szűkítése** | Kategóriák, címkék vagy egyedi taxonómiák megadása. |
| **Item limit** | A rács legnagyobb elemszáma. A `-1` az összes elemet jelenti (legfeljebb 1000). |
| **Items per row** | Hány rácselem álljon egy sorban. |
| **Térköz** | A rácselemek közti távolság. |
| **Loading animation** | Az elemek betöltési animációja. |
| **Display style** | A rács megjelenítési módja, például **Összes megjelenítése**, **Load more button**, **Lazy loading** vagy **Paginator**. |
| **Items per page** | Oldalankénti elemszám. Csak a **Load more button**, a **Lazy loading** és a **Paginator** megjelenítésnél aktív. |
| **Szűrő megjelenítése** | Szűrő a rács fölött. |

### Data settings fül

| Beállítás | Mit csinál |
|---|---|
| **Rendezés alapja** | A rendezés típusa. Ha a **Meta value** vagy a **Meta value Number** értéket választod, meg kell adnod a meta kulcsot is. |
| **Rendezési sorrend** | Növekvő vagy csökkenő sorrend. |
| **Eltolás** | Hány elemet hagyjon ki a rács az elején. |
| **Exclude items** | Cím szerint kizárt bejegyzések, oldalak. |

### Szűrés, lapozás és a betöltés gombja

| Beállítás | Fül | Mit csinál |
|---|---|---|
| **Filter by** | Szűrés | A szűrő forrása. |
| **Style**, **Alignment**, **Color**, **Filter size** | Szűrés | A szűrő megjelenése, igazítása, színe és mérete. |
| **Button Text** | Továbbiak betöltése gomb | A gomb felirata. Alapértelmezés szerint „Load more”. |
| **Button style**, **Button shape**, **Button color**, **Button size**, **Button alignment** | Továbbiak betöltése gomb | A gomb stílusa, alakja, színe, mérete és igazítása. |
| **Button icon** | Továbbiak betöltése gomb | Ikon a gombon. |
| **Arrows design**, **Arrows position**, **Arrows color** | Lapozás | A nyilak kinézete, helye (a rácson belül vagy kívül) és színe. A helye és a színe csak megadott nyíldizájnnál aktív. |
| **Pagination style**, **Pagination color** | Lapozás | A lapozó stílusa és színe. |
| **Loop pages?** | Lapozás | A rácselemek végtelen ismétlése, mint egy karusszelben. |
| **Autoplay delay** | Lapozás | Másodpercben megadott érték, `-1` kikapcsolja az automatikus váltást. |
| **Animation In**, **Animation Out** | Lapozás | Az oldalváltás be- és kilépő animációja. |

A **Post masonry grid** nem tartalmazza a **Lapozás** fület, a többi beállítása megegyezik a **Post grid** elemével.

## Media grid és Masonry media grid

A **Media grid** a médiatár képeit jeleníti meg rácsban, a **Masonry media grid** falazott elrendezésben. A **Képek** mezőben választod ki a képeket, a többi beállítás a bejegyzésrácéhoz hasonló: **Grid item template**, **Items per row**, **Térköz**, **Loading animation**, **Stílus** (a megjelenítési mód), valamint a betöltés gombjának, a szűrőnek és a lapozásnak (a **Media grid** elemnél) a beállításai. A **Masonry media grid** nem tartalmaz lapozást.

## Posts slider

Csúszka a webhely bejegyzéseiből, oldalaiból vagy egyedi tartalmaiból, kiemelt képekkel.

![A bejegyzés-csúszka szerkesztőablaka](./kepek/szerkesztes-elem-bejegyzes-csuszka.webp)

*A bejegyzés-csúszka szerkesztőablaka* (https://minta-bolt.hu/wp-admin/post.php?vc_action=vc_inline&post_id=8&post_type=page)

| Beállítás | Mit csinál |
|---|---|
| **Diavetítés típusa** | **Flex slider áttűnés**, Flex slider csúszás vagy Nivo slider. |
| **Number of items** | A diák száma. Az `All` megadásával mindet megjeleníti. |
| **Automatikus váltás** | A diák váltása x másodpercenként. |
| **Bélyegkép mérete** | WordPress-méret (thumbnail, medium, large, full, vagy a sablon által megadott méret), vagy képpontban, például `200x100`. |
| **Bejegyzéstípusok** | A forrás: bejegyzés (**post**), oldal (**page**). |
| **Leírás** | A leírás forrása (egyes csúszkák nem támogatják). |
| **Link** | A dia hivatkozása: a bejegyzésre, a nagyobb képre, egyedi hivatkozás, vagy nincs hivatkozás. Egyedi hivatkozásoknál soronként adhatod meg az URL-eket. |
| **Post/page IDs** | Csak a megadott azonosítójú bejegyzések, oldalak jelennek meg (vesszővel elválasztva). A **Bejegyzéstípusok** mezővel együtt használd. |
| **Kategóriák** | Névvel megadott kategóriák, soronként. Csak ezek jelennek meg. |
| **Rendezés alapja**, **Rendezési sorrend** | A lekért bejegyzések rendezése. |

## Widgetised sidebar

Egy korábban létrehozott widgetterületet illeszt be az oldalba. Beállításai: **Cím** (a widget fölött megjelenő szöveg), **Oldalsáv** (melyik widgetterület jelenjen meg), **Elem ID**, **Extra osztálynév** és a **Design options** fül.