# Idővonal widget

> Függőleges idővonal egyéni elemekkel vagy bejegyzésekből: lekérdezés, végtelen betöltés, egyéni dátumérték, ikonok és stílus.

Az **Idővonal** widget történéseket, eseményeket jelenít meg függőleges idővonalon. Az elemekhez szöveget, képet és ikont adhatsz, de bejegyzéseket, oldalakat, médiát és sablonokat is kirajzolhat az idővonalon. A színek és a tipográfia a téma arculatához igazíthatók.

Főbb tudnivalók:

- lekérdezésszerkesztő a megjelenő bejegyzések pontos kiválasztásához;
- végtelen betöltésű lapozás;
- egyéni érték megjelenítése a bejegyzés dátumának helyén;
- globális és elemenkénti ikon és stílus;
- görgetéskor (fókuszban) megváltozó szín az összekötő vonalon, az ikonon és az elemen;
- rámutatáskor használt stílus az ikonra és az elemre;
- reszponzív igazítás;
- hivatkozás megadható az elemekhez.

A widgetet használat előtt kapcsold be a UAE beállításai között (lásd [Widgetek ki- és bekapcsolása](https://hub.hellowp.io/hu/plugins/ultimate-elementor/altalanos-widgetek-ki-be/)).

## Tartalom forrása

![Az Idővonal Általános szakasza](./kepek/kozlemenyek-idovonal-altalanos.webp)

*Az Idővonal Általános szakasza* (https://minta-bolt.hu/wp-admin/post.php?post=35&action=elementor)

A képen a **Tartalom forrása** (**Bejegyzések**), a **Bejegyzések oldalanként** és a **Végtelen betöltés** látszik.

A **Tartalom** fül **Általános** szakaszában a **Tartalom forrása** két értéket vehet fel:

- **Egyéni**: az elemeket kézzel veszed fel az **Idővonal elemei** szakaszban.
- **Bejegyzések**: az elemek bejegyzésekből, oldalakból, médiából vagy sablonokból jönnek.

### Egyéni elemek

Egyéni forrásnál az **Idővonal elemei** szakaszban új elemet vehetsz fel, vagy a meglévőt másolhatod. Az elemek sorrendjét húzással változtathatod. Minden elemhez megadható:

- **dátum**;
- **címsor**;
- **leírás** (szöveg és médiafájl).

### Bejegyzések az idővonalon

Bejegyzés-forrásnál a **Bejegyzések oldalanként** mezővel (alapérték: 6) állíthatod, hány elem jelenjen meg egyszerre. A **Lekérdezés** szakaszban választod ki a tartalmat, a **Bejegyzések** szakaszban pedig az elemek részeit.

#### Lekérdezés

A lekérdezésszerkesztő ugyanúgy működik, mint a [Bejegyzések widgetben](https://hub.hellowp.io/hu/plugins/ultimate-elementor/kozlemenyek-bejegyzesek/): két típusa van, **Fő lekérdezés** és **Egyéni lekérdezés**. Az egyéni lekérdezésnél kiválaszthatod a bejegyzés típusát (bejegyzések, oldalak, média vagy saját sablonok), kategóriák, címkék és szerzők szerint szűrhetsz egyeztetéssel vagy kizárással, kijelölhetsz vagy kizárhatsz konkrét bejegyzéseket, beállíthatod a kiemelt bejegyzések kezelését, az eltolást és a sorrendet. Ha nincs találat, a **Ha nem találhatók bejegyzések** üzenet látszik, és opcionálisan a keresőmező.

#### A bejegyzés részei

![A Bejegyzések szakasz](./kepek/kozlemenyek-idovonal-bejegyzesek.webp)

*A Bejegyzések szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=35&action=elementor)

A képen a **Bejegyzések** szakasz beállításai látszanak: kép, cím, kivonat, hivatkozás típusa és a dátum.

| Beállítás | Mit csinál |
|---|---|
| **Kép megjelenítése** | A bejegyzés képe az elemben. A **Képfelbontás** a képméretet adja. |
| **Cím megjelenítése** | Az elem címe. |
| **Kivonat megjelenítése** | Kivonat az elemben; a **Kivonat hossza** a szavak száma (alapérték: 25). |
| **Hivatkozás típusa** | Mi legyen kattintható: például a **Teljes doboz**. |
| **Dátum** | **Közzététel dátuma**, **Utolsó módosítás dátuma** vagy **Egyéni**. |
| **Egyéni meta kulcs** | Egyéni dátumnál az egyéni mező meta kulcsa. |

### Végtelen betöltés

A **Végtelen betöltés** kapcsolóval a lekérdezéssel kiválasztott bejegyzések görgetéskor automatikusan töltődnek be az idővonalba. Ez akkor hasznos, ha a bejegyzéseket dinamikusan jeleníted meg: nem kell kézzel megadnod, hány bejegyzés férjen ki egy oldalra, és az idővonalat sem kell újratervezned. Minden bejegyzés ugyanabban az előre beállított idővonal-kialakításban jelenik meg.

1. **Tartalom → Általános**: a **Tartalom forrása** legyen **Bejegyzések**.
2. Állítsd a **Végtelen betöltés** kapcsolót **Igen** értékre.
3. A **Bejegyzések oldalanként** mezőbe írd be, hány bejegyzés töltődjön be egyszerre.

### Kiemelt bejegyzések

A WordPress „Kiemelt” (sticky) bejegyzései a lekérdezésben alapból a lista elejére kerülnek. Ha például tíz bejegyzésed van, a sorrend fordított időrendben 10, 9, 8 és így tovább. Ha az ötödik bejegyzést kiemeltre állítod, a sorrend 5, 10, 9, 8 lesz. A **Kiemelt bejegyzések figyelmen kívül hagyása** kapcsolóval ezt kikapcsolhatod: ilyenkor a kiemelt bejegyzés is a megszokott fordított időrendbe kerül.

Bejegyzés kiemelése:

1. A WordPress vezérlőpultján nyisd meg a **Bejegyzések → Összes bejegyzés** oldalt.
2. Szerkeszd azt a bejegyzést, amelyet ki szeretnél emelni.
3. A jobb oldali **Közzététel** dobozban a láthatóság (Visibility) sora mellett kattints a **Szerkesztés** hivatkozásra.
4. Nyilvános bejegyzésnél jelöld be a **Legyen folyamatosan a felhasználói oldalon** lehetőséget.
5. Kattints az **OK** gombra, majd frissítsd a bejegyzést.

### Fejlesztőknek: a betöltött mennyiség módosítása

A végtelen betöltés során betöltendő oldalak számát az `uael_timeline_infinite_limit` szűrővel változtathatod meg:

```php
add_filter( 'uael_timeline_infinite_limit', function( $change_page_limit ) {
    // A végtelen betöltés oldalszámának módosítása.
    return $change_page_limit;
}, 10, 1 );
```

## Egyéni érték a dátum helyén

Bejegyzések megjelenítésekor az idővonal a bejegyzés közzétételi dátumát mutatja. A dátum helyett bármilyen egyéni mező értékét kiírathatod, amelyhez meta kulcs tartozik. Ez például akkor hasznos, ha az idővonal közelgő eseményeket mutat, és a bejegyzéshez tartozó jövőbeli dátumot szeretnéd kiírni.

Beállítása: **Tartalom → Bejegyzések → Dátum** → válaszd az **Egyéni** értéket, és az **Egyéni meta kulcs** mezőbe írd az egyéni mező kulcsát. Ez csak akkor érhető el, ha a **Tartalom forrása** **Bejegyzések**.

1. Szerkeszd a bejegyzést, és a **Képernyő beállításai** (Screen Options) között kapcsold be az **Egyéni mezők** megjelenítését.
2. Vegyél fel új egyéni mezőt, például `esemeny_datum` néven, és add meg az értékét (például „2026. június 12.”).
3. Jegyezd meg a mező meta kulcsát.
4. Írd be a kulcsot az **Egyéni meta kulcs** mezőbe.
5. Az egyéni mező értéke a bejegyzés ikonja mellett jelenik meg az idővonalon.

![Az idővonal bejegyzésekkel és egyéni dátumértékkel](./kepek/kozlemenyek-idovonal-elo.webp)

*Az idővonal bejegyzésekkel és egyéni dátumértékkel* (https://minta-bolt.hu/kozlemenyek-1-teszt/)

A képen az idővonal elemei a bejegyzések címével és kivonatával jelennek meg, az ikonok mellett az egyéni mezőből kiírt dátumokkal. A görgetésben már érintett szakaszon az összekötő vonal és az ikonok színe más.

## Elrendezés

![Az Idővonal Stílus fülének Elrendezés szakasza](./kepek/kozlemenyek-idovonal-stilus-elrendezes.webp)

*Az Idővonal Stílus fülének Elrendezés szakasza* (https://minta-bolt.hu/wp-admin/post.php?post=35&action=elementor)

A képen a **Tájolás**, a **Reszponzív támogatás**, a **Reszponzív tájolás**, a **Tartalom illesztése**, a **Kártyanyíl megjelenítése** és az **Összekötő ikonjának igazítása** beállítás látszik.

A **Stílus → Elrendezés** szakasz beállításai:

| Beállítás | Mit csinál |
|---|---|
| **Tájolás** | Bal, közép vagy jobb. A középső tájolásnál a kártyák váltakozva kerülnek a vonal két oldalára. |
| **Reszponzív támogatás** | Csak középső tájolásnál: melyik eszközökön váljon egyoldalassá az idővonal (**Táblagépen és mobilon** vagy csak **Mobilon**). |
| **Reszponzív tájolás** | Egyoldalas nézetben a kártyák a vonal **Bal** vagy **Jobb** oldalán legyenek. |
| **Tartalom illesztése** | A kártya tartalmának igazítása: balra, középre vagy jobbra, eszközönként is. |
| **Kártyanyíl megjelenítése** | A kártya nyilának be- és kikapcsolása. |
| **Összekötő ikonjának igazítása** | Az ikon és a nyíl függőleges helye a kártyához képest: felül, középen vagy alul. |

### Váltakozó igazítás

A váltakozó (páros-páratlan) igazításnál az első kártya balra, a második jobbra, a harmadik megint balra kerül, és így tovább. Az idővonal alapból így jelenik meg. Kézzel a **Tájolás** értékének **Közép** beállításával érheted el. A kártyák szövegét a **Tartalom illesztése** mezővel igazíthatod balra, középre vagy jobbra.

### Nyíl és ikon függőleges helye

A nyilat és az ikont a kártyához képest a kártya tetejére, közepére vagy aljára teheted az **Összekötő ikonjának igazítása** beállítással.

### Reszponzív nézet

Középső tájolásnál a váltakozó kártyák mobilon összezsúfolódhatnak, és minél hosszabb a tartalom, annál keskenyebb és hosszabb lesz a kártya. Ezt a reszponzív támogatás oldja meg, amely csak középső tájolásnál érhető el:

1. **Stílus → Elrendezés**: a **Tájolás** legyen **Közép**.
2. A **Reszponzív támogatás** mezőben válaszd ki, mely eszközökön legyen egyoldalas az idővonal: **Táblagépen és mobilon** vagy **Mobilon**.
3. A **Reszponzív tájolás** kapcsolóval add meg, hogy a kártyák **Bal** vagy **Jobb** oldalon legyenek.
4. Ha külön tartalom-igazítást szeretnél, a **Tartalom illesztése** mellett válassz eszközt, és állítsd be az igazítást.

Így az idővonal asztali gépen középső tájolású, a kijelölt eszközökön viszont bal vagy jobb oldali.

## Ikonok és stílus

Minden idővonal-elem alapból a globális stílusbeállításokat örökli. A színek és a tipográfia így az egész idővonalon egységesen állíthatók, majd elemenként felülbírálhatók.

### Globális beállítások

A **Stílus** fül szakaszai: **Elrendezés**, **Térközök**, **Idővonal elemei**, **Dátumok**, **Összekötő**.

- **Térközök**: **Vízszintes térköz**, **Függőleges térköz**, **Címsor alatti térköz**.
- **Idővonal elemei**: a címsor és a leírás színe és tipográfiája, háttérszín, dobozárnyék, szegély, lekerekített sarkok, párnázás. A szakasz három állapota **Alapértelmezett**, **Fókuszban** és **Rámutatás**.
- **Dátumok**: a dátum tipográfiája és színe, ugyancsak a három állapotra.
- **Összekötő**: az ikon és az összekötő vonal beállításai.

![Az Összekötő stílusszakasz](./kepek/kozlemenyek-idovonal-stilus-osszekoto.webp)

*Az Összekötő stílusszakasz* (https://minta-bolt.hu/wp-admin/post.php?post=35&action=elementor)

A képen az **Összekötő** szakasz látszik: **Összekötő ikon**, **Összekötő szélessége**, **Ikon mérete**, **Ikon háttérmérete**, szegély és az ikon lekerekített sarkai.

Az **Összekötő** szakaszban kiválaszthatod az ikont, és állíthatod az ikon és a vonal színét (**Vonal színe**, **Ikon színe**, **Ikon háttérszíne**), szintén **Alapértelmezett**, **Fókuszban** és **Rámutatás** állapotra.

### Görgetéskor megváltozó szín (Fókuszban)

Ha lefelé vagy felfelé görgeted az idővonalat, az összekötő vonalának, az ikonnak és az ikon hátterének színe megváltozhat. A szín akkor vált, amikor az elem belép a látható területre.

A beállítás a **Stílus → Összekötő** szakaszban van, két állapottal:

- **Alapértelmezett**: a vonal és az ikon színe, amikor nincs fókuszban és nincs rajta az egér.
- **Fókuszban**: a szín, amelyet a görgetés közben kapnak. Itt a **Vonal színe**, az **Ikon színe** és az **Ikon háttérszíne** állítható.

Ha egy idővonal-elemnél külön adsz meg ikonszínt, az felülírja ezt a beállítást (lásd lent: Egy elem vagy ikon külön stílusa).

### Rámutatás

A **Rámutatás** állapotban az elem (címsor, szöveg, háttér), a dátum és az összekötő (ikon, ikon háttér) rámutatáskor használt színe adható meg.

### Egy elem vagy ikon külön stílusa

Ha egy elemet ki akarsz emelni, felülbírálhatod a globális beállításokat: másik színt vagy másik ikont adhatsz neki.

1. **Tartalom → Idővonal elemei**: szerkeszd a kívánt elemet.
2. Nyisd meg az elem **Stílus** fülét.
3. Kapcsold be a globális beállítások felülbírálását.
4. Állítsd be a kívántakat: a címsor és a szöveg színe, az elem háttérszíne, az ikon (más ikon, az ikon színe és az ikon háttérszíne), a dátum színe.