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

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.