# Kiterjesztések

> A Divi Supreme Pro kiterjesztései: Popup, ütemezett elem, Library widget és shortcode-ok, Read More, reszponzív nézet, egyéni attribútumok, egyszerű sablonkészítő.

A kiterjesztések nem önálló modulok: a Divi meglévő elemeihez (szakaszokhoz, sorokhoz, oszlopokhoz, modulokhoz) adnak új beállításokat. Mindegyiket külön be kell kapcsolni a **Divi Supreme Pro → Általános beállítások** fülön, majd menteni.

## Divi felugró ablak (Popup)

A modulok **Advanced** fülének **Visibility** csoportjába egy **Use Popup** kapcsolót tesz. Működik az összes Divi alapmodullal és az összes Divi Supreme Pro modullal.

Bekapcsolás: **Divi felugró ablak bekapcsolása**, majd **Módosítások mentése**.

Használat: nyisd meg egy támogatott modul beállításait, az **Advanced** fülön a **Visibility** csoportban kapcsold be a **Use Popup** kapcsolót.

| Beállítás | Mit csinál |
|---|---|
| **Popup Type** | A felugró ablak tartalma. **Layout**: egy elrendezés a Divi Library-ből. **iFrame**: egy weboldal URL-je. **Image**: kép (feltöltés vagy a Médiatárból). **Video**: videó URL-je. |
| **Popup (Divi Library)** | Layout típusnál a Library-ből választott elrendezés. |
| **Trigger On** | Mi nyitja meg az ablakot (lásd lent). |
| **Close Popup Triggers** | Hogyan zárható be: **Outside Popup** (az ablakon kívüli kattintás) vagy **Close Button** (zárógomb). |
| **Use Auto Close Popup** | Bekapcsolva az ablak a megadott idő (**After Time Passed (in s)**, másodpercben) után magától bezárul. |
| **Entrance Animation In**, **Exit Animation In** | Belépő és kilépő animáció, több mint 43 közül. |
| **Popup Position** | Az ablak helye a képernyőn, kilenc pozíció: bal felső, felső közép, jobb felső, bal közép, közép, jobb közép, bal alsó, alsó közép, jobb alsó. |
| **Popup Position Type** | **Absolute**: az ablak a tartalommal együtt görög. **Fixed**: a képernyőhöz rögzített, görgetéskor is előtérben marad (például sütiértesítéshez jó). |
| **Use Fullwidth** | Az ablak tartalma a teljes képernyőt kitölti. |
| **Popup Max Width** | Az ablak legnagyobb szélessége. |
| **Show Overlay**, **Overlay Background Color** | A háttér-réteg megjelenítése és színe. |
| **Show Close Button** | A zárógomb megjelenítése. |
| **Close Button Placement** | **Inside** (az ablakon belül) vagy **Outside** (kívül). |
| **Close Icon Font Size**, **Close Button Icon** | A zárógomb ikonjának mérete és a Divi ikonkészletéből választott ikon. |
| **Close Button Background Color**, **Close Button Icon Color** | A zárógomb háttér- és ikonszíne. |

### Trigger On: az indítók

| Érték | Mikor nyílik az ablak |
|---|---|
| **Module Click** | Az egész modulra kattintáskor. |
| **Button Click** | Ha a modul gomb, csak magára a gombra kattintáskor. |
| **Image Click** | Ha a modul kép, csak a képre kattintáskor. |
| **Hyperlink Click** | Egy szövegmodulban lévő hivatkozásra kattintáskor. |
| **By ID** | Bármely elemre kattintáskor, amelynek megadott az azonosítója (ID). |
| **By Class** | Bármely elemre kattintáskor, amelynek megadott a CSS-osztálya. |
| **Page Load** | Az oldal betöltésekor. Állítható: **Timed Delay** (késleltetés), **Cookie Expiry** (hány nap múlva jelenjen meg újra), **Use Custom Cookie Expiry Date** (egyéni lejárat). |
| **Scroll** | Amikor a görgetéssel a modulhoz érsz. Itt is van **Timed Delay**, **Cookie Expiry**, **Use Custom Cookie Expiry Date**. |
| **Exit Intent** | Amikor a látogató elhagyni készül a böngészőlapot. |

### Popup megnyitása menüpontból

1. A **Divi → Theme Builder** oldalon szerkeszd a globális láblécet, és tegyél bele egy üres szövegmodult.
2. Állítsd be a felugró ablakot ebben a modulban, a **Trigger On** értéke legyen **By Class**, az osztály például `open-popup` (bármilyen nevet adhatsz).
3. A **Megjelenés → Menük** oldalon kattints a felső **Megjelenítési beállítások** gombra, és pipáld be a **CSS-osztályok** mezőt.
4. Írd be ezt az osztályt annak a menüpontnak a CSS-osztályai közé, amelyik az ablakot nyissa.

### Popup az egész webhelyen

Ha egy ablakot (például akcióértesítőt) minden oldalon meg akarsz jeleníteni, tedd a Theme Builder globális fejlécébe vagy láblécébe: ezek az egész webhelyen megjelennek. Szerkeszd a globális láblécet, nyiss meg egy modult, és az **Advanced → Visibility → Use Popup** alatt állítsd be az ablakot. Mentés után minden oldalon és bejegyzésen megjelenik.

## Ütemezett elem

Egy szakasz, sor vagy modul láthatóságát időhöz, bejelentkezéshez és szerepkörhöz kötheted. Elérhető az összes Divi alapmodulnál és Divi Supreme Pro modulnál.

Bekapcsolás: **Ütemezett elem engedélyezése szakaszokon, sorokon, oszlopokon és modulokon**. Használat: **Advanced → Visibility → Use Scheduled Element**.

| Beállítás | Mit csinál |
|---|---|
| **Show or Hide Module** | **Show**: az elem a megadott időpontig rejtett, utána megjelenik. **Hide**: az időpontig látszik, utána eltűnik. |
| **Schedule a Date/Time** | A dátum és idő, amikor a váltás megtörténik. |
| **Use Between Date/Time** | Második időpont is megadható: az első a kezdet, a második a vége. |
| **Use Business Hour/Time** | Az elem csak nyitvatartási időben látszik. |
| **Select Day** | A napok kiválasztása. |
| **Opening Time**, **Closing Time** | Nyitás és zárás ideje, 24 órás formátumban. |
| **Apply To** | **All Users**: mindenkinek. **Logged In Users**: csak bejelentkezetteknek, szerepkör szerint is választható (vagy mindenki). **Visitor Users**: csak a kijelentkezett látogatóknak. |
| **Disable On** | Az elem kikapcsolása a kiválasztott eszközökön. |

## Divi Library widget

Divi Library-elrendezést tehetsz a widgetterületekre (oldalsáv, lábléc vagy bármilyen, általad létrehozott terület).

1. Kapcsold be: **Divi Library widget bekapcsolása**, és mentsd.
2. Nyisd meg a **Megjelenés → Widgetek** oldalt.
3. Húzd a **Divi Library Widget** elemet a kívánt widgetterületre, és válaszd ki az elrendezést.

## Divi Library shortcode-ok

Bekapcsolás után a Divi Library minden elrendezése mellett megjelenik a hozzá tartozó shortcode. Ezt bármely, szöveget fogadó modulba beillesztheted (fül, blurb, kapcsoló, harmonika és mások), így egy modulon belül másik elrendezést jeleníthetsz meg. Oldalsávban és láblécben is használható. Ez a kiterjesztés az ingyenes változatban is megvan.

1. Kapcsold be: **Divi Library shortcode-ok bekapcsolása**, és mentsd.
2. Nyisd meg a Divi Library-t, és másold ki a kívánt elrendezés shortcode-ját.
3. Illeszd be a modul szövegmezőjébe.

## Read More (Divi Readmore Content)

Hosszú szövegeket összecsukhatsz, és egy „tovább” hivatkozás nyitja ki őket. Támogatott modulok: **Text**, **Blurb**, **Call-to-action**, **Blog**.

Bekapcsolás: **Divi Readmore Content bekapcsolása**. Használat: a modul **Advanced → Visibility → Use Read More** kapcsolója.

| Beállítás | Mit csinál |
|---|---|
| **Use Read More** | A kiterjesztés be- és kikapcsolása az adott modulnál. |
| **Show on Mobile Only** | Csak mobilon csukja össze a szöveget. |
| **Collapsed Height** | Milyen magasságig látszik a szöveg összecsukva. |
| **Read More Text** | A kinyitó hivatkozás szövege (például „Tovább olvasom”). |
| **Close Text** | Az összecsukó hivatkozás szövege (például „Kevesebb”). |
| A hivatkozás kinézete | Betűtípus, vastagság, stílus (dőlt, nagybetűs, aláhúzott stb.), igazítás, méret, szín. |
| **Use Shadow** | Árnyék az összecsukott szöveg alján. |

## Divi Builder reszponzív nézet (Responsive Viewer)

Bekapcsolás után a Visual Builderben, a háttér Divi Builderben és a Theme Builderben is több mobilméret közül választhatsz, és saját méretet is megadhatsz. A Divi alapértelmezett mobilnézete 479 képpont széles; ezt például 375 vagy 320 képpontra, vagy kisebbre-nagyobbra is állíthatod.

Két dolgot kapsz: előre beállított töréspont-méreteket (iPhone, iPad, Android és a legkisebb vagy legnagyobb mobileszközök) egy-két kattintással, és egy mezőt saját töréspont megadásához.

Saját méret megadásához írd be az értéket a mezőbe (például 350), a „px” nélkül, és nyomj Entert. Így nem kell minden alkalommal a böngésző fejlesztői eszközét használnod.

## Egyéni attribútumok (Custom Attributes)

Tetszőleges HTML-attribútumokat adhatsz egy szakasz, sor, oszlop, modul vagy gomb burkolójához. Hasznos például olyan JavaScript-könyvtáraknál, amelyek `data-` attribútumokkal állíthatók.

Bekapcsolás: **Divi egyéni attribútumok bekapcsolása**. Használat:

1. Nyisd meg egy szakasz, sor, oszlop vagy modul beállításait, és az **Advanced → Custom Attributes** részben kapcsold be a **Use Custom Attributes** kapcsolót.
2. Válaszd ki, hogy a burkolóhoz vagy a benne lévő gombhoz adod az attribútumot.
3. Adj az attribútumnak címkét, és jelöld be a pipát az engedélyezéshez.
4. Kattints a lánc ikonra: a megjelenő ablakban add meg az attribútum nevét és értékét.
5. További attribútumhoz kattints a plusz ikonra; tetszőleges számú attribútumot felvehetsz.

Az attribútum a weboldalon a kiválasztott elem HTML-jében jelenik meg. A HTML-attribútumok olyan adatokat tárolnak az elemekről, amelyekre az olvasónak nincs szüksége, de sok JavaScript-könyvtár és robot ezekre támaszkodik.

## Egyszerű sablonkészítő

A Divi Theme Builderrel készített fejlécet kezelheted a **Divi Supreme Pro → Egyszerű sablonkészítő** fülön: rögzített fejléc, zsugorodás görgetéskor és logócsere. Nem kell hozzá kód.

### Theme Builder fejléc

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Rögzített fejléc bekapcsolása** | A fejléc az oldal tetején marad görgetéskor is. Fejlesztőknek: a rögzített fejléc CSS-osztálya `.dsm_fixed_header`. | ki |
| **Letiltás ezeken az eszközökön** | **Tablet**, **Phone**: ezeken az eszközökön nem lesz rögzített. | egyik sem |
| **Az oldaltörzs lejjebb tolása** | Kiszámítja a fejléc magasságát, és ennyivel lejjebb tolja az első szakaszt, hogy ne fedje el a fejléc. Átlátszó hátterű fejlécnél nem kell. | ki |
| **Görgetési küszöbérték** | Hány képpont görgetés után lépjen működésbe a fejléc. | 200 |

### Görgetés

| Beállítás | Mit csinál |
|---|---|
| **Görgetési beállítások bekapcsolása** | Engedélyezi az alábbi görgetési beállításokat. A CSS-osztály: `.dsm_fixed_header_scroll_active`. |
| **#1 szakasz háttérszíne**, **#2 szakasz háttérszíne** | A fejléc első és második szakaszának háttérszíne görgetéskor. |
| **Dobozárnyék megjelenítése görgetéskor** | Az árnyék az oldal betöltésekor rejtett, és a küszöbértéknél jelenik meg. Az árnyékot magában a Theme Builder szakasz beállításaiban kell megadnod. |

### Zsugorítás

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Görgetés közbeni zsugorítás bekapcsolása** | Görgetéskor csökkenti a fejléc magasságát. A CSS-osztály: `.dsm_fixed_header_shrink_active`. | ki |
| **Zsugorított szakasz paddingje (px)** | A szakasz felső és alsó paddingje zsugorított állapotban. | üres |
| **Zsugorított sor paddingje (px)** | A sor paddingje zsugorított állapotban. | üres |
| **Zsugorított menümodul paddingje (px)** | A menümodul paddingje zsugorított állapotban. | üres |
| **Kép zsugorítása (%)** | A logó legnagyobb szélessége zsugorított állapotban. | 70 |
| **Logókép váltása zsugorításkor** | Másik logó zsugorított állapotban. | üres |

A paddingmezők a meglévő értéket váltják fel: ha a szakaszon 20 képpont padding van, és a zsugorított paddingnek 10-et adsz meg, görgetéskor a 20 helyére 10 kerül.

## Kiterjesztések Divi 5 alatt

A Divi 5-ös felületen a kiterjesztések listája hosszabb (16 db). Ezeket a **Divi Supreme → Extensions** fülön kapcsolod be, és az új beállítások a Visual Builder újratöltése után jelennek meg.

| Kiterjesztés | Mire jó |
|---|---|
| **Divi Popup** | Felugró ablakok. |
| **Line Hover Animation** | Vonalas animáció rámutatáskor. |
| **Mouse Parallax** | Az egér mozgására reagáló parallax. |
| **Image Parallax** | Parallax-hatás képeken. |
| **Custom Cursor** | Egyéni egérkurzor. |
| **Dark Mode Toggle** | Világos és sötét színséma, lebegő kapcsoló, és hozzá a Supreme Dark Mode Toggle modul. A beállítás a Visual Builder sávján (Dark) van. |
| **Preloader** | Oldalbetöltő réteg. A kinézetet a Visual Builder sávján (Preloader) tervezed, a további beállítások a **Divi Supreme → Preloader** fülön vannak. |
| **Tooltip** | Tooltip csoport az **Advanced** fülön szakaszoknál, soroknál, oszlopoknál és moduloknál. Először a kiterjesztést kapcsold be, majd az **Advanced → Tooltip** alatt az **Enable Tooltip** kapcsolót a kívánt elemnél. |
| **Page Tour** | Lépésenkénti oldalbejárás: az elemeket az **Advanced → Page Tour** alatt jelölöd Step 1, Step 2 stb. lépésnek, a tour egészének beállításai a Visual Builder sávján vannak. Bekapcsolva a régi Page Tour modul eltűnik a modulválasztóból. |
| **Icon Libraries** | Ikonkészletek, amelyeket az **Icon Libraries** fülön kapcsolhatsz külön-külön. |
| **Mask & Pattern Library** | Maszkok és minták a háttérválasztókhoz, külön fülön kapcsolhatók. |
| **Divi Library Widget** | Library-elrendezések widgetterületen. |
| **Password Protection** | Jelszavas védelem az egész webhelyre, oldalanként, illetve szakaszra, sorra, oszlopra, és a Password Form modullal egyéni feloldó elrendezés. |
| **Copy to Clipboard** | Kattintásra szöveg másolása a vágólapra (opcionális másolás jelvénnyel és visszajelző tooltippel). |
| **Client Handoff** | Csak tartalom szerkesztésére képes Visual Builder az ügyfeleknek, engedélyezett oldalak, lecsupaszított admin és ügyfélútmutató. Kikapcsolásakor, ha a Handoff alkalmazva van, visszaáll a szerepkör-szerkesztő korábbi állapota. |
| **Contact Form Pro** | Űrlapbejegyzések, spamvédelmi eszközök és a Supreme Contact Field modul a Divi saját kapcsolatiűrlap-moduljához. |