Divi 5 modulok: tartalmi idővonal

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.