# Divi 5 modulok: tartalmi idővonal

> A Supreme Content Timeline modul és elemei: elrendezés, animációk, pontozók, kártyák.

A **Supreme Content Timeline** a tartalmadból készít idővonalat kódolás nélkül. Teljesen reszponzív. Folyamatok lépéseinek, események sorának, termékrészleteknek a bemutatására jó. Egyetlen rövid bekezdéshez felesleges, ott a sima szöveg egyszerűbb. A modul a **Divi Supreme** kategóriában van, és előbb be kell kapcsolnod a **Divi Supreme Pro → Modulok beállításai** fülön. A builder feliratai angolul maradnak, ezért itt is úgy szerepelnek.

A modul szülő, az idővonal bejegyzései gyermek modulok (**Supreme Content Timeline Child**). Ezeket a szülő **Content** fülén vedd fel (**Add New Item**), önállóan nem tehetők az oldalra.

## Hozzáadás

1. Nyisd meg az oldalt a Divi 5 Visual Builderben.
2. Add hozzá a **Supreme Content Timeline** modult.
3. A **Content** fülön vedd fel az első elemet (**Add New Item**). Érdemes 3-6 elemmel kezdeni.
4. Töltsd ki az elemek mezőit (cím, szöveg, kép vagy ikon).
5. A **Design** fülön állítsd be a színeket, a betűtípust és a térközt.
6. Mentsd el, és nézd meg a nyilvános oldalon.

Az elemek sorrendjét a szülő listájában húzással módosíthatod. A közös stílust a szülőn állítsd be.

## Szülő: Content

| Beállítás | Mit csinál |
|---|---|
| **Desktop layout** | A kártyák igazítása a középső vonalhoz képest asztali gépen. |
| **Tablet & mobile layout** | Tableten és telefonon felülírja az asztali elrendezést. A **Same as desktop** az asztali beállítást követi. |
| **Show card arrow** | Kis nyíl a kártyán az idővonal felé. |
| **Tree line animation** | A függőleges vonal és a lépéspontok animálva töltődnek görgetés közben. |
| **Animation duration** | A vonalanimáció egy szakaszának időtartama ezredmásodpercben. |
| **Animate items on scroll** | Minden idővonalsor (kártya, vonal, szemközti szöveg) akkor jelenik meg, amikor a látható területre ér. |
| **Item animation style** | Az **Alternate** az asztali elrendezést követi (például balra-jobbra váltakozva középső módban), a **Fade** csak az átlátszóságot mozgatja. |
| **Item animation duration** | Egy elem megjelenésének időtartama ezredmásodpercben. |
| **Image lightbox** | Az elemek képei kattintásra lightboxban nyílnak meg. |

## Szülő: Design

| Beállítás | Mit csinál |
|---|---|
| **Horizontal alignment** | A cím és a szöveg igazítása a kártyákon belül. |
| **Background** (kártya) | A kártya háttérszíne. |
| **Background** (szemközti címke) | A kártya szemközti oldalán álló kis címke háttérszíne. |
| **Width** | A szemközti címke szélessége. |
| **Pointer background** | A vonalon lévő pontozó háttérszíne. |
| **Active pointer background** | Az aktív pontozó háttérszíne (ha a vonalanimáció be van kapcsolva). |
| **Icon color**, **Active icon color**, **Icon size** (pontozó) | A pontozó ikonjának színe, aktív színe és mérete. |
| **Line color** | Az idővonal színe. |
| **Active line color** | Az aktív szakasz színe (ha a vonalanimáció be van kapcsolva). |
| **Line thickness** | A vonal vastagsága. |
| **Icon color**, **Icon background**, **Icon size** (kártya) | A kártyákon lévő ikon színe, háttere és mérete. |
| **Image width** | A kártyákon lévő kép szélessége. |
| **Image / icon alignment** | A kép vagy ikon igazítása, ha a szöveg fölött áll. |
| **Custom button alignment** | A gomb igazítása, ha a Divi gombstílus ki van kapcsolva (sima linkgomb). |

## Gyermek elem: Content

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Show image or icon** | Média megjelenítése a szöveg mellett vagy fölött. | be |
| **Image** | A feltöltött kép. | |
| **Use icon instead of image** | Kép helyett ikon. | be |
| **Icon** | A választott ikon. | |
| **Placement** | A média helye a címhez és a szöveghez képest. | top |
| **Title** | Az elem címe. | |
| **Description type** | Szerkesztőben írt formázott szöveg (**custom**) vagy tetszőleges shortcode kimenete. | custom |
| **Description** | A formázott leírás. | |
| **Shortcode** | A shortcode, ha a leírás típusa shortcode. | |
| **Custom pointer on timeline** | Az alapértelmezett pont helyett saját ikon vagy kép a középső vonalon. | ki |
| **Type** | A saját pontozó típusa: ikon vagy kép. | icon |
| **Image**, **Icon** (pontozó) | A saját pontozó képe vagy ikonja. | |
| **Label text** | Rövid szöveg a kártya szemközti oldalán (például dátum). Üresen rejtett. | |
| **Text** | A gomb felirata. | |
| **Link** | A gomb linkje. | |
| **Open in new tab** | A link új lapon nyílik. | |

## Gyermek elem: Design

A gyermek Design fülén megadott érték csak az adott elemet érinti.

| Beállítás | Mit csinál |
|---|---|
| **Horizontal alignment** | A cím, a leírás és a gomb igazítása az elemen belül. |
| **Background** | A szemközti címke háttérszíne. |
| **Custom alignment** | A gomb igazítása, ha a Divi gombstílus ki van kapcsolva. |
| **Icon color**, **Icon background**, **Icon size** | Az elem ikonjának színe, háttere és mérete. |
| **Image width** | A kép szélessége. |
| **Alignment (stacked layout)** | A kép vagy ikon igazítása, ha a szöveg fölött áll. |