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

> A Supreme Marquee és a Supreme Marquee Item modul beállításai: logók, rövid szövegek és ikonok végtelen görgetése.

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).