Divi 5 modulok: Marquee (végtelen futószalag)

A Supreme Marquee végtelenül futó szalag logóknak, rövid szövegeknek és ikonoknak. A szülő modul szabályozza az irányt, a sebességet, az egér fölé vitel viselkedését, az elválasztókat, a szélek elhalványítását és a kettős sávot. Minden Supreme Marquee Item gyermekelem egy bejegyzés: opcionális szöveg, mellé ikon vagy kép. A szülő és a gyermek a modulkatalógusban egy modulnak számít.

A modul a Divi Supreme kategóriában van, a builder feliratai angolul maradnak.

Mit tud

• Négy irány: Left, Right, Up, Down (függőlegesnél a magasság Auto vagy Custom).
• Elemenként szöveg, kép vagy ikon (Add New Item).
• Logószűrők: színes hover, szürkeárnyalatos hover vagy mindig szürke, opcionális nagyítással.
• Elválasztó az elemek között: pont, ikon vagy egyéni szöveg, külön gyermekelem nélkül.
• Ellentétes irányú második sáv (egymás fölé rendezett „Trusted by” elrendezés).
• Széleken elhalványítás.
• Lejátszás/szünet gomb a látogatónak.
• Csökkentett mozgás: az Auto tiszteletben tartja a prefers-reduced-motion beállítást, ilyenkor a sáv áll.
• Divi Loop: az elemek ismételhetők, a szöveg és a kiemelt kép dinamikus tartalommal kötött.

Példa	Beállítás
Ügyfél- vagy partnerlogók	Vízszintes futószalag, szürkéből színesbe váltó hover.
Bejelentősáv	Rövid szövegek elválasztóval (pont vagy ·).
Funkció- vagy ikonsor	Ikonok és feliratok folyamatosan.
Függőleges hírsáv	Irány Up/Down, rögzített magasság.
Bejegyzésekből épített sáv	Loop a Marquee Itemen, a szöveg és a kép kötve.

Mikor ne használd:

• Hosszú bekezdéshez: az elemek szövege rövid maradjon, törzsszöveghez használj szöveg vagy blog modult.
• Fontos, interaktív tartalomhoz, ha minden elemnek egyszerre olvashatónak kell lennie: ilyenkor statikus elrendezés jobb.
• Videóhoz vagy összetett kártyákhoz: az elem szöveg, kép vagy ikon lehet, teljes szekció nem.

Hozzáadás

1. Nyisd meg az oldalt a Divi 5 Visual Builderben.
2. Add hozzá a Supreme Marquee modult.
3. Minden logóhoz vagy kifejezéshez használd az Add New Item gombot.
4. A Content → Marquee Settings alatt állítsd be az irányt, a sebességet, a hover viselkedést és a többit.
5. A Design alatt formázd a réseket, a szöveget, az ikonokat és a képeket.

Logósáv lépésről lépésre

1. Add hozzá a Supreme Marquee modult.
2. Minden gyermeken hagyd kikapcsolva a Use Icon kapcsolót, tölts fel egy képet az Image mezőben, a szöveget hagyd üresen (vagy írd be a márka nevét).
3. A szülőn az Direction legyen Left, a Speed kb. 40 px/s.
4. Az Image Filter alapból Color on Hover. A Design alatt állítsd be az Image Max Height értékét (alapból 48px).
5. Opcionálisan kapcsold be az Edge Fade és a Pause When Offscreen opciót.
6. Mentsd az oldalt, és nézd meg a weboldalon.

Sáv bejegyzésekből (Loop)

1. A Marquee Itemen (vagy a szülőn, a Loop beállítástól függően) kapcsold be a Loopot.
2. Kösd a Text mezőt a Post Title-höz, az Image mezőt a Featured Image-hez (dinamikus tartalom).
3. A szülőn az Image Size legyen az a WordPress-méret, amit a Loop képeihez használni akarsz.
4. Próbáld ki elég bejegyzéssel, hogy a sáv simán körbeérjen.

Irány és sebesség

Beállítás	Megjegyzés
Direction	Left (alapérték), Right, Up, Down.
Height / Custom Height	Csak függőlegesnél. Az Auto a legmagasabb elemhez igazodik, a Custom rögzített magasságot ad (alapból 200px).
Speed (px/s)	Pixel/másodperc, 1 és 200 között, alapból 40. Az időtartamot a modul a mért elemlistából számolja, így a sebesség elemváltozáskor sem módosul. A Divi reszponzív töréspontjait támogatja (asztali, tablet, telefon).

Hover és szünet

Beállítás	Megjegyzés
Hover Interaction	None, Pause (alapérték), Reverse vagy Speed Up.
Hover Speed Multiplier	Speed Up esetén, 1,25 és 4 között, alapból 2.
Pause When Offscreen	Alapból be: szünet, amíg a modul nem látszik a képernyőn.
Play / Pause Control	Opcionális gomb a látogatónak (alapból ki).

Régebbi elrendezésekben még lehet tárolva „Pause on Hover” érték: a Divi 5 ezt Hover Interaction = Pause beállításra képezi le.

Kettős sáv, eltolás, elválasztó

Beállítás	Megjegyzés
Opposite Twin Track	Második sáv ellentétes irányban (alapból ki). A rés a Design → Twin Gap alatt állítható.
Start Offset (%)	Elindítja a ciklust valahol a közepén, hogy két marquee ne fusson szinkronban (0 és 100 között, alapból 0).
Separator	None (alapérték), Dot, Icon vagy Custom Text (alapból ·).

Képek és kisegítő lehetőségek

Beállítás	Megjegyzés
Image Size	A WordPress-méret az elem- és Loop-képekhez (alapból Full).
Image Filter	None, Color on Hover (alapérték), Grayscale on Hover, Always Grayscale.
Edge Fade	Alapból be, a mérete a Designban állítható (alapból 80px).
Reduced Motion	Auto (alapérték) vagy Off.

A szülő beállításai

Content → Marquee Settings

Beállítás	Mit csinál	Alapérték
Direction	Left, Right, Up, Down.	left
Height	Csak függőlegesnél: Auto vagy Custom.	auto
Custom Height	Rögzített magasság, ha a Height Custom.	200px
Speed (px/s)	A haladás sebessége, reszponzív.	40
Hover Interaction	None, Pause, Reverse, Speed Up.	pause
Hover Speed Multiplier	Speed Upnál.	2
Pause When Offscreen	Szünet a képernyőn kívül.	Be
Start Offset (%)	A ciklus fáziseltolása.	0
Opposite Twin Track	Ellenirányú második sáv.	Ki
Separator	None, Dot, Icon, Custom Text.	none
Separator Text	Ha a Separator Custom Text.	·
Separator Icon	Ha a Separator Icon.
Play / Pause Control	Szünet gomb a látogatónak.	Ki
Edge Fade	Halványítás a sáv szélein.	Be
Image Size	WP képméret az elemekhez és a Loophoz.	full
Image Filter	None, Color on Hover, Grayscale on Hover, Always Grayscale.	color_on_hover
Reduced Motion	Auto vagy Off.	auto

Ugyanitt van még a Loop (ha a Divi biztosítja), a Link, a Background és az Admin Label.

Design (Advanced)

A szokásos Divi csoportok (HTML Attributes, Custom CSS, Conditions, Interactions, Visibility, Transitions, Position, Scroll) mellett:

Beállítás	Mit csinál	Alapérték
Item Gap	Az elemek közti hely.	32px
Media / Text Gap	A kép vagy ikon és a szöveg közti rés.	12px
Item Alignment	Start, Center, End (a keresztirányban).	center
Twin Gap	A két sáv közti rés, ha a kettős sáv be van kapcsolva.	16px
Edge Fade Size	Az elhalványítás mérete.	80px
Separator Color / Size	Az elválasztó színe és mérete, ha nem None.	/ 16px
Image Max Height	A képek magassági korlátja, a szélesség természetes marad.	48px
Image Hover Scale	Nagyítás hoverre, ha az Image Filter nem None.	1.05
Text	Az elemfeliratok betűtípusa.	16px / 1.4em
Icon Color / Size	Az ikonok alapszíne és mérete.	/ 24px

A méret, térköz, szegély, árnyék, szűrők, transzformáció és animáció csoportok is érvényesek.

Supreme Marquee Item (gyermekelem)

Egy bejegyzés a futószalagon: opcionális szöveg, mellé ikon vagy kép (nem mindkettő). A sáv viselkedését a szülőn állítsd, az elemen csak az elemre vonatkozó beállítások vannak.

Elem hozzáadása:

1. Jelöld ki a szülő Supreme Marquee modult.
2. Kattints az Add New Item gombra (vagy duplikálj egy meglévő elemet).
3. Add meg a Text mezőt, majd vagy a Use Icon és az Icon, vagy az Image (és az Image Alt Text) mezőt.
4. Ha kell, a Design fülön írd felül az elem beállításait.

Content

Beállítás	Mit csinál	Alapérték
Text	Opcionális felirat (dinamikus tartalom és Loop Post Title is használható).
Use Icon	Ikon jelenik meg kép helyett.	Ki
Icon	Az ikon, ha a Use Icon be van kapcsolva.
Image	A kép, ha a Use Icon ki van kapcsolva (dinamikus tartalom és Featured Image is megy).
Image Alt Text	A kép ALT szövege.

Ugyanitt: Link, Background, Loop (ha a Divi biztosítja), Admin Label.

Design

Beállítás	Mit csinál	Alapérték
Text	Az elemfelirat betűtípusa.	16px / 1.4em
Icon Color / Size	Az elem ikonjának színe és mérete.	/ 24px
Image Max Height	Felülírja a szülő értékét, üresen örökli.
Image Hover Scale	Felülírja a szülő értékét, üresen örökli.

A méret, térköz, szegély, árnyék, szűrők és transzformáció csoportok is érvényesek.

Tippek

• A Hover Interaction a mérvadó beállítás, a régi Pause on Hover adatot már nem használja a felület.
• Logóknál tartsd egységesen az Image Max Height értéket, és használj Color on Hover vagy Grayscale on Hover szűrőt a rendezett összhatásért.
• Ha két marquee szinkronban mozogna, használd a Start Offset opciót.
• A Reduced Motion → Auto a kisegítő lehetőségeknek megfelelő alapérték, csak akkor kapcsold Off-ra, ha szándékosan mindenkinek mozgást szeretnél.
• Üres sávnál vagy kevés elemnél a sáv nem fut simán, tehát elég elem (vagy Loop-találat) kell.
• Az elem vagy ikont, vagy képet használ: a Use Icon bekapcsolása elrejti a képmezőket.
• Loopos logórácsnál kösd az Image mezőt a Featured Image-hez, a Text maradjon üresen (vagy kösd a címhez a hozzáférhetőségért).