# Vízszintes és függőleges idővonal

> Projektek, események és ütemtervek bemutatása a Vízszintes idővonal és a Függőleges idővonal widgettel: kártyák, pontok, elrendezés.

Az idővonal widgetek eseményeket, projektlépéseket vagy ütemtervet mutatnak kártyákkal. A **Vízszintes idővonal** egymás mellett sorakoztatja a kártyákat, a **Függőleges idővonal** egymás alatt, és jelzi, mi van már a múltban, mi folyamatban és mi lesz a jövőben.

## A widgetek bekapcsolása

A **Crocoblock → JetPlugins Settings → JetElements → Widgets & Extensions** oldalon az **Elérhető widgetek** között kapcsold be a **Vízszintes idővonal** és a **Függőleges idővonal** kapcsolót.

## Vízszintes idővonal

Nyisd meg az oldalt az Elementorral, keresd meg a **Vízszintes idővonal** widgetet, és húzd a kívánt szakaszba. Az alap előbeállítással négy kártya jelenik meg, ezt igényed szerint átalakíthatod.

![A Vízszintes idővonal widget szerkesztőpanelje a Tételek szakasszal](./kepek/diagramok-es-idovonalak-vizszintes-idovonal-panel.webp)

*A Vízszintes idővonal widget szerkesztőpanelje a Tételek szakasszal* (https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor)

![Az alapértelmezett vízszintes idővonal](./kepek/diagramok-es-idovonalak-vizszintes-idovonal.webp)

*Az alapértelmezett vízszintes idővonal* (https://minta-bolt.hu/widget-teszt-2/)

### Tételek

Az idővonal kártyákból áll. A kártyákat másolhatod, törölheted, és az **Elem hozzáadása** gombbal újat is felvehetsz. A kártyán a tartalom és a pont is állítható:

| Beállítás | Mit csinál |
| --- | --- |
| **Aktív** | Bekapcsolva a kártya látszik a látogatóknak. |
| **Kép megjelenítése** | Bekapcsolva képet választhatsz a kártyához, és a méretét is megadhatod. |
| **Cím** | A kártya neve. |
| **Meta** | Kiegészítő információ, például dátum, időpont vagy helyszín. |
| **Leírás** | A kártyán megjelenő szöveg. |
| **Pont tartalmának típusa** | A pont lehet ikon vagy szöveg; a választás után az ikont vagy a szöveget adod meg. |
| **Gomb szövege** | Ha a kártyán gombot szeretnél, ide írd a feliratát. |
| **Gomb hivatkozása** | A gombra kattintva ide jut a látogató. |

A panelen a **Cím HTML-címkéje** (alapból H5) a kártyacímek elemtípusát adja, a **Kártya nyilainak megjelenítése** kapcsoló a kártyák nyilait kapcsolja.

A **Dinamikus** beállítások blokkban az idővonal magától megjeleníthet külön létrehozott eseményeket. Fontos: vízszintes idővonalhoz csak a dinamikus ismétlő (repeater) használható.

### Elrendezés

| Beállítás | Mit csinál |
| --- | --- |
| **Oszlopok** | Hány kártya látszik egyszerre (1-6). |
| **Elrendezés** | Három gomb a kártyák függőleges igazításához. |
| **Igazítás** | Három lehetőség a vízszintes igazításhoz. |
| **Navigáció típusa** | **Görgetősáv** vagy **Navigáció nyilakkal**. |

A megjelenést a **Stílus** fülön szabhatod. A kész idővonalat a **Közzététel** gombbal mented.

## Függőleges idővonal

Nyisd meg az oldalt vagy a bejegyzést, keresd meg a **Függőleges idővonal** widgetet, és húzd a kívánt szakaszba. Alap előbeállítással indul, így nem kell a nulláról építened.

![A Függőleges idővonal widget szerkesztőpanelje a Kártyák szakasszal](./kepek/diagramok-es-idovonalak-fuggoleges-idovonal-panel.webp)

*A Függőleges idővonal widget szerkesztőpanelje a Kártyák szakasszal* (https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor)

![Az alapértelmezett függőleges idővonal: a már elért lépések kékkel, a hátralévők szürkén látszanak](./kepek/diagramok-es-idovonalak-fuggoleges-idovonal.webp)

*Az alapértelmezett függőleges idővonal: a már elért lépések kékkel, a hátralévők szürkén látszanak* (https://minta-bolt.hu/widget-teszt-2/)

### Kártyák

A **Kártyák** szakaszban annyi tételt veszel fel, amennyi kell. Minden kártyán megadhatsz képet, címet, metát és leírást. A kártya pontján ikon vagy szöveg jelenhet meg.

### Elrendezés

| Beállítás | Mit csinál |
| --- | --- |
| **Kártyák animálása** | A kártyák animációval jelennek meg az oldalon. |
| **Vízszintes igazítás** | A kártyák vízszintes igazítása. |
| **Függőleges illesztés** | A kártyák függőleges illesztése. |
| **Vízszintes térköz** és **Függőleges térköz** | A kártyák közötti távolság. |

A megjelenést a **Stílus** fülön állíthatod. A **Közzététel** gomb után nézd meg az oldalt.