# Idővonal (Timeline) widget: jelölők, iframe, sablon és gomb

> Az Idővonal widget felépítése, a jelölők tartalomtípusai (kép, iframe, sablon) és a gomb hozzáadása egy jelölőhöz.

Az **Idővonal** (angolul Timeline) widget események, mérföldkövek vagy lépések sorát rajzolja ki egy függőleges vonal mentén. Minden esemény egy „jelölő” (pin) saját tartalommal. A widget csak a Pro változatban érhető el.

Használat előtt kapcsold be: **The Plus Addons → Widgets**, keress rá a **Timeline** szóra, és kapcsold be a kapcsolóját. Az Elementor szerkesztőjében az **Idővonal** nevet keresd.

## Az idővonal felépítése

![Az Idővonal widget Tartalom szakasza a jelölők listájával](./kepek/dobozok-gombok-2-idovonal-panel.webp)

*Az Idővonal widget Tartalom szakasza a jelölők listájával* (https://minta-bolt.hu/wp-admin/post.php?post=90&action=elementor)

A képen a **Stílus** (két elrendezés), a **Mozaikos elrendezés** kapcsoló, a **Tartalom illesztése** (bal, középre, jobb) és a jelölők listája látszik.

1. Húzd az **Idővonal** widgetet az oldalra.
2. Válaszd ki a **Stílus** értékét (**Stílus 1** vagy **Stílus 2**).
3. A jelölők listájában nyiss meg egy elemet, vagy add hozzá az újat az **Elem hozzáadása** gombbal.
4. Töltsd ki az elem mezőit (lásd lent), majd tedd közzé az oldalt.

![Egy jelölő megnyitott beállításai](./kepek/dobozok-gombok-2-idovonal-elem-panel.webp)

*Egy jelölő megnyitott beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=90&action=elementor)

A kép egy megnyitott jelölő mezőit mutatja: ikon, jelölő címe és pozíciója, cím, leírás, tartalomtípus, link és gomb.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Ikon kiválasztása** | A jelölő körében látszó ikon vagy kép (**Nincs**, **Ikon**, **Kép**), az ikonhoz az **Ikonbetűkészlet** is tartozik. | Ikon |
| **Jelölő címe** | A jelölőnél látszó dátum, címke vagy rövid szöveg. | 26-06-2018 |
| **Jelölő pozíciója** | A jelölő címének helye a körhöz képest: **Bal**, **Jobb**, **Felül**, **Alul**. | Felül |
| **Cím** | Az elem címe. | ThePlus Addons |
| **Leírás** | Az elem szövege szerkesztővel. | mintaszöveg |
| **Tartalomtípus** | Mit mutasson az elem: **Kép**, **Iframe/HTML** vagy **Sablon**. | Kép |
| **Link** | Az elemhez tartozó cím (nem kötelező). | üres |
| **Gomb megjelenítése** | Gombot ad az elemhez. | Ki |
| **Gomb szövege** | A gombon látható felirat. | üres |

![A kész idővonal két jelölővel](./kepek/dobozok-gombok-2-idovonal.webp)

*A kész idővonal két jelölővel* (https://minta-bolt.hu/tp-idovonal/)

A képen az első jelölő a beágyazott tartalmat, a második a sablonból érkező címet mutatja.

Minden jelölő mezői külön állíthatók, ezért egy idővonalban mindhárom tartalomtípus keverhető.

## Tartalomtípus: Kép

Ha a **Tartalomtípus** **Kép**, a jelölő megjeleníti a kiválasztott képet. A kép mezője csak ennél a típusnál látszik: ha egy jelölő képe nem jelenik meg, ellenőrizd, hogy a **Tartalomtípus** tényleg **Kép**.

## Iframe tartalom

Az **Iframe/HTML** típussal videót, térképet vagy bármilyen beágyazható tartalmat tehetsz közvetlenül a jelölőbe.

1. A jelölőnél állítsd a **Tartalomtípus** értékét **Iframe/HTML** lehetőségre.
2. A megjelenő egyedi HTML/iframe kód mezőbe illeszd be a beágyazó kódot (például egy videó `<iframe>` címkéjét).

A közzétett oldalon a jelölő valódi `<iframe>` elemet tartalmaz a beillesztett forráscímmel, a kód nem csonkul.

Amit beillesztesz, annak beágyazható címnek kell lennie (például YouTube beágyazási link). Ha egy webhely letiltja a keretben való megjelenítést, a jelölőben is üres marad. Ilyenkor próbáld meg a címet külön böngészőlapon, hogy kizárd a jelölő hibáját.

## Sablon használata

Összetettebb tartalomhoz megtervezheted a jelölő tartalmát Elementor-sablonként is, shortcode nélkül.

1. Előbb mentsd el a kívánt kialakítást sablonként a **Sablonok → Mentett sablonok** oldalon.
2. A jelölőnél állítsd a **Tartalomtípus** értékét **Sablon** lehetőségre.
3. Az **Elementor-sablonok** listában válaszd ki a mentett sablont. A lista mellett a sablon szerkesztésére és új sablon létrehozására szolgáló gyorsgombok is vannak.

A jelölő a kiválasztott sablon tartalmát jeleníti meg a helyén. A lista csak a már elmentett sablonokat mutatja, így üres, amíg nem hozol létre egyet: ilyenkor az új sablon létrehozása gyorsgomb a sablonokhoz visz.

## Gomb a jelölőn

A jelölőhöz gombot is adhatsz, például „Tovább olvasom” hivatkozásnak egy hosszabb leíráshoz.

1. A jelölő **Link** mezőjébe írd a cél címét.
2. Kapcsold be a **Gomb megjelenítése** kapcsolót.
3. A **Gomb szövege** mezőbe írd a feliratot.

A gomb a megadott felirattal jelenik meg, és a **Link** mezőbe írt címre mutat. Az idővonal minden jelölőjének gombja ugyanazt a stílusbeállítást használja, ezért egyik jelölő gombját nem színezheted vagy méretezheted másként, mint a többiét.

Ha a gomb nem jelenik meg, ellenőrizd, hogy a **Gomb megjelenítése** be van-e kapcsolva az adott jelölőnél: alapból ki van, és minden jelölő kapcsolója független.