# Modulok: szöveg és tartalom

> A szöveges effektek, fülek, gombok, listák és tartalmi elemek moduljainak beállításai.

Ebben a fejezetben a szöveges effektek, a fülek, a gombok, a listák és a tartalmi elemek moduljait találod. A modulok a Divi Builderben, a modulválasztóban jelennek meg, ha a **Modulok beállításai** fülön be vannak kapcsolva. A beállítások a modul ablakának **Content**, **Design** és **Advanced** füleiben vannak.

A Divi Builder beállításainak feliratait angolul, félkövéren írjuk, ahogy a felületen látod. Az **Advanced** fül minden modulnál ugyanazt tudja: egyéni CSS-azonosítót és osztályt adhatsz a modulnak, saját CSS-t írhatsz hozzá, és beállíthatod, hogy mely eszközökön látszódjon.

## Divi haladó fülek

Fülekből álló tartalmi blokk animációkkal. A fülek tartalma lehet egyszerű szöveg vagy a Divi Library egy elrendezése. Az elrendezés a Divi Builderben néha nem jelenik meg pontosan, a weboldalon viszont helyesen látszik.

Fület a **+ Add new Item** gombbal adsz hozzá. Minden fül saját Content, Design és Advanced beállításokat kap. A hozzáadott elemet szürke sáv jelzi a címével, rajta három gombbal: szerkesztés, másolás, törlés.

### Content: általános beállítások

| Beállítás | Mit csinál |
|---|---|
| **Layout** | A fülek elrendezése: vízszintes (Horizontal), függőleges (Vertical) vagy oszlop (Column). |
| **Position** | A fülsor helye: fent vagy lent, illetve bal vagy jobb oldalon, az elrendezéstől függően. |
| **Trigger** | A váltás módja: **Click** (kattintás) vagy **Hover** (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. |
| **Tabs Image/Icon Placement** | A fül képének vagy ikonjának helye: balra, jobbra vagy fent. |
| **Enable Deeplink** | A böngésző címsora a fülváltással együtt változik. A címet bárhová bemásolhatod, és megnyitáskor az adott fül lesz nyitva. |
| **Enable Image Lightbox** | A tartalom képe lightboxban nyílik meg. |
| **Make Tabs Stick to Top** | Görgetéskor a fülsor felül marad (hosszú tartalomnál hasznos). Megjelenik a felső eltolás értéke is. |
| **Auto Scroll on Mobile** | Mobilon a tartalomhoz görget váltáskor, sok fülnél ez megkönnyíti az olvasást. |

### Design

| Csoport | Beállítások |
|---|---|
| Tabs Wrapper | **Width**, **Margin**, **Padding**, **Background**, **Alignment**, valamint szegély, lekerekítés és árnyék. |
| Image & Icon | **Image Width**, **Icon Font Size**, **Icon Color** (normál állapot), **Active Icon Color** (aktív állapot), **Margin**, **Padding**, szegély, lekerekítés, árnyék. |
| Content Image & Icon | A tartalmi terület képe vagy ikonja: **Margin**, **Padding**, **Icon Font Size**, **Image Width**, szegély, lekerekítés, árnyék. |
| Tabs | **Gap** (fülek közti rés), **Inactive Background**, **Active Background**, **Inactive Color**, **Active Color**, továbbá betűtípus, méret, vastagság, szegély, lekerekítés, árnyék és aktív árnyék. |
| Content | **Background**, **Margin**, **Padding**, a cím és a szöveg betűbeállításai, szegély, lekerekítés, árnyék. |
| Button | A **Use Custom Styles** bekapcsolása után a gombot úgy formázod, mint a Divi gombjait (betű, méret, vastagság, margó, belső margó, lekerekítés, szegély, árnyék). |

### Fül (Tab Item)

- **Tabs**: **Title** (a fül címe), **Use Image/Icon** (kép vagy ikon a fülön, a bekapcsolás után választhatsz).
- **Content Type**: **Content** vagy **Divi Library**. A Divi Library-nél a könyvtárból választasz elrendezést.
- A **Content** típusnál: **Title** (a tartalom címe), **Content** (a szövegtörzs), **Use Image/Icon**, **Image/Icon Placement** (balra vagy fent), **Button Text**, **Button URL**, **Button Link Target** (**Same Window** vagy **New Tab**).
- Design: a fül képe és ikonja (**Image Width**, szegély, lekerekítés, árnyék), a tartalom képe és ikonja (**Margin**, **Padding**, szegély, lekerekítés, árnyék), a fül és a tartalom betűbeállításai, valamint a **Use Custom Styles** a gombhoz. Mindez csak arra az elemre vonatkozik.

## Divi animált színátmenetes szöveg

Mozgó színátmenetű szöveg.

- **Animated Gradient Text**: a szöveg, amire a színátmenet kerül.
- **Gradient Direction**: a színátmenet iránya, érték beírásával vagy csúszkával.
- **Animation speed (s)**: az animáció sebessége.
- **Heading HTML Tag** (Design): a címsor jelölése H1 és H6 között.
- Színek: négy szín választható. Ha csak két színt szeretnél, az első két színmezőbe ugyanazt a színt írd, és ismételd meg a másik kettőnél is. A szöveg mérete, vastagsága és betűtípusa is állítható.

## Divi szöveges jelvények

Szöveg mellé jelvényt tesz, a fontos szavak kiemelésére.

| Beállítás | Mit csinál |
|---|---|
| **Main Text** | A fő szöveg. |
| **Badges Text** | A jelvény szövege. |
| **Badges Placement** | A jelvény a fő szöveg előtt vagy után áll. |
| **Background Color**, **Background Image** | A modul háttere. |
| **Admin Label** | A modul neve a builderben, könnyebb azonosításhoz. |

Design: a fő szöveg betűbeállításai, a modul szegélye, maximális szélessége, margója és belső margója. A jelvénynél: **Background Color** (csak a jelvény háttere) és **Gap** (a fő szöveg és a jelvény közti rés).

## Divi blokkos szövegfelfedés

Először egy díszítő blokk rajzolódik ki, majd összehúzódva felfedi alatta a szöveget.

- **Block Reveal Text**: a felfedendő szöveg.
- **Block Reveal Animation style**: az irány, négy közül: Left to Right, Right to Left, Top to Bottom, Bottom to Top.
- **Block Reveal Color**: a blokk színe.
- **Delay**: az animáció késleltetése.
- **Animate in Viewport**: az animáció csak a látómezőbe érve indul.
- Design: a szöveg formázása, mint minden Divi szövegmodulnál, és a **Heading HTML Tag** (H1 és H6 között).

## Divi kettős címsor

Három külön formázható szövegrészből álló címsor: elöl, középen és hátul.

- **Before Text**, **Middle Text**, **After Text**: a három szövegrész. A középső szövegnél tegyél szóközt a szöveg elé és mögé.
- **Heading HTML Tag**: mindhárom rész jelölése H1 és H6 között.
- **Main Text**: a három rész közös betűbeállításai.
- Részenként: **Background Color**, **Margin and Spacing** és **Display** (**Inline Block**: a többi résszel egy sorban marad; **Block**: külön sorba kerül). Ezen felül színt, szövegárnyékot, szegélyt, lekerekítést is állíthatsz részenként.

## Divi Glitch Text

Hibaeffektes (glitch) szöveg. Mértékkel használd, mert könnyen elvonja a figyelmet.

- **Glitch Text**: a szöveg.
- **Glitch Effect**: az effekt animációjának típusa.
- **Background Color**, **Background Image**, **Admin Label**.
- Design: szövegszín, igazítás, betűtípus, betűméret, betűköz, sormagasság, szegély, maximális szélesség, margó és belső margó.

## Divi színátmenetes szöveg

Színátmenetes szöveg kódolás nélkül, a Divi saját háttér-színátmenet eszközével.

- **Gradient Text**: a szöveg.
- **Background**: itt állítod be a színátmenetet a Divi beépített eszközével.
- Design: szövegszín, igazítás, betűtípus, méret, betűköz, sormagasság, szegély, maximális szélesség, margó és belső margó.

## Divi maszkolt szöveg

A szöveget egy kép tölti ki.

- **Mask Text**: a szöveg.
- **Background Image** (Mask Image): a Médiatárból választott kép, ami a szöveg hátterébe kerül. A kép méretét, pozícióját és ismétlődését is állíthatod.
- **Heading Tag** (Design): H1 és H6 között.
- **Mask Text** (Design): szín, méret, vastagság és betűtípus.

## Divi betűk összekeverése

A szöveg betűnként, véletlenszerű karakterek közül áll össze.

| Beállítás | Mit csinál |
|---|---|
| **Before Text** | Szöveg az effekt előtt. |
| **Shuffle Text** | A szöveg, ami az összekeverés után látszik. |
| **Shuffle Text on a new line** | A keverős szöveg új sorba kerül. |
| **After Text** | Szöveg az effekt után. |
| **After Text on a new line** | Az utána álló szöveg új sorba kerül. |
| **Shuffle Speed (in ms)** | Az animáció sebessége ezredmásodpercben. |
| **Duration (in s)** | Mennyi idő után jelenjen meg a végleges szöveg. |
| **Overwrite Random Shuffle Text** | Saját karaktersor a véletlen karakterek helyett, szóköz nélkül. |

Design: a Before, Shuffle és After szöveg színe, mérete, vastagsága és betűtípusa külön állítható.

## Divi szövegelválasztó

Címsor vonallal, a vonalak között szöveggel.

- **Divider Text**: a szöveg.
- **Background Color**, **Background Image**, **Admin Label**.
- Design, **Color**: az elválasztó vonal színe (csak a vonalé).
- Design, **Styles**: **Divider Style** (például folytonos, pontozott, szaggatott), **Divider Position** (függőleges igazítás).
- Design, **Text**: **Text Alignment**.
- Design, **Divider Text**: a címsor szintje, és a szöveg a Divi szokásos módján formázható.
- Design, **Sizing**: **Divider Weight** (a vonal vastagsága), **Text Gap** (a szöveg és a vonal közti rés), **Height** (a modul függőleges helye pixelben).

## Divi szövegjelölés

Kézzel rajzolt hatású, animált kiemelés a szöveg fontos része körül. Hét típus közül választhatsz.

| Beállítás | Mit csinál |
|---|---|
| **Before Text** | Szöveg a jelölt rész előtt. |
| **Notation Text** | A jelölt szöveg, erre kerül az animáció. |
| **After Text** | Szöveg a jelölt rész után. |
| **Type** | A jelölés típusa: Underline, Box, Circle, Hightlight, Strike Through, Crossed Off, Bracket. |
| **Color** | A jelölés színe. |
| **Stroke Width** | A vonal vastagsága. |
| **Iterations** | Hány menetben rajzolódik ki. Alapból kettő, például aláhúzásnál balról jobbra, majd vissza. |
| **Animate in Viewport** | Egyéni érték, hogy a látómező mely pontján induljon az animáció. |
| **Delay** | Késleltetés az animáció indulása előtt. |

Design:

- **Heading HTML Tag**: a jelölt és a körülötte álló szövegek jelölése.
- **Main Text**: a három szövegrész közös formázása.
- Részenként: **Background Color**, **Margin and Spacing**, **Display** (**Inline Block**, **Inline** vagy **Block**). Az **Inline** olyan, mint az Inline Block, de belső margó mellett is egy sorban marad; a margó ennél nem működik. A **Block** külön sorba teszi a szöveget. Színt, szövegárnyékot, szegélyt és lekerekítést is adhatsz.

## Divi szövegútvonal

A szöveget egy alakzat vonalára illeszti. Választhatsz előre megadott alakzatot, vagy saját SVG-kódot.

- **Text**: az útvonalra kerülő szöveg.
- **Path Type**: hat előre megadott alakzat, vagy **Custom**, ahol saját SVG-kódot adhatsz meg.
- **Text Direction**: a szöveg iránya.
- **Show Path**: magát az útvonalat is megjeleníti.
- Design, **Alignment**: a modul igazítása.
- Design, **Text Path**: **Path Color** és **Path Width** (csak ha a Show Path be van kapcsolva), **Size** (mobilra külön is megadható a reszponzív opcióval), **Rotate**, **Word Spacing**, **Starting Point**.
- Design, **Title Text**: a szöveg betűtípusa, színe, vastagsága, mérete.

## Divi szövegforgató

Egy mondat egyik szava több szöveg között váltakozik animációval.

| Beállítás | Mit csinál |
|---|---|
| **Rotator Text** | A forgó szövegek. Tetszőleges számút adhatsz hozzá a **+ Add New Item** gombbal. |
| **Before Rotator Text** | Animáció nélküli szöveg a forgó rész előtt. |
| **After Rotator Text** | Animáció nélküli szöveg a forgó rész után. |
| **Rotate Animation** | Az animáció típusa, több mint 36 közül. |
| **Rotate Speed** | A váltás sebessége. |
| **Pause on Hover** | Egérráhúzásra megáll a forgás. |
| **Change on Click** | Kattintásra a látogató léptetheti a szót. |

Design:

- **Heading HTML Tag**: a forgó és a körülötte álló szövegek jelölése.
- **Text**: a három szövegrész közös formázása.
- Részenként: **Background Color**, **Margin and Spacing**, **Display** (**Inline Block** vagy **Block**), valamint szín, szövegárnyék, szegély, lekerekítés.

## Divi gépelési effektus

Betűnként gépeli ki a szöveget, majd törli, és jön a következő mondat.

### Content

- **Before Text**: állandó szöveg a gépelt rész előtt.
- **Typing Effect Text**: a gépelt szövegek. A mondatokat a `|` jellel válaszd el, például `szöveg1|szó|animáció`.
- **Typing Text on a new Line**: a gépelt szöveg új sorba kerül.
- **After Text**: állandó szöveg a gépelt rész után.
- **After Text on a new Line**: az utána álló szöveg új sorba kerül.
- **Admin Label**: a modul neve a builderben.

### Typing Effect

| Beállítás | Mit csinál |
|---|---|
| **Use Loop** | Végtelen ismétlés. |
| **Remove Cursor After Completed** | Csak akkor látszik, ha a **Use Loop** ki van kapcsolva. A befejezés után eltünteti a kurzort. |
| **Typing Speed (in ms)** | A gépelés sebessége, kisebb érték gyorsabb gépelést ad. |
| **Typing Backspacing (in ms)** | A törlés előtti késleltetés. |
| **Back Delay (in ms)** | Késleltetés a törlés előtt. |
| **Use Typing FadeOut** | Törlés helyett elhalványul a szöveg. |
| **Use Typing Shuffle** | A mondatok sorrendje véletlenszerű. |
| **Cursor Character** | Egyéni kurzorjel, alapból a `|`. Bármilyen karakter, betű vagy szám megadható. |
| **Animate in Viewport** | Hol induljon az effekt a látómezőbe érve, például 50% vagy 80%. |
| **Repeat Animation in Viewport** | Az effekt újraindul, ha a modul ismét a látómezőbe kerül. |

### Design

- **Before Text** és **After Text**: **Background Color**, **Padding**, valamint betűtípus, méret, szín, vastagság.
- **Typing Styles**: **Cursor Color** (alapból a címsor betűszíne), **Background Color** és **Padding** a gépelt szövegnek.
- Ezen felül szövegszín, igazítás, betűköz, sormagasság, szegély, maximális szélesség, margó és belső margó.

## Divi tartalomváltó

Két tartalom között váltó kapcsoló, például árazási táblákhoz vagy étlapokhoz. A Divi Library elrendezése a builderben néha nem látszik pontosan, a weboldalon helyes.

### Content

A **Content One** és a **Content Two** külön-külön:

- **Heading**: a kapcsoló felirata.
- **Content Type**: **Custom Content** (saját szöveg, kép), **Library** (Divi Library elrendezés) vagy **Shortcode** (a megadott shortcode tartalma jelenik meg).

### Design

| Csoport | Beállítások |
|---|---|
| Switcher | **Switcher Size**, **Alignment** (közép, bal, jobb), **Switcher Primary Background Color** (alap állapot), **Switcher Secondary Background Color** (váltás után), **Switcher Inner Color** (a gomb, ami jelzi az aktív oldalt). |
| Heading One, Heading Two | **Heading Level** (H1 és H6 között), betűtípus, méret, szín, vastagság, szövegárnyék. |
| Content One, Content Two | **Content Background**, **Content Padding**, **Content Spacing Top**, **Make this Layout Fullwidth**, szövegbeállítások. |

## Divi GYIK

Gyakori kérdések listája, nyitható és zárható elemekkel.

### Content: általános beállítások

| Beállítás | Mit csinál |
|---|---|
| **Gap** | Rés az elemek között. |
| **Make Accordion** | Egyszerre csak egy elem lehet nyitva, a többi automatikusan bezárul. |
| **Open First Item** | Az első elem alapból nyitva van. |
| **Enable Schema Support** | A kérdések megjelenhetnek a Google és más keresők találatai között. |
| **Use Image** | Az összes elemhez ugyanaz a kép tartozik a váltóikonnál. Megjelenik a **Toggle Image** panel. |
| **Animate Toggle Icons** | A váltóikon animálva változik nyitáskor és záráskor. |
| **Open FAQ Icon** | Az ikon nyitott állapotban. |
| **Close FAQ Icon** | Az ikon zárt állapotban. |
| **Icon Placement** | Az ikon helye. Jobbra téve az ikon jobbra kerül, a kép (ha van) balra. |
| **Open Image**, **Close Image** | A kép nyitott és zárt állapotban (csak ha a **Use Image** be van kapcsolva). |

### Design

Mindegyik csoportban állíthatsz szegélyt, lekerekítést és árnyékot is.

| Csoport | Beállítások |
|---|---|
| Open State Title, Close State Title | Betűtípus, méret, szín, vastagság nyitott és zárt állapotban. |
| Toggle Open State | **Open Background Color**, **Margin**, **Padding**. |
| Toggle Close State | **Close Background Color**, **Margin**, **Padding**. |
| Image Open State, Image Close State | **Width**, **Margin**, **Padding**. |
| Icon Open State | **Open Icon BG Color**, **Open Icon Color**, **Margin**, **Padding**, **Open Icon Font Size**. |
| Icon Close State | **Close Icon BG Color**, **Close Icon Color**, **Margin**, **Padding**, **Close Icon Font Size**. |
| Content | A válasz szövegének betűbeállításai. |

### GYIK-elem

Elemet a **+ Add new Item** gombbal adsz hozzá, a szürke sávon szerkesztheted, másolhatod, törölheted.

- **Title** és **Content**: a kérdés és a válasz.
- **Use Image**: ennél az elemnél külön kép a váltóhoz, nyitott és zárt állapotra.
- **Open FAQ Icon**, **Close FAQ Icon**, **Open Image**, **Close Image**: elemenkénti ikon és kép.
- Az elem Design füle ugyanazokat a csoportokat tartalmazza, mint a modul Design füle, de csak az adott elemre érvényes. Ha minden elemnek ugyanolyan legyen, a modul Design füléjén állítsd.

## Divi gomb

Két gomb egymás mellett, köztük választható szöveggel. A gombok különféle hivatkozástípusokat, lightboxot és súgóbuborékot (tooltip) is tudnak.

### Content: szövegek

- **Button #1 Text**, **Button #2 Text**: a két gomb felirata.

### Content: hivatkozások

A beállítások mindkét gombnál azonosak (Button #1 és Button #2).

| Beállítás | Mit csinál |
|---|---|
| **Link Type** | A hivatkozás típusa: URL, Email, Phone, SMS, Facebook Messenger, Skype, WhatsApp vagy Telegram. |
| **Email** | Az e-mail-cím (csak Email típusnál). |
| **CC**, **BCC**, **SUBJECT**, **MESSAGE** | Másolat, titkos másolat, alapértelmezett tárgy és üzenet. |
| **Download File** | Letöltés kattintásra: feltölthetsz vagy a Médiatárból választhatsz fájlt. |
| **Phone Number** | A hívandó szám (általában mobilon működik). |
| **SMS** | Az SMS-szám (általában mobilon működik). |
| **Facebook Messenger, USERNAME** | Személy, oldal vagy bot felhasználóneve. |
| **Skype, USERNAME** és **ACTION TYPE** | Skype-felhasználónév, és hogy csevegés vagy hívás induljon. |
| **WhatsApp, NUMBER** és **ACTION TYPE** | A WhatsApp-szám és az alapértelmezett üzenet. |
| **Telegram, TELEGRAM USERNAME** és **MESSAGE** | A Telegram-felhasználónév és az alapértelmezett üzenet. |
| **Button #1 URL**, **Button #2 URL** | A cél URL. |
| **Open as Image Lightbox** | A gomb lightboxban nyílik meg. Ilyenkor az alatta lévő URL-beállítások figyelmen kívül maradnak. |
| **Open as Video Lightbox** | A videó URL-jét a gomb URL-mezőjébe kell írni. YouTube, Vimeo és Dailymotion támogatott. |
| **Use Tooltip** | Súgóbuborék a gombon. |
| **TOOLTIP CONTENT** | A buborék szövege. |
| **SHOW ARROW** | Nyíl a buborékon. |
| **SIZE** | A buborék mérete, kicsitől nagyig. |
| **PLACEMENT** | A buborék helye: fent, jobbra, lent, balra. |
| **ANIMATION** | A buborék animációja. |
| **URL Opens** | Új ablakban nyíljon-e a hivatkozás. |

### Content: elválasztó

- **Separator Text**: a két gomb közti szöveg. Üresen hagyva nincs elválasztó.
- **Make Separator Text Fullwidth On Mobile**: mobilon az elválasztó teljes szélességű lesz.
- **Remove Separator Text On Mobile**: mobilon az elválasztó nem látszik.
- **Admin Label**: a modul neve a builderben.

### Design

| Csoport | Beállítások |
|---|---|
| Alignment | A gombok burkolójának igazítása: balra, jobbra, középre. |
| Lightbox | Ha a gomb kép- vagy videóréteget nyit: **Overlay color** és **Max Width**. |
| Separator Text | Az elválasztó szöveg betűbeállításai. |
| Tooltip Text | A buborék szövege, gombonként külön formázható. |
| Sizing | **Separator Gap Text**: a két gomb közti rés. |
| Button One, Button Two | A gombok formázása a Divi szokásos gombbeállításaival. |
| Animation | **Button Hover #1 Animation** és **#2 Animation**: egérráhúzás animációja, több mint 29 közül. **Button Icon Hover #1 Animation** és **#2 Animation**: az ikon animációja, több mint 15 közül. Ez akkor jelenik meg, ha a gombhoz van ikon, és az **Only Show Icon on Hover for Button One** (illetve **Two**) kapcsoló ki van kapcsolva. |

## Divi ikonos elválasztó

Elválasztó vonal, közepén ikonnal vagy képpel.

- **Use Icon**: ikont vagy képet használsz. „Yes” esetén ikont választasz, különben képet töltesz fel. A kép nem nagyítódik az eredeti mérete fölé, és a magassága az arányaiból adódik.
- **Icon** vagy **Image**: az ikon, illetve a kép.
- **Background Color**, **Background Image**, **Admin Label**.

Design:

| Csoport | Beállítások |
|---|---|
| Image & Icon | **Icon Color** (alapból a téma kiemelő színe), **Circle Icon** (színes körbe teszi az ikont), **CIRCLE COLOR**, **Show Circle Border**, **CIRCLE BORDER COLOR**, **Use Icon Font Size** (egyéni ikonméret). |
| Alignment | Az elválasztó igazítása. |
| Color | A vonal színe. |
| Styles | **Divider Style** (például folytonos, pontozott, szaggatott), **Divider Position** (függőleges igazítás). |
| Sizing | **Divider Weight** (vonalvastagság), **Icon Gap** (az ikon és a vonal közti rés). |

## Divi ikonos lista

Ikonos vagy képes lista. A Divi Blurb modulhoz hasonló, de jobban igazítható.

Elemet a **+ Add new Item** gombbal adsz hozzá, a szürke sávon szerkesztheted, másolhatod, törölheted.

### Design: a teljes listára

| Csoport | Beállítások |
|---|---|
| Text | **Text Indent** (távolság a szöveg és az ikon között), betűtípus, méret, szín, vastagság, árnyék. |
| Icon | **Icon Color**, **Icon Background**, **Padding**, **Icon Font Size**, **Icon Rounded Corners**, **Border**. |
| Image | **Background**, **Image Padding**, **Image Width**, lekerekítés, szegély, árnyék. |
| List Items | **Layout** (függőleges vagy vízszintes), **Alignment** (jobb, közép, bal), **Vertical Alignment** (fent, lent vagy középen), **Direction** (balról jobbra: ikon bal, szöveg jobb; jobbról balra: fordítva), **Space Between**, **Background Color**, **Padding**, lekerekítés, szegély, árnyék. |

### Lista elem

- **Text**: az elem szövege.
- **Use Icon**: a Divi ikonkönyvtárából választhatsz. Kikapcsolva a **+** gombbal képet adhatsz hozzá.
- **Use Tooltip**: súgóbuborék az elem fölé húzáskor, és a **Content** mezőben a buborék szövege.
- Design: ugyanazok az Icon, Image és Text beállítások, mint fent, csak erre az elemre. A **Tooltip** csoportban: **Placement** (fent, jobbra, lent, balra), **Background Color**, **Tooltip Padding**, **Tooltip Max width**, és a buborék szövegének betűbeállításai.

## Divi árlista

Árlista étlaphoz, katalógushoz, termékekhez vagy bármilyen kiemelt tételsorhoz.

Tételt a **+ Add new Item** gombbal adsz hozzá, a szürke sávon szerkesztheted, másolhatod, törölheted.

### Tétel

- **Price**: az ár.
- **Title**: a tétel neve.
- **Content**: a leírás.
- **Image**: a tétel képe.
- A tétel Design füle: **Image Width**, **Image Gap Spacing**, a kép lekerekítése, szegélye és árnyéka, csak erre a tételre.

### Design: a teljes listára

| Csoport | Beállítások |
|---|---|
| Text | **Vertical Alignment** (fent, középen vagy lent), **Text Shadow**. |
| Title Text, Description Text | Betűtípus, szín, méret, vastagság. |
| Price Text | **Background Color**, **Padding**, betűbeállítások, lekerekítés, szegély, árnyék. |
| Image | **Image Width**, **Image Gap Spacing**, lekerekítés, szegély, árnyék. |
| Separator | A cím és az ár közti vonal: **Style** (nyolc stílus), **Weight**, **Color**, **Gap Spacing**. |
| Sizing | **Item Bottom Spacing**: a tételek közti alsó térköz. |

## Divi nyitvatartási idő

Nyitvatartási idő megjelenítése külön bővítmény nélkül.

Napokat és időszakokat a **+ Add New Item** gombbal adsz hozzá, annyit, amennyi kell.

- Tétel: **Day** (a nap neve) és **Time** (az időszak). A tétel Design füle a nap és az idő szövegének betűbeállításait adja, csak az adott tételre.
- Design, **Day Text** és **Time Text**: a nap és az idő szövegének formázása.
- Design, **Separator**: vonal a nap és az idő között, nyolc stílusban. **Weight** (például 2px), **Color**, **Gap Spacing** (a nap és az idő közti rés).
- Design, **Divider**: elválasztó vonal minden tétel alatt.
- Design, **Spacing**: **Item Spacing**, a tételek közti térköz. A belső margó a tételeken belüli helyet adja.

## Divi breadcrumb

Útvonaljelző (morzsamenü) az oldal hierarchiájáról. Megkönnyíti a navigációt.

### Content

- **Show Custom Home**: egyéni szöveg a kezdőlap hivatkozásához.
- **Show Home Icon**: ikon a kezdőlap szövege mellett, a Divi ikonkönyvtárából.
- **Custom Separator Icon**: egyéni ikon az elválasztónak, a Divi ikonkönyvtárából.

### Design

| Csoport | Beállítások |
|---|---|
| Alignment | A breadcrumb igazítása, mobilra külön a reszponzív opcióval. |
| Items | **Item Background Color**, **Bottome Gap** (rés az elemek közt, ha a lánc hosszabb a rendelkezésre álló helynél), **Items Padding**, szín, betűméret, lekerekítés és szegély, **Box Shadow** (a Hover opcióval ráhúzásra is). |
| Home Icon | **Icon Color**, **Icon Size**. |
| Separators | **Separators Background Color**, **Bottome Gap**, **Items Padding**, szín és betűméret, lekerekítés és szegély, **Box Shadow**. |
| Current | Az aktuális elem formázása: **Item Background Color**, **Bottome Gap**, **Items Padding**, szín és betűméret, lekerekítés és szegély, **Box Shadow** (a Hover opcióval ráhúzásra is). |

## Divi csillagos értékelés

Csillagos értékelés, Google Schema támogatással.

### Content

| Beállítás | Mit csinál |
|---|---|
| **Rating Scale** | A skála: 0 és 5 között (alap), vagy 0 és 10 között. |
| **Rating** | Az értékelés a választott skálán. |
| **Title** | Az értékelés címe. |
| **Title Inline Position** | A cím a csillagoktól balra vagy jobbra. |
| **Display Type** | A cím külön sorban (stacked) vagy a csillagok mellett (inline). |
| **Show Rating Number** | A csillagok után az értékelés számát is kiírja. |
| **Enable Schema Support** | Schema-jelölést ad a modulhoz, így a csillagok a keresők találatai között is megjelenhetnek. |
| **Author** | A szerző neve, üresen is hagyható. Használhatod a dinamikus tartalmat. |
| **Product Item Name** | A termék neve, üresen is hagyható. Használhatod a dinamikus tartalmat. |
| **Number of Rating** | Az értékelések száma a keresőknek, üresen is hagyható. Használhatod a dinamikus tartalmat. |

### Design

- **Stars**: **Size**, **Gap** (a csillagok közti rés), **Color**.
- **Title**: **Gap** (a cím és a csillagok közti rés), valamint betűtípus, méret, vastagság.
- **Rating Number Text**: az értékelés számának betűbeállításai (csak ha a **Show Rating Number** be van kapcsolva).
- Ezen felül szövegszín, igazítás, betűköz, sormagasság, szegély, maximális szélesség, margó és belső margó.

## Divi folyamatjelző sáv

Olvasási folyamatjelző az oldalon, ami az olvasás előrehaladását mutatja.

### Content

| Beállítás | Mit csinál |
|---|---|
| **Tracker Type** | **Horizontal** (vízszintes) vagy **Circular** (kör alakú). |
| **Progress Relative To** | **Entire Page**: a teljes oldalhoz viszonyít. **Selector**: megadsz egy osztályt, amit egy modul, sor vagy szakasz tartalmaz. A jelző akkor indul, amikor az az elem a látómezőbe ér, és akkor ér 100%-ra, amikor kikerül belőle. |
| **Direction** | A haladás iránya: **Left** vagy **Right**. |
| **Percentage** | A százalék kiírása a jelzőn. |
| **Size** | A kör mérete (Circular típusnál). |

### Design

- **Progress Indicator**: vízszintes típusnál **Background** (szín vagy színátmenet). Kör alakúnál **Width** és **Color**. Szegély, lekerekítés és árnyék is állítható.
- **Tracker**: vízszintes típusnál **Background** és **Height**. Kör alakúnál **Width** és **Color**. Szegély, lekerekítés és árnyék is állítható.
- **Percentage Text**: a százalék betűbeállításai.

## Divi lépéssor

Lépésekből álló folyamat kártyákkal. Elemet egyszerűen adhatsz hozzá, törölhetsz és átrendezhetsz, és előre elkészített sablonok közül is indulhatsz.

### Content

| Beállítás | Mit csinál |
|---|---|
| **Title** | A kártya címe. |
| **Badge** | Jelvény a kártya tetején, a pozíciója és a stílusa a Design fülön állítható. |
| **Use Description** | A leírás megjelenítése vagy elrejtése. |
| **Content** | A leírás szövege. |
| **Button Text** | A gomb felirata. |
| **Button Link URL** | A gomb hivatkozása. |
| **Button Link Target** | Ugyanabban a fülön vagy új fülön nyíljon. |
| **Show Direction** | Irányt jelző nyíl. |
| **Type** | A nyíl típusa. Az alap egy nyíl, amit a Design fülön stílusozol, de választhatsz a Divi ikonkönyvtárából, vagy feltölthetsz sajátot. |
| **Use Icon** (Image & Icon) | Kép helyett ikon. Bekapcsolva a Divi ikonkönyvtárából választasz. |
| **Image** | A kártya képe. |

### Design

| Csoport | Beállítások |
|---|---|
| Title, Content | Betűtípus, méret, szín, vastagság. |
| Image & Icon | **Icon Color**, **Background Color**, **Font Size** (az ikoné), **Padding**, **Margin**, **Alignment**, **Width** (a képé), szegély, lekerekítés, árnyék. |
| Badge | **Position**, **Use Custom Position**, **Background Color**, **Padding**, **Margin**, betűbeállítások, szegély, lekerekítés, árnyék. |
| Button | **Use Custom Styles** bekapcsolása után a Divi gombjaihoz hasonlóan formázható. |

## Divi tartalmi idővonal

Idővonal tartalmakból, kártyákkal és egy függőleges vonallal.

Elemet a **+ Add new Item** gombbal adsz hozzá, a szürke sávon szerkesztheted, másolhatod, törölheted.

### Content: általános beállítások

- **Style**: az idővonal stílusa, **Left**, **Right** vagy **Center**.
- **Mobile/Tablet Style**: mobilon és tableten **Left** vagy **Right**.
- **Show Card Arrow**: a kártyán nyíl mutat a jelölőelemre.
- **Enable Tree Animation**: görgetésre animálódik a fa (vonal). A színeket a Design fülön állítod.

### Design

| Csoport | Beállítások |
|---|---|
| Alignment | A tartalom igazítása. |
| Title Text | Betűbeállítások, árnyék. |
| Content | A leírás betűbeállításai. |
| Opposite Text | A kártyával szemközti oldal szövege: **Background Color**, **Width**, **Padding**, betűbeállítások, szegély, lekerekítés, árnyék. |
| Card | **Background** (elemenként is felülírható, akár képpel), **Margin**, **Padding**, szegély, lekerekítés, árnyék. |
| Pointer | A jelölőelem: **Background Color**, **Active Background Color** (ha a Tree Animation be van kapcsolva), **Icon Color**, **Active Icon Color**, **Icon Font Size**, szegély, lekerekítés, árnyék. |
| Tree | **Background** (a vonal színe), **Active Background** (aktív állapot, ha a Tree Animation be van kapcsolva), **Width**. |
| Image & Icon | **Icon Color**, **Icon BG Color**, **Icon Font Size**, **Image Width**, **Image/Icon Alignment**, margó, belső margó, szegély, lekerekítés, árnyék. |
| Button | **Use Custom Styles** bekapcsolása után a Divi gombjaihoz hasonlóan formázható. |
| Animation | Belépő animáció a kártyákra a Divi animációs előbeállításaival. Csak a weboldalon látszik, a builderben nem biztos, hogy helyesen. |

### Idővonal-elem

- **Use Image/Icon**: kép vagy ikon az elemhez. **Use Icon**: ikon a kép helyett.
- **Image/Icon Placement**: a kép vagy ikon a tartalom fölött vagy bal oldalán.
- **Title** és **Content**: a cím és a leírás.
- **Use Pointer Image/Icon**: kép vagy ikon a jelölőelemben, külön panellel.
- **Opposite Text**: a szemközti oldal szövege.
- **Button text**, **Button Link URL**, **Button Link Target** (új fül vagy ugyanaz a fül).
- Az elem Design füle: **Alignment**, **Title Text**, **Content**, **Opposite Text** (**Background Color**, **Padding**), **Button** (**Use Custom Styles**), **Image & Icon** (**Image/Icon Width**, **Image/Icon Alignment**), valamint a **Card** (margó, belső margó, szegély, lekerekítés, árnyék), csak erre az elemre.

## Divi kör alakú információ

Interaktív, kör mentén elhelyezett elemek, amelyekre váltva a kör közepén megjelenik az adott információ.

Elemet a **+ Add new Item** gombbal adsz hozzá, a szürke sávon szerkesztheted, másolhatod, törölheted.

### Content: általános beállítások

| Beállítás | Mit csinál |
|---|---|
| **Enable Autoplay** | Az elemek megadott idő után maguktól váltanak. Itt állíthatod a **Speed** (sebesség) és a **Delay** (késleltetés) értékét. |
| **Trigger** | A váltás kattintásra (Click) vagy egérráhúzásra (Hover) történik. |
| **Circle Size** | A kör mérete. A reszponzív opcióval mobilra külön is megadhatod. |
| **Content Animation** | A tartalom animációja, több mint 30 közül. |

### Design

| Csoport | Beállítások |
|---|---|
| Circle | Szegély, lekerekítés, árnyék. |
| Content, General | A tartalom belső margója, szegélye, lekerekítése, árnyéka. |
| Content, Title | A tartalom címének betűbeállításai. |
| Content, Description | A leírás betűbeállításai. |
| Circle Item, General | **Circle Size** (a körvonalon ülő elemek mérete) és az elem címének betűbeállításai. |
| Circle Item, Normal | **Background Color**, **Color** (a cím vagy ikon színe), szegély, lekerekítés, árnyék normál állapotban. |
| Circle Item, Active | Ugyanezek aktív állapotban. |
| Image & Icon, Icon | **Icon Size**, **Background Color**, **Active Background Color**, **Color**, **Active Color**, margó, belső margó, szegély, lekerekítés, árnyék. |
| Image & Icon, Image | **Image Width**, szegély, lekerekítés, árnyék. |
| Button | **Use Custom Styles** bekapcsolása után a Divi gombjaihoz hasonlóan formázható. |

### Kör alakú információ elem

- **Title**: az elem címe a körön.
- **Use Icon**: ikon használata, kikapcsolva saját kép.
- **Title** és **Content** (Content): a megjelenő tartalom címe és leírása.
- **Button Text**, **Button URL**, **Button Link Target** (**Same Window** vagy **New Tab**).
- Az elem Design füle ugyanazokat a csoportokat tartalmazza, mint a modul Design füle (Circle Item, Content, Image & Icon, Button), csak az adott elemre érvényesen.

Mobilon és tableten kapcsold be a reszponzív opciót, és méretezd át kézzel a **Circle Size** értékét. A builderben a megjelenés eltérhet, a weboldalon helyesen jelenik meg.