Modulok: szöveg és tartalom

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 `
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.