# Dynamic Posts kinézetek: körhinta, 3D, szűrős rács és idővonal

> A Dinamikus bejegyzések widget haladó kinézetei: Körhinta, Kettős carousel, 3D, Rácsból teljes képernyőre (3D), Rács szűrőkkel, Idővonal és a görgetéskori megjelenés.

A **Dinamikus bejegyzések** widget **Dinamikus bejegyzések** szakaszában a **Kinézet** választóval állítod be, milyen elrendezésben jelenjenek meg a tételek (a **Rács** kinézet külön fejezetben szerepel). Ez a fejezet a többi látványos kinézet saját beállításait gyűjti össze. Minden kinézethez külön szakasz tartozik a panelen, a **Tételek**, a **Lekérdezés** és a többi szakasz pedig minden kinézetnél ugyanaz.

## Körhinta

A **Körhinta** kinézet a bejegyzéseket csúszkában (carouselben) jeleníti meg. A tételek stílusa szabadon választható, akár Elementor-sablont is használhatsz hozzá. A beállítások a **Körhinta** szakaszban vannak.

![A Körhinta szakasz a panelen](./kepek/dynamic-posts-kinezetek-korhinta.webp)

*A Körhinta szakasz a panelen* (https://minta-bolt.hu/wp-admin/post.php?post=22&action=elementor)

A képen a szakasz eleje látszik, a további beállítások a panelen lejjebb görgetve érhetők el.

### Alapbeállítások

| Beállítás | Mit csinál |
|---|---|
| **Maszkolás eltávolítása** | Leveszi a körhintáról a maszkot, így a körhintán kívül eső elemek is láthatók. |
| **Sebesség (ms)** | A diák közötti átmenet időtartama ezredmásodpercben (alapérték: 300). |
| **Átmeneti effektus** | **Csúsztatás**, **Áttűnés**, **Kocka**, **Coverflow** vagy **Átfordítás**. Egyes effektusokhoz további beállítások jelennek meg. |
| **Irány** | **Vízszintes** vagy **Függőleges**. |
| **Automatikus magasság** | A diavetítés burkolóelemének magassága az éppen aktív dia magasságához igazodik. Többsoros elrendezésnél nem támogatott. |
| **Nézetablak magassága** | A körhinta tárolójának (nézetablakának) magassága. |
| **Magasság igazítása** | Minden dia egyforma magas lesz, így az elrendezés egységes marad. |

### Diák

| Beállítás | Mit csinál |
|---|---|
| **Kezdő dia** | A körhinta betöltésekor elsőként megjelenő dia sorszáma (0-tól számolva). |
| **Diák száma nézetenként** | Hány dia látszik egyszerre. Asztali gépen, tableten és mobilon külön megadható. |
| **Diák száma csoportonként** | A diákat csoportokba fogja a léptetéshez: ennyi diát léptet egyszerre. |
| **Térköz az elemek között** | A diák közötti távolság pixelben. |
| **Diák száma oszloponként** | Többsoros elrendezést ad: ennyi dia kerül egymás alá egy oszlopba. |
| **Oszloponkénti kitöltés** | A többsoros elrendezés kitöltési módja: **Sor** vagy **Oszlop**. |
| **Eltolás a diák előtt** és **Eltolás a diák után** | Extra hely a diák előtt, illetve után. |
| **Ismétlés** | Végtelenített (körbeforgó) körhinta. |

### Navigáció és további beállítások

A **Navigáció** alatt a **Nyilak** (**Bal** és **Jobb**) ikonját, **Méret**ét, **Szín**ét és az **Rámutatáskor használt szín**t, valamint a **Pozíció**t állíthatod. Az **Animáció használata rámutatáskor** kapcsolóval a nyilak rámutatási animációja is bekapcsolható.

A szakasz további beállításai:

- **Lapozó**: pöttyös, törtszámos vagy folyamatsávos típus választható. A dinamikus pöttyök sok dia esetén áttekinthetőbbek, a lapozó mérete, színe és betűtípusa állítható.
- **Görgetősáv**: húzhatóvá tehető (a csúszka helyzetét vele is vezérelheted), és automatikusan elrejthető a használat után. A színe és mérete állítható.
- **Automatikus lejátszás**: megadható az egyes diák várakozási ideje (ms), az, hogy az utolsó diánál megálljon-e, és hogy a felhasználói beavatkozás leállítsa-e.
- **Szabad mód**: a diák nem rögzített helyzetekbe ugranak, hanem szabadon mozognak. Beállítható a lendület (és ereje), a pattogás mértéke a vége felé, a lendülethez szükséges legkisebb sebesség (alapérték: 0,02) és az, hogy a diák a legközelebbi helyzetbe ragadjanak.
- **Kevés dia középre igazítása** és **Aktív dia középre igazítása**.
- Kezelőeszközök: fogó kurzor az egér fölött, léptetés a billentyűzet nyilaival és léptetés az egérgörgővel.

## Kettős carousel

A **Kettős carousel** két, egymással szinkronban mozgó körhintát jelenít meg: fent a nagy, alatta a bélyegképeket mutató. A felső körhintának ugyanazok a beállításai, mint a **Körhinta** kinézetnek (a **Körhinta** szakaszban).

A bélyegképek körhintájának saját szakasza a **Bélyegképek**:

![A Bélyegképek szakasz a Kettős carousel kinézetnél](./kepek/dynamic-posts-kinezetek-kettos-belyegkepek.webp)

*A Bélyegképek szakasz a Kettős carousel kinézetnél* (https://minta-bolt.hu/wp-admin/post.php?post=22&action=elementor)

| Beállítás | Mit csinál |
|---|---|
| **Diák száma nézetenként** | Hány bélyegkép látszik egyszerre. |
| **Térköz** | A bélyegképek közötti távolság. |
| **Ismétlés** | A bélyegképek végtelenített körbeforgása (alapértelmezetten be van kapcsolva). |
| **Középre igazított diák** | Az aktív bélyegkép mindig középen marad (alapértelmezetten be van kapcsolva). |
| **Szöveg igazítása** | **Bal**, **Középre** vagy **Jobb**. |

Alatta **Normál** és **Aktív** állapotra külön megadhatod a bélyegkép **Átlátszatlanság**át, a **Cím színe**t és a **Normál képátfedés** hátterét (**Klasszikus** vagy **Színátmenet**). A **Cím megjelenítése** kapcsolóval a címet is kiírhatod (**HTML-címke**, **Szín**, **Tipográfia**, **Padding**), a **Kép megjelenítése** kapcsolóval pedig a **Képfelbontás**t és a **Magasság**ot adhatod meg.

## 3D

A **3D** kinézet a bejegyzéseket térbeli körhintában jeleníti meg. A **3D** szakasz beállításai:

![A 3D szakasz beállításai](./kepek/dynamic-posts-kinezetek-3d.webp)

*A 3D szakasz beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=22&action=elementor)

| Beállítás | Mit csinál |
|---|---|
| **3D típus** | **Kör**: a 3D rács vízszintesen csúszik. **Sor**: függőlegesen csúsztatható. |
| **Egy elem szélessége** | A látható sík szélessége. |
| **Mélységi elmosás** | A többi blokkot elmossa, így a középpontban lévő kiemelkedik. |
| **Egérgörgő** | A 3D körhinta az egérgörgő mozgatására csúszik. |
| **Az első elem középre igazítása induláskor** | Betöltéskor az első elem a középpontban áll. |

## Rácsból teljes képernyőre (3D)

A **Rácsból teljes képernyőre (3D)** kinézet rácsban mutatja a bejegyzéseket, amelyekre kattintva 3D effekttel teljes képernyős nézetbe váltanak. A **Rácsból teljes képernyőre (3D)** szakasz beállításai:

![A Rácsból teljes képernyőre (3D) szakasz](./kepek/dynamic-posts-kinezetek-teljes-kepernyo.webp)

*A Rácsból teljes képernyőre (3D) szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=22&action=elementor)

| Beállítás | Mit csinál |
|---|---|
| **Hatás** | Hat előre elkészített effekt (**Effekt 1**, … , **Effekt 6**) vagy az **Egyedi effekt**. Az egyedi effektnél az aktiválást, az átalakítást és az időzítési függvényt (easing) magad állíthatod. |
| **Időtartam (s)** | Az animáció hossza másodpercben. |
| **Panel** | A megnyíló panel **Pozíció**ja (**Bal**, **Jobb**, **Felül**, **Alul**), **Szélesség (%)**e és a benne megjelenő **Sablon**. A sablon a kívánt oldalon jelenik meg. |
| **Cím** | A panel címének **Szín**e, **Tipográfia**ja és **Padding**je. |

A rács beállításait a **Rács** szakaszban adod meg, a rács elemeinek megjelenését pedig a **Megjelenés görgetéskor** szakaszban (lásd lejjebb).

## Rács szűrőkkel

A **Rács szűrőkkel** kinézet szűrhető rácsot készít: a látogató az oldalon lévő szűrőgombokkal csoportosíthatja a bejegyzéseket. A **Szűrők** szakasz beállításai:

![A Szűrők szakasz](./kepek/dynamic-posts-kinezetek-szurok.webp)

*A Szűrők szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=22&action=elementor)

| Beállítás | Mit csinál |
|---|---|
| **Szűrők stílusa** | **Hivatkozások listája** vagy **Kiválasztás** (legördülő lista). |
| **Adatszűrők (taxonómia)** | Melyik osztályozás kifejezései legyenek a szűrők: kategóriák, címkék vagy bármely más osztályozás. |
| **Első szintű kifejezések használata** | Csak az osztályozás első szintű kifejezéseit használja. |
| **Adatszűrők (kiválasztott kifejezések)** | Csak a kiválasztott kifejezések jelennek meg szűrőként. Üresen hagyva az összes. |
| **Sorrend alapja** | A szűrők sorrendje: **Szülő**, **Darabszám (kapcsolódó bejegyzések száma)**, **Rendelés**, **Név**, **Slug**, **Csoport** vagy **ID**. |
| **Rendezés** | **Növekvő** vagy **Csökkenő**. |
| **"összes" szűrő hozzáadása** | Megjelenik az összes tételt mutató szűrő. |
| **Az "összes" szűrő az alapértelmezett** | Betöltéskor az összes tétel látszik. |
| **Összes szöveg** | Az „összes” szűrő felirata (alapérték: **Mind**). |
| **Elválasztó** | A szűrők közti elválasztójel, például `\|`, `-` vagy `/` (alapérték: `/`). |

A szűrők igazítását asztali és mobil nézetre külön állíthatod. A **Stílus** fülön a szűrők szövegének és hátterének színét, a rámutatáskori színt, a térközöket, a belső és külső margót és az elválasztó függőleges eltolását módosíthatod.

A szűrőgombok JavaScripttel működnek, ezért csak az aktuális oldalon betöltött tételeket szűrik. Ha az adatbázis alapján kell szűrni, használd a [Search & Filter Pro](https://hub.hellowp.io/hu/plugins/dynamic-content-for-elementor/dynamic-posts-search-filter-pro/) lekérdezést.

## Idővonal

Az **Idővonal** kinézet a bejegyzéseket időrendi idővonalon jeleníti meg. Az **Idővonal** szakasz beállításai:

![Az Idővonal szakasz](./kepek/dynamic-posts-kinezetek-idovonal.webp)

*Az Idővonal szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=22&action=elementor)

- **Képméret**: az idővonal jelölőjének mérete.
- **Függőleges pozíció**: a jelölő függőleges eltolása.
- **Idővonal szélessége**: a vonal szélessége.
- **Tartalom térköze**: a tartalom és a vonal közötti távolság.
- **Sorok közötti térköz**: az egymás utáni bejegyzések közötti hely.

## Megjelenés görgetéskor

A **Rács** és a **Rácsból teljes képernyőre (3D)** kinézetnél a **Megjelenés görgetéskor** szakasz **Hatás** listájával animálhatod a rácselemek betöltődését, amint az olvasó görget:

![A Megjelenés görgetéskor szakasz](./kepek/dynamic-posts-kinezetek-gorgetes.webp)

*A Megjelenés görgetéskor szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=22&action=elementor)

A választható hatások: **Nincs**, **Átlátszatlanság**, **Felfelé mozgatás**, **Nagyítás**, **Perspektivikus esés**, **Repülés**, **Átfordítás**, **Helix** és **Pattogás**. Ha például a **Nagyítás** hatást választod, a rácselemek kisebb méretből nagyítva jelennek meg.