# Divi 5 modulok: fülek és szöveges effektek

> A Divi 5 Visual Builder haladó fül, animált színátmenetes szöveg, animált címsor és blokkos felfedésű szöveg moduljának beállításai.

Ebben a fejezetben a Divi 5-ös Visual Builderben használható fülmodul és három szöveges effekt beállításait találod. A modulok a **Divi Supreme** kategóriában vannak a modulválasztóban. A beállítások feliratai a builderben angolul maradnak, ezért itt is úgy szerepelnek, ahogy a felületen látod őket.

Minden modul **Content** és **Design** fülén a szokásos Divi-csoportok is elérhetők (háttér, méret, térköz, szegély, árnyék, animáció), ahol a modul támogatja őket. A Divi 4 alatt írt elrendezések Divi 5-ben való megnyitáskor átalakulnak. A tabletre és telefonra szóló külön értékeket a reszponzív beállításokkal adhatod meg.

A modulokat a **Divi Supreme Pro → Modulok beállításai** fülön kell bekapcsolnod, hogy megjelenjenek a modulválasztóban.

## Haladó fülek (Advanced Tabs)

Fülekből álló tartalomblokk. Egyszerre egy szakasz látszik, így a hosszú tartalom nem kell, hogy egymás alá kerüljön. Jó választás GYIK-oldalakhoz, terméktulajdonságok csoportosításához vagy lépésről lépésre haladó magyarázatokhoz. Egyetlen rövid bekezdéshez felesleges, ott elég a sima szöveg.

A modul szülő és gyermek elemekből áll: a szülő a **Supreme Advanced Tabs**, az egyes fülek a **Supreme Advanced Tabs Child** elemek. A fület mindig a szülő **Content** füléről add hozzá (új elem gombbal), gyermek elemet külön nem tehetsz az oldalra. A fülek sorrendjét a szülő listájában húzással változtathatod, az elemeket duplikálhatod is.

A Divi Library elrendezésekből felépített tartalom a builderben néha nem pontosan jelenik meg. A weboldalon viszont helyesen látszik.

Első lépések:

1. Nyisd meg az oldalt a Divi 5 Visual Builderrel.
2. Add hozzá a **Supreme Advanced Tabs** modult a **Divi Supreme** kategóriából.
3. A **Content** fülön vedd fel az első fület, és töltsd ki a címét, a tartalmát.
4. A **Design** fülön állítsd be a színeket, a betűket és a távolságokat.
5. Mentsd az oldalt, és nézd meg a weboldalon.

### Szülő: Content

| Beállítás | Mit csinál |
|---|---|
| **Aria Label** | A fülsor akadálymentes neve, amit a képernyőolvasó felolvas. Akkor töltsd ki, ha az alapértelmezett név nem elég egyértelmű. |
| **Layout** | A fülek elrendezése. |
| **Position** | A fülsor helye. Az elrendezéstől függően vízszintes, függőleges és oszlopos helyzetnél külön lehetőséget kapsz. |
| **Mobile/Tablet Position** | A fülsor helye tableten és telefonon (függőleges és oszlopos elrendezéshez külön). |
| **Equal Height** | A fülek tartalma egyenlő magas lesz. |
| **Trigger** | A váltás módja: kattintás vagy egér ráhúzása. |
| **Show Arrow For Active Tab** | Nyilat mutat az aktív fülnél. |
| **Content Animation** | Animáció a tartalom külső burkolóján. |
| **Inner Content Animation** | Animáció a tartalom belsején. |
| **Tabs Alignment** | A fülek igazítása (vízszintes és függőleges elrendezéshez külön beállítás). |
| **Tabs Image/Icon Placement** | A fül képének vagy ikonjának helye. |
| **Enable Deep Link** | A böngésző címe a fülváltással együtt változik, így egy adott fülre mutató címet bárhová bemásolhatsz. |
| **Enable Anchor Scroll** | Bekapcsolva horgonylinkkel is megnyithatsz egy fület. |
| **Enable Image Lightbox** | A tartalom képe lightboxban nyílik meg. |
| **Make Stick Tabs On Top** | Görgetéskor a fülsor felül marad. |
| **Stick Tabs Offset** | A felül maradó fülsor eltolása (a **Make Stick Tabs On Top** bekapcsolása után jelenik meg). |
| **Auto Scroll On Mobile** | Mobilon váltáskor a tartalomhoz görget. |

### Szülő: Design

| Csoport | Beállítások |
|---|---|
| Fülsor burkoló | **Width**, **Background**, **Tabs Wrapper Alignment** |
| Fülek | **Gap** (a fülek közti rés); normál állapotban **Background**, **Title Color**, **Subtitle Color**; aktív állapotban ugyanezek külön |
| Kép és ikon a fülön | **Image Width**, **Icon Font Size**, **Icon Color**, **Active Icon Color** |
| Kép és ikon a tartalomban | **Alignment**, **Image width**, **Icon size**, **Icon color** |
| Tartalom | **Background**, a **Style** választóval a tartalom címének vagy szövegtörzsének betűbeállításai |
| Gomb | **Button Alignment** |

### Gyermek elem (Advanced Tabs Child): Content

| Beállítás | Mit csinál |
|---|---|
| **Title** | A fül címe. |
| **Subtitle** | A fül alcíme, a cím alatt jelenik meg. |
| **Tab appearance** | Normál és aktív állapot között vált, hogy mindkettőhöz külön adhass meg képet vagy ikont. |
| **Use Icon / Image** | Kép vagy ikon a fülön. |
| **Image** | A fül képe. |
| **Use Icon**, **Icon** | Ikon a kép helyett, és az ikon kiválasztása. |
| **Content Type** | A tartalom típusa (szöveges tartalom vagy shortcode). |
| **Shortcode** | A beillesztendő shortcode (ha a tartalom típusa ezt kéri). |
| **Title** (tartalom) | A tartalom címe. |
| **Content** | A szövegtörzs. |
| **Use Icon / Image**, **Image**, **Use Icon**, **Icon** (tartalom) | Kép vagy ikon a tartalmi területen. |
| **Image/Icon Placement** | A tartalom képének vagy ikonjának helye. |
| **Button Text**, **Button Link URL**, **Button Link Target** | A tartalom gombja: felirat, cél, és hogy ugyanabban az ablakban vagy új lapon nyíljon meg. |
| **Title URL**, **Title URL Target** | A cím linkje és célja. |
| **Subtitle URL**, **Subtitle URL Target** | Az alcím linkje és célja. |

### Gyermek elem: Design

A gyermek elem **Design** füle az egyes fülre vonatkozik, és felülírja a szülő beállításait: **Image Width**, **Icon Font Size**, az **Icon colors** választó szerint **Icon Color** és **Active Icon Color**, a tartalom képének **Alignment**, **Image width**, **Icon size**, **Icon color** értéke, valamint **Button Alignment**.

Tipp: kezdj 3 és 6 fül között, és a közös megjelenést a szülőn állítsd be, a gyermek elemen csak a kivételeket.

## Animált színátmenetes szöveg (Animated Gradient Text)

Mozgó színátmenettel színezett szöveg. Rövid kifejezéshez, címsorhoz való, hosszú folyószövegnél ne használd. A mozgás zavarhatja az olvasást, ezért fontos bekezdéshez statikus szöveget válassz.

**Content**

| Beállítás | Mit csinál |
|---|---|
| **Animated Gradient Text** | A szöveg, amelyre a színátmenet kerül. |
| **Gradient Direction** | A színátmenet szöge fokban. |
| **Animation Speed (s)** | Egy teljes színátmenet-ciklus hossza másodpercben. |

**Design**

| Beállítás | Mit csinál |
|---|---|
| **Heading HTML Tag** | A címsor jelölése. |
| **#1 Gradient Color** … **#4 Gradient Color** | A színátmenet négy színe. |

## Animált címsor (Animated Headlines)

Animált címsor, amelyben a szöveg egy része mozog. A címsor három részből áll: **Prefix** (előtte álló szöveg), az animált rész és **Suffix** (utána álló szöveg). Hero-címsorokhoz, szekciócímekhez, akciós sorokhoz használható. Rövid kifejezésre való.

**Content**

| Beállítás | Mit csinál |
|---|---|
| **Animated Headline Text** | Az animált szöveg. |
| **Prefix**, **Suffix** | A szöveg előtti és utáni, állandó rész. |
| **Effects** | Az animáció fajtája. A fajtától függően a lenti beállítások közül csak a hozzá tartozók látszanak. |
| **HTML Tag** | A címsor jelölése. |
| **Animation Delay** | Az animáció késleltetése. |
| **Letters Delay** | A betűk közti késleltetés (a gépelős effektnek külön **Letters Delay** mezője van). |
| **Type Selection Duration** | A gépelős effektnél a kijelölés időtartama. |
| **Clip Reveal Duration**, **Clip Reveal Animation Delay** | A vágásos felfedés időtartama és késleltetése. |
| **Bar Width**, **Bar Height**, **Bar Color** | A hozzá tartozó sáv mérete és színe. |
| **Text Highlight Color** | A kiemelés színe. |
| **Text Color** | A szöveg színe. |

**Design**

| Beállítás | Mit csinál |
|---|---|
| **Display** | A prefix, az animált rész és a suffix megjelenítési módja (mindhárom részhez külön). |
| **Prefix Background Color** | A prefix háttérszíne. |
| **Animated Headline Background Color** | Az animált rész háttérszíne. |
| **Suffix Background Color** | A suffix háttérszíne. |

## Blokkos felfedésű szöveg (Block Reveal Text)

Először egy dekoratív színes blokk rajzolódik ki, majd ahogy zsugorodni kezd, alóla felfedi a szöveget. Négy animációtípus közül választhatsz. Rövid szövegekhez való.

| Beállítás | Mit csinál |
|---|---|
| **Block Reveal Text** | A felfedendő szöveg. |
| **Block Reveal Animation** | Az animáció típusa. |
| **Block Reveal Color** | A takaró blokk színe. |
| **Delay** | Az animáció indulásának késleltetése. |
| **Animate in Viewport** | Mikor induljon el az animáció, amikor a modul a látható területre ér. |