# Modulok: menü, közösségi és beágyazott modulok

> A menü, a megosztó gombok, az űrlap- és a Facebook-, Twitter-, Google Térkép-modulok beállításai.

Ebben a fejezetben a menü, a közösségi megosztás, az űrlapok és a beágyazott külső tartalmak 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. Az **Advanced** fül mindegyik modulnál ugyanazt adja: egyedi CSS-azonosítót és -osztályt, egyedi CSS-t, valamint az eszközönkénti láthatóság beállítását.

## Divi menü

Egy WordPress-menüt jelenít meg a Divi-oldalakon. Jól használható láblécben és oldalsávban.

**Content**

| Beállítás | Mit csinál |
|---|---|
| **Menu Title** | A menü címe, amely a menü fölött jelenik meg. |
| **Menu** | A megjelenítendő menü. A legördülő listában a Megjelenés → Menük oldalon létrehozott menük látszanak. |
| **Collapse Sub Menu** | Összecsukja az almenüt, és csak a szülő menüpontra kattintva nyílik ki. |
| **Admin Label** | A modul neve a builderben, az azonosítás megkönnyítésére. |

**Design**

| Beállítás | Mit csinál |
|---|---|
| **Menu Layout** | Jelenleg csak függőleges elrendezés érhető el. |
| **Title** csoport, **Bottom Gap** | A cím alatti térköz. A cím betűtípusa, színe, vastagsága és a többi szövegbeállítás itt módosítható. |
| **Menu Link Color** | A menüpontok színe. |
| **Active Link Color**, **Menu Link Active Color** | Az aktív menüpont színe. |
| **Menu Link Visited Color** | A már meglátogatott menüpont színe: ha a látogató megnyit egy linket, majd visszatér az oldalra, ez a menüpont más színű lesz. |
| **Space Between** | A menüpontok közötti távolság. |
| **Left Spacing** | A menüpontok bal oldali térköze. |
| **List Style Type** | A felsorolásjel típusa: Disc, Circle, Decimal vagy Square. A None kikapcsolja a jelet. |
| **List Style Position** | Az **Inside** esetén a hosszabb menüpont szövege a jel alá tör, az **Outside** esetén nem. |
| **List style Color** | A felsorolásjelek színe. |
| **Sub Menu** csoport, **Left Spacing** | Az almenüpontok bal oldali térköze. Az almenüpontok betűtípusa, mérete, vastagsága is itt állítható. |
| **Sub Menu Collapse** csoport | Az összecsukó nyíl stílusa: **Arrow Color**, **Arrow Background Color**, **Arrow Gap** (a menüpont és a nyíl távolsága), **Arrow Padding** (hasznos, ha a nyílnak van háttere), **Arrow Font Size**, valamint szegély, lekerekítés és árnyék. |

A menüpontok betűtípusa, mérete és vastagsága szintén módosítható.

**Animation**

| Beállítás | Mit csinál |
|---|---|
| **Use Link Hover Animation** | Hover-animációt ad a menüpontokhoz. |
| **Animation Type** | Az animáció típusa. Jelenleg csak az **Underline** (aláhúzás) választható. |
| **Underline Animation** | Az aláhúzás iránya: Left to Right, Right to Left vagy Center Out. |
| **Link Color** | Az aláhúzás színe. |

## Divi közösségi megosztó gombok

Megosztó ikonokat tesz az oldalra. Több közösségi hálózat közül választhatsz, és a kinézetük testre szabható. A gombokat elemenként adod hozzá: a **+ Add new Item** gombbal új elem jön létre, amelynek saját Content, Design és Advanced füle van. A listában az elem szürke sávján három gomb van: szerkesztés, másolás, törlés.

**Content (a modul egésze)**

| Beállítás | Mit csinál |
|---|---|
| **View** | A megjelenés: Icon & Text, Icon Only vagy Text only. |
| **Skin** | A gombok stílusa: Gradient, Minimal, Framed, Boxed Icon vagy Flat. |
| **Shape** | A gombok alakja: Square, Rounded vagy Circle. |
| **Columns** | Az oszlopok száma: Auto vagy 1 és 6 között. |
| **Alignment** | A gombok igazítása. |
| **Target URL** | Mit osszon meg a gomb: a **Current** (jelenlegi oldal) vagy a **Custom**. Utóbbinál megjelenik egy mező az egyedi URL-nek. |
| **Hover Animation** | Hover-animáció a gomboknak. |

**Design**

| Beállítás | Mit csinál |
|---|---|
| **Columns Gap**, **Row Gap** | Az oszlopok és a sorok közötti távolság. |
| **Button Size**, **Button Height**, **Icon Size** | A gomb mérete, magassága és az ikon mérete. |
| **Color** | Az **Official Color** a hálózatok hivatalos színét használja, a **Custom** egyedi színeket enged. |
| **Label** csoport | A felirat betűtípusa, mérete, színe, vastagsága, és szövegárnyék is adható hozzá. |

**Egy elem beállításai (Advanced fül)**

| Beállítás | Mit csinál |
|---|---|
| **Network** | A hálózat: Facebook, Twitter, Linkedin, Pinterest, Reddit, Vk, Tumblr, Digg, Skype, Stumbleupon, Mix, Telegram, Pocket, Xing, WhatsApp, Email vagy Print. |
| **Custom Label** | Egyedi felirat az adott elemnek. |
| Egyedi szín | Elemenként más színt is megadhatsz. |

Az elemnek is van saját Advanced füle: egyedi CSS-azonosító, -osztály, egyedi CSS és eszközönkénti láthatóság.

## Divi Contact Form 7

A Contact Form 7 bővítménnyel készült űrlapokat választhatod ki a legördülő listából. Nem kell a shortcode-ot kimásolni és a Divi Code modulba beilleszteni. Az űrlap mezői, gombja, címkéi és hibaüzenetei stílusozhatók.

**Content**

| Beállítás | Mit csinál |
|---|---|
| **Contact Form 7** | A használni kívánt űrlap. Az újonnan létrehozott űrlapok (Kapcsolat → Új hozzáadása) megjelennek a listában. |
| **Show Error & Validation Messages** | A builderben megmutatja a hiba- és ellenőrzési üzeneteket, hogy stílusozni tudd őket. |
| **Admin Label** | A modul neve a builderben. |

**Design**

| Beállítás | Mit csinál |
|---|---|
| **Labels**, **Bottom Spacing** | A címkék stílusa és az alattuk lévő térköz. |
| **Input, Textarea & Select** | A beviteli mezők háttere, betűtípusa, lekerekítése, szegélye és más tulajdonságai. |
| **Placeholder** | A helyőrző szöveg betűtípusa és egyéb beállításai. |
| **Radio & Checkbox** | A rádiógombok és jelölőnégyzetek szövegének stílusa. |
| **File** | A fájlfeltöltő mező stílusa: betűtípus, **Padding** (belső térköz) és **Background Color**. |
| **Error Messages** | A hibaüzenetek stílusa, köztük a **Background Color**. |
| **Validation Error Messages** | Az ellenőrzési hibaüzenetek stílusa, köztük a **Background Color**. |
| **Validation Success Messages** | A sikeres ellenőrzés üzeneteinek stílusa. |

Az üzenetek stílusát csak akkor látod a builderben, ha a Content fülön bekapcsoltad a **Show Error & Validation Messages** opciót.

## Divi Caldera-űrlapok

A Caldera Forms bővítménnyel készült űrlapokat választhatod ki a legördülő listából, shortcode másolása nélkül. A modul tetején egy megjegyzés figyelmeztet: az alapértelmezett Caldera-stílusokat ki kell kapcsolnod. Ehhez a Caldera Forms **General Settings** oldalán kapcsold ki az összes kapcsolót.

**Content**

| Beállítás | Mit csinál |
|---|---|
| **Caldera Form** | A használni kívánt űrlap. Ha még nincs űrlapod, a Caldera Form → Forms oldalon a **New Form** gombbal hozhatsz létre egyet. |
| **Show Error & Validation Messages** | A builderben megmutatja a hiba- és ellenőrzési üzeneteket a stílusozáshoz. |
| **Admin Label** | A modul neve a builderben. |

**Design**

| Beállítás | Mit csinál |
|---|---|
| **Header Text** | Az űrlap létrehozásakor megadott fejlécszöveg stílusa. |
| **Body Text** | Az űrlap leíró szövegének stílusa. |
| **Horizontal Ruler (HR Tag)** | Az elválasztóvonal **Color** (színe) és **Gap** (fölötte és alatta lévő térköze) beállítása. |
| **Label** | **Bottom Spacing** (a címke alatti térköz), **Required Asterisk Color** (a kötelező mezőt jelölő csillag színe), valamint a címke betűtípusa, mérete, színe. |
| **Field Description** | A mező alatt megjelenő leírás stílusa: háttérszín, méret, betűtípus, vastagság. |
| **Input, Textarea and Select** | Minden mezőre érvényes: **Margin Bottom** (térköz alul), **Background Color**, a beírt szöveg betűtípusa, mérete, színe, a lekerekítés (a lánc ikonnal egyszerre vagy sarkonként), szegély és árnyék. |
| **Input, Textarea and Select Focus** | A mező kiemelése, amikor beleírsz: a szöveg mérete, vastagsága és más tulajdonságai. |
| **Placeholder** | A helyőrző szöveg betűtípusa, mérete és egyéb beállításai. |
| **Radio & Checkbox** | A szöveg stílusa. A **Custom Radio/Checkbox Styles** kapcsolóval egyedi stílust adhatsz: **Checked Color** (a kipipált jel színe), **Checked Background Color** (a kipipált állapot háttere), **Background Color** (a jelölő háttere). |
| **Basic File** | Az egyszerű fájlfeltöltő stílusa: padding, háttérszín, betűtípus, méret, vastagság. |
| **Error Messages** | A hibaüzenet háttere, betűtípusa, mérete, árnyéka, lekerekítése és szegélye. |
| **Success Messages** | A sikerüzenet háttere, betűtípusa, mérete, árnyéka, lekerekítése és szegélye. |
| **Submit Button** | **Button Alignment** (balra, középre vagy jobbra), **Margin Top**, és a **Use Custom styles for the button** kapcsoló, amellyel úgy stílusozod, mint egy Divi gombot. |
| **Advanced File Button(1.0)** | A **Use Custom styles for the Advanced File Button(1.0)** kapcsolóval a fejlett fájlfeltöltő gombját is úgy stílusozhatod, mint egy Divi gombot. |

## Divi Google Térkép beágyazása

Egyszerű Google Térképet ágyaz be az oldalra, különösebb beállítás nélkül. A modul a Google Maps Embed API-t használja, ezért érvényes Google API-kulcs kell hozzá. A kulcsot a Divi Theme Options panelben kell megadnod, még a modul használata előtt. A Google felületén a kulcshoz engedélyezni kell a Maps Embed API-t is a könyvtárban.

**Content**

| Beállítás | Mit csinál |
|---|---|
| **Google Map API Key** | A modul ezt a kulcsot használja. Itt nem kell megadni, a Divi Theme Options panelben szerepel. |
| **Address** | A térkép címe. Szabványos formában írd be, a cím alapján kerül a pont a térképre. |
| **Zoom** | A térkép nagyítási szintje. |
| **Admin Label** | A modul neve a builderben. |

A **Design** fülön a megszokott Divi-beállítások érhetők el: betűtípusok, színek, méretezés és térközök.

## Divi Twitter-idővonal beágyazása

Egy Twitter-idővonalat jelenít meg kódolás nélkül.

**Content**

| Beállítás | Mit csinál |
|---|---|
| **Twitter Username** | A felhasználónév @ jel nélkül, például TwitterDev. |
| **Limit Tweets** | Korlátozza a megjelenő tweetek számát. |
| **Number of Tweets** | A megjelenített tweetek száma, 1 és 20 között. |
| **Theme** | Az idővonal világos (light) vagy sötét (dark) témája. |
| **Show Header** | Az idővonal fejlécének megjelenítése vagy elrejtése. Ha elrejted, a Twitter megjelenítési előírásai szerint magadnak kell a forrásmegjelölést és a linket megadnod. |
| **Show Footer** | Az idővonal láblécének és a tweetíró linknek (ha van) a megjelenítése vagy elrejtése. |
| **Show Border** | A szegélyek megjelenítése vagy eltávolítása a widget körül és a tweetek között. |
| **Show Scrollbar** | A fő görgetősáv megjelenítése vagy elrejtése. A felületi elemek elrejtése ronthatja az oldal akadálymentességét. |
| **Remove Widget's Background Color** | Eltávolítja a widget háttérszínét. |
| **Admin Label** | A modul neve a builderben. |

**Design**

| Beállítás | Mit csinál |
|---|---|
| **Sizing**, **Height** | Az idővonal magassága pixelben, legalább 200. |

## Divi Facebook-beágyazás

Facebook-bejegyzést vagy videót ágyaz be: elég a linket a mezőbe másolni. A szükséges szkripteket a modul tölti be.

Az összes Facebook-modulhoz meg kell adnod a Facebook-alkalmazás-azonosítót a **Divi Supreme Pro → Közösségi média beállításai** fülön. A mezők: **facebook-alkalmazás-ID** és **Facebook nyelve**.

**Content**

| Beállítás | Mit csinál |
|---|---|
| **Type** | A beágyazás típusa: Post vagy Video. |

Ha a **Type** értéke **Post**:

| Beállítás | Mit csinál |
|---|---|
| **Post URL** | A Facebook-bejegyzés címe. |
| **Show Text** | Fotós és videós bejegyzéseknél a bejegyzés szövegének megjelenítése, ha van. |

Ha a **Type** értéke **Video**:

| Beállítás | Mit csinál |
|---|---|
| **Video URL** | A Facebook-videó címe. |
| **Show Text** | A videó szövegének megjelenítése, ha van. |
| **Allow Video Fullscreen** | Engedélyezi vagy tiltja a teljes képernyős lejátszást. |
| **Video Autoplay** | Az oldal betöltésekor automatikusan elindítja a videót, hang nélkül. A hangot a lejátszó vezérlőivel lehet bekapcsolni. Mobilon nem érvényes. |
| **Show Video Captions** | Alapból megjeleníti a feliratot, ha van. Csak asztali gépen érhető el. |

A **Design** fülön nincs saját beállítás, de szegélyt, lekerekítést, árnyékot és hasonlókat így is adhatsz hozzá.

## Divi Facebook-hozzászólások

Facebook-hozzászólásokat jelenít meg, így az olvasók a Facebook-fiókjukkal szólhatnak hozzá. A modul működéséhez kell a Facebook-alkalmazás-azonosító, amelyet a **Divi Supreme Pro → Közösségi média beállításai** fülön adsz meg (**facebook-alkalmazás-ID**, **Facebook nyelve**).

**Content**

| Beállítás | Mit csinál |
|---|---|
| **Page URL** | Melyik oldal hozzászólásait mutassa: a jelenlegi oldalét vagy egy egyedi URL-ét. Érdemes a jelenlegi oldal címét használni, hogy a hozzászólások az oldalhoz tartozzanak. |
| **Number of Posts** | Alapból megjelenő hozzászólások száma, legalább 1. |
| **Color Scheme** | Világos (light) vagy sötét (dark) színséma. |
| **Order by** | A hozzászólások sorrendje: **social**, **reverse_time** vagy **time**. |
| **Admin Label** | A modul neve a builderben. |

A sorrend értékei:

- **social**: a „Top” sorrend. A közösségi jelzések alapján a legrelevánsabb hozzászólások jönnek előre (ismerősöktől és ismerősök ismerőseitől, a sokat kedvelt vagy aktív szálak). A spamnek jelölt hozzászólások rejtve maradnak.
- **time**: időrend, felül a legrégebbi, alul a legújabb.
- **reverse_time**: fordított időrend, felül a legújabb.

A **Design** fülön a megszokott Divi-beállítások érhetők el: betűtípusok, színek, méretezés és térközök.

## Divi Facebook-tetszik gomb

Facebook „Tetszik” gombot tesz a bejegyzéseidbe, hogy a látogatók egy kattintással megoszthassák a tartalmat. A gomb mellé megosztás gomb is kérhető, amellyel a látogató személyes üzenetet fűzhet hozzá és kiválaszthatja, kivel osztja meg. A modulhoz a Facebook-alkalmazás-azonosító kell, amelyet a **Divi Supreme Pro → Közösségi média beállításai** fülön adsz meg (**facebook-alkalmazás-ID**, **Facebook nyelve**).

**Content**

| Beállítás | Mit csinál |
|---|---|
| **URL** | A Facebook-oldal címe. |
| **Layout** | Négy elrendezés közül választhatsz: **Standard** (a gomb és a kedvelések száma külön), **Button Count** (a gomb és a szám egy dobozban), **Button** (csak a gomb), **Box Count** (a szám a gomb fölött vagy alatt, külön). |
| **Color Scheme** | A gomb világos vagy sötét színsémája. |
| **Show Faces** | Megjeleníti-e a kedvelők arcát. Csak a Standard elrendezésnél működik. |
| **Action** | A gombon látható ige: like vagy recommend. |
| **Show Share Button** | Megosztás gomb a Tetszik gomb mellett. |
| **Size** | A gomb mérete: small vagy large. |

A **Design** fülön nincs saját beállítás, de szegélyt, lekerekítést, árnyékot és hasonlókat így is adhatsz hozzá.

## Divi Facebook-hírfolyam

Egy Facebook-oldal hírfolyamát jeleníti meg, külön beágyazás nélkül. A modulhoz a Facebook-alkalmazás-azonosító kell, amelyet a **Divi Supreme Pro → Közösségi média beállításai** fülön adsz meg (**facebook-alkalmazás-ID**, **Facebook nyelve**).

**Content**

| Beállítás | Mit csinál |
|---|---|
| **Facebook Page URL** | A Facebook-oldal címe. |
| **Tabs** | A megjelenő fülek: Timeline, Events, Messages. Bármelyik kikapcsolható. |
| **Hide Cover Photo** | Elrejti a fejléc borítóképét. |
| **Use Small Header** | Kisebb fejlécet használ. |
| **Show Face Pile** | Megjeleníti azok profilképét, akik ismerősként kedvelték az oldalt. |
| **Admin Label** | A modul neve a builderben. |

**Design**

| Beállítás | Mit csinál |
|---|---|
| **Alignment** | A hírfolyam igazítása: balra, jobbra vagy középre. |
| **Sizing**, **Height** | A hírfolyam magassága pixelben, legalább 70. |

### A Facebook-alkalmazás-azonosító beszerzése

Az azonosítóhoz Facebook-fiók kell. Lépések:

1. Jelentkezz be a Facebook-fiókodba, és nyisd meg a Facebook fejlesztői oldalát.
2. Az **Add a New App** gombbal hozz létre egy új alkalmazást.
3. Adj neki nevet (például „Divi Supreme”), és kattints a **Create App ID** gombra.
4. A **Settings → Basic** oldalon töltsd ki a kért mezőket: a domaint (a saját domained legyen), az adatvédelmi nyilatkozat és a felhasználási feltételek URL-jét, majd mentsd a változtatásokat.
5. Másold ki az alkalmazás-azonosítót. Előtte állítsd az alkalmazás állapotát **LIVE** értékre.