Modulok: képek, galériák és carouselek

Ebben a fejezetben a képekkel, galériákkal, carouselekkel, kártyákkal és animációkkal dolgozó modulok szerepelnek. 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.

Minden modul Advanced fülén egyedi CSS-azonosítót és osztályt adhatsz meg, saját CSS-t írhatsz, és beállíthatod, melyik eszközön látszódjon a modul. Ezt lent nem ismételjük meg minden modulnál.

Divi előtte-utána képes diavetítés

Két kép összehasonlítására való: a látogató egy fogantyút húz a két változat fölött. A két képnek ugyanakkorának kell lennie, különben rosszul fog kinézni.

Content

Beállítás	Mit csinál
Before/After Image (kép)	Az első kép az „előtte”, a második az „utána” változat.
Before/After Image Alternative text	A kép HTML ALT szövege, rövid leírás.
Before/After Image Title Text	A kép HTML Title szövege.
Before Label text / After Label text	Az „előtte” és az „utána” felirat saját szövege.
Show Labels on Hover	Bekapcsolva a feliratok csak rámutatáskor látszanak, kikapcsolva mindig.
Default Offset Percentage	A fogantyú kezdőhelye betöltéskor. A 0 a bal szél, a 0.5 a közép.
Orientation	A fogantyú iránya: Horizontal (vízszintes) vagy Vertical (függőleges).
No Overlay	Kikapcsolja a rámutatáskor megjelenő színes réteget.
Move Slider on Hover	A fogantyú követi az egér mozgását.
Move Slider with Handle	A látogató a kép bármely pontján húzhatja (swipe) a fogantyút.
Click to Move slider	Kattintásra (vagy koppintásra) a fogantyú a megérintett helyre ugrik.

Design

• Before and After Label: a feliratok háttérszíne, betűtípusa, mérete, színe és a többi szövegbeállítás.
• Overlay: a rámutatáskor megjelenő réteg színe.
• Handle Slider: Handle Border Color (a fogantyú keretének színe), Handle Border Radius (a középső ikon lekerekítése), Handle Background Color (az ikon háttere), Handle Arrow Color (az ikon színe).
• A modul keretet, lekerekítést és árnyékot is kaphat, mint a többi Divi modul.

Divi blob alakú kép

Képet tesz szerves, „blob” alakba, opcionálisan szöveges réteggel és színátmenettel.

Content

Beállítás	Mit csinál
Image	A megjelenítendő kép.
Blob Shapes	13 blob alak közül választhatsz.
Title	Az átfedő réteg címe.
Description	Az átfedő réteg leírása.
Show Content on Hover	Az átfedő tartalom csak rámutatáskor jelenik meg.

Design

• Blob Image Settings: a kép háttérként van elhelyezve. A Size értéke Cover vagy Initial, a Position a kép elhelyezése, a Blob Image Height a magasság. Keret, lekerekítés és árnyék is adható.
• Overlay: a Use Overlay bekapcsolása után választhatsz átfedő színt. A Use Gradient Overlay színátmenetet ad, és megjelennek a színátmenet szögének és eltolásának beállításai.
• Overlay Text: az átfedő cím és leírás stílusa, valamint a tartalom körüli térköz (Spacing).

Divi blokkos képfelfedés

A kép előtt először egy színes blokk rajzolódik ki, majd összehúzódik, és felfedi a képet. Négy irány közül választhatsz.

Content

Beállítás	Mit csinál
Image	A felfedendő kép.
Open in Lightbox	A kép kattintásra Lightboxban nyílik. Ha be van kapcsolva, az URL-beállítások figyelmen kívül maradnak.
Open as Video Popup	Az Image URL mezőbe videó URL-jét kell írni (YouTube, Vimeo, Dailymotion), kattintásra videós felugró ablak nyílik.
Block Reveal Animation style	Az irány: Left to Right, Right to Left, Top to Bottom vagy Bottom to Top.
Block Reveal Color	Az először megjelenő blokk színe.
Delay	Az animáció késleltetése.
Animate in Viewport	Az animáció csak akkor indul, amikor a modul a látható területre ér.

Design

• Overlay: az Image Overlay kapcsolóval színes réteget, ikont vagy mindkettőt adhatsz a képhez. Beállítható az Overlay Color, a Use Icon (ikon a Divi ikontárból, színezhető), valamint az átfedés lekerekítése, kerete és árnyéka. A lekerekítésnél a lánc ikonnal egyszerre vagy sarkonként állíthatod az értéket.
• A képnek is lehet lekerekítése, kerete és árnyéka.

Divi kártya

Egy kártya, amelyben szöveg, link, jelvény és kép együtt jelenik meg. A kép rámutatáskor nagyítható.

Content

Beállítás	Mit csinál
Title, Subtitle, Content	A kártya címe, alcíme és leírása. Ha törlöd a szöveget, az elem nem jelenik meg.
Image	A kártya képe.
Use Image as background	A kép háttérként szerepel, így a pozíciója és magassága állítható, és hover animációt kaphat.
Image Height	A kép magassága csúszkával.
Background Image animation	Négy animáció közül választhatsz a képhez.
Animation Speed (in ms)	A hover animáció sebessége ezredmásodpercben.
Badge Text	A jelvény szövege. A jelvényhez linket a link panelen adhatsz.
Use Icon	Ikont ad a kártyához, az ikont a listából választod.
Button text, Button URL	A gomb szövege és célcíme.

Design

• Layout & Alignment: a Layout Stacked (kép felül, tartalom alul) vagy Inline (kép és tartalom egy sorban). Inline esetén megjelenik a kép Width értéke, az Order Alignment (a kép balra vagy jobbra a tartalomtól) és a Horizontal Content Alignment (Top, Center, Bottom). A Use Equal Height egyforma magasságúra állítja a kártyákat. Az Image Height a képtároló magasságát adja, és csak akkor működik, ha a Use Image as background ki van kapcsolva. Az Image Vertical Alignment: Top, Bottom vagy Center.
• Image: Image Width, Image Alignment (Left, Right, Center), Stretch Image (a kép kitölti a helyét, maximális szélességgel, megtartva az arányt), továbbá az Image Overlay (Overlay Color, Use Icon), valamint a kép lekerekítése, kerete és árnyéka.
• Badge: Position (a jelvény helye a képen), Use Custom Position (saját pozíció), Background Color, Padding, a jelvény szövegének stílusa, lekerekítés, keret, árnyék.
• A cím, az alcím és a törzsszöveg betűtípusa, mérete, színe, vastagsága és árnyéka a saját design paneljükön állítható.
• Button: a Use Custom Styles for button bekapcsolása után a gomb úgy formázható, mint egy alap Divi gomb.

Egyforma magasságú kártyák. Kapcsold be a sor (Row) beállításai között a Design > Sizing > Equalize Column Heights opciót, és minden kártyán a Use Equal Height kapcsolót.

Gomb a kártya aljára. Egyforma magasságú kártyáknál a gombot lefelé igazíthatod. Ehhez a sor Equalize Column Heights opciója legyen bekapcsolva, és add hozzá ezt a CSS-t (például a Divi témabeállítások egyedi CSS mezőjébe vagy az oldal egyedi CSS-ébe):

.dsm_card_wrapper .et_pb_button_wrapper {
margin-top: auto;
}

Divi kártya-carousel

Kártyák (szöveg, link, jelvény, kép) carouselben. Van képes és videós Lightbox, és sok carousel-beállítás. A + Add new Item gombbal adsz hozzá elemet, minden elemnek saját Content, Design és Advanced füle van. Az elemeket a szürke sávon szerkesztheted, duplikálhatod vagy törölheted.

Content: carousel-beállítások

Beállítás	Mit csinál
Carousel Effect	Slide, Coverflow, Flip vagy Cube.
Coverflow beállítások	Coverflow esetén: Show Shadow (árnyék a következő képeken), Coverflow rotate (a következő képek dőlése), Coverflow Depth (nagyobb értéknél több elem látszik).
Carousel Direction	Left to Right vagy Right to Left.
Centered Mode	Az aktív dia középen van, nem mindig a bal szélen.
Slides to Show	Egyszerre látható diák száma, reszponzívan is állítható.
Slides to Scroll	Egy nyílkattintással hány diát lép.
Slides Speed	A váltás sebessége.
Autoplay, Autoplay Change interval	Automatikus léptetés, és a lépések közti idő.
Pause on Hover	Rámutatáskor megáll az automatikus léptetés.
Spacing	Térköz az elemek között.
Infinite Looping	Körbeforgó carousel. Kikapcsolva a végén nem lehet tovább lépni, csak vissza.
Equalize Card Heights	Az elemek 100% magasak, így egyformák.
Show Arrow	A nyilak megjelenítése.
Show Pagination	A lapozópontok megjelenítése.
Disable Touch/Dragging	Kikapcsolja az érintéssel vagy húzással léptetést.
Use Grab Cursor	Az egérkurzor „megfogó” kéz lesz.

Content: egy elem

Beállítás	Mit csinál
Title, Subtitle, Content	Cím, alcím, leírás (üresen az elem eltűnik).
Image	Az elem képe.
Use Image as background, Image Height, Background Image animation, Animation Speed (in ms)	Mint a Divi kártyánál.
Open as Image Lightbox	A kép kattintásra Lightboxban nyílik, külön kiválasztható képpel.
Open as VideoLightbox	Kattintásra videó nyílik felugró ablakban, a videó URL-jét kell megadni.
Badge Text	A jelvény szövege, linkje a link panelen állítható.
Button text, Button URL	A gomb szövege és célcíme.
Gomb: Open as Image Lightbox	A gombra kattintva kép nyílik Lightboxban.
Gomb: Open as Video Lightbox	A gombra kattintva videó nyílik. A videó linkjét a Button URL mezőbe kell írni.

Design: a modulon

• Layout & Alignment: Layout (Stacked vagy Inline), Inline esetén Width, Order Alignment és Horizontal Content Alignment.
• Image: Image Width, Stretch Image, Image Alignment (Left, Right, Center), lekerekítés, keret, árnyék.
• Badge: Position, Background Color, Padding, a szöveg stílusa, lekerekítés, keret, árnyék.
• Arrow Element: Arrow Position és Mobile Arrow Position (a nyilak a carouselen belül vagy kívül), Use Arrow Custom position (saját hely mindkét nyílnak), Use Custom Previous Arrow Icon és Use Custom Next Arrow Icon (saját ikon a Divi ikontárból), Arrow Size, Arrow Color, Arrow Background Color, Arrow Rounded Corners, Arrow Border and Box Shadow.
• Pagination Element: Pagination Horizontal Placement, Pagination Active Color, Pagination In-Active Color.
• A cím, alcím és törzsszöveg stílusa a design paneleken állítható.
• Button: Use Custom Styles for the button után alap Divi gombként formázható. Az Align Button Vertically Top, Center vagy Bottom igazítást ad, és csak akkor látszik, ha a carousel-beállításoknál az egyforma magasság be van kapcsolva.
• Border: a kártya lekerekítése (Card Corner Radius) és kerete (Card Border). Box Shadow: egy kártya árnyéka.

Design: egy elemen

• Image: Image Overlay (Overlay Color, Use Icon), lekerekítés, keret, árnyék.
• Badge: Position, Use Custom Position, Background Color, Padding, szövegstílus, lekerekítés, keret, árnyék.
• A szövegek és a gomb (Use Custom Styles for the button) formázása, mint fent.

Divi blog-carousel

A blogbejegyzéseket carouselben mutatja.

Content

Beállítás	Mit csinál
Post Count	Hány bejegyzés jelenjen meg.
Included Categories	Melyik kategóriák bejegyzései látszanak, vagy „All Category”.
Date Format	A dátum formátuma.
Show Featured Image, Show Title, Show Excerpt, Show Date, Show Category, Author	Az egyes elemek megjelenítése.
Excerpt Text	A kivonat hossza számmal.
Meta Separator	Saját elválasztójel a meta adatok között.
Readmore Button	Tovább gomb minden kártyán. Alatta: Readmore Text (a gomb szövege) és Read More Link Target (ugyanabban a lapon vagy új ablakban nyíljon).
Show Bottom Meta Elements	Alul a szerző képe és neve, valamint a közzététel dátuma. Külön kikapcsolható: Bottom Date, Bottom Author.
Carousel Effect	Slide, Coverflow, Flip vagy Cube.
Carousel Direction	Left to Right vagy Right to Left.
Columns	Hány oszlop látszik.
Use Multiple Row	Több sor bejegyzés. A „Row Per Slide” mezőben adod meg a sorok számát.
Centered Mode	Az aktív dia középen van.
Spacing	Térköz az elemek között.
Transition Duration	A léptetés időtartama.
Infinite Looping	Körbeforgás, kikapcsolva a végén nem lehet tovább lépni.
Autoplay	Automatikus léptetés. Alatta: Autoplay Speed (lépések közti idő) és Pause on Hover.
Pagination	A lapozópontok ki- vagy bekapcsolása.
Navigation	A nyilak ki- vagy bekapcsolása.
Use Equal Height	Egyforma magasságú kártyák.

Design

• Post Item: Post Item Padding, Background Color, lekerekítés, keret, árnyék a kártyákra.
• Post Thumbnail: Thumbnail Height, lekerekítés, keret, árnyék, szűrők.
• Post Entry Title: a cím stílusa, a címsor szintjével (Heading Level) együtt. Post Entry Summary: a kivonat stílusa. Post Entry Meta: a dátum, kategória és szerző stílusa külön-külön, plusz Alignment (Left, Right, Center).
• Readmore: a Use Custom Styles for Readmore után alap Divi gombként formázható. Az Align Button Vertically (Top, Center, Bottom) csak bekapcsolt egyforma magasságnál látszik.
• Navigation: Navi Vertical Position, Left Navigation Position, Right Navigation Position, Navi Arrow Icon Size, Custom Prev Arrow Icon, Custom Next Arrow Icon (ikon a Divi ikontárból), Arrow Color, Arrow Background Color, lekerekítés, keret, árnyék.
• Pagination: Pagination Position (függőleges hely), Pagination Color, Pagination Active Color, Pagination Button Style: Default, Dynamic vagy Progress Bar.
• Bottom Meta Items: Image Width (a szerző képének szélessége), a név és a dátum stílusa, a szerzőkép lekerekítése, kerete, árnyéka.
• Overlay: a miniatűrön rámutatáskor megjelenő réteg, ikonnal a Divi ikontárból. Beállítható az Overlay Icon Color, az Overlay Icon Size és az Overlay Background Color.

Divi bejegyzés-carousel

Mint a blog-carousel, de tetszőleges bejegyzéstípusra is használható. A blogbejegyzésekhez a blog-carousel való.

Content

Beállítás	Mit csinál
Post Type	Melyik bejegyzéstípus jelenjen meg.
Post Count	Hány bejegyzés látszik.
Date Format	A dátum formátuma.
Show Featured Image, Show Title, Show Excerpt, Show Date, Author	Az egyes elemek megjelenítése.
Excerpt Text	A kivonat hossza számmal.
Meta Separator	Saját elválasztójel.
Readmore Button, Readmore Text	Tovább gomb és a szövege.
Show Bottom Meta Elements	Alul a szerző képe, neve és a dátum. Külön kikapcsolható: Bottom Date, Bottom Author.
Carousel Effect	Slide, Coverflow, Flip vagy Cube.
Columns	Hány oszlop látszik.
Use Multiple Row	Több sor bejegyzés („Row Per Slide”).
Centered Mode	Az aktív dia középen van.
Spacing	Térköz az elemek között.
Transition Duration	A léptetés időtartama.
Infinite Looping	Körbeforgás.
Autoplay	Automatikus léptetés. Alatta: Autoplay Speed, Pause on Hover.
Pagination, Navigation	Lapozópontok és nyilak ki- vagy bekapcsolása.
Use Equal Height	Egyforma magasságú kártyák.

Design

• Post Item: Post Item Padding, Background Color, lekerekítés, keret, árnyék.
• Post Thumbnail: Thumbnail Height, lekerekítés, keret, árnyék, szűrők.
• Post Entry Title, Post Entry Summary, Post Entry Meta (a meta Alignment értéke Left, Right vagy Center): a szövegek stílusa.
• Readmore: a Use Custom Styles for Readmore után alap Divi gombként formázható.
• Navigation: Navi Vertical Position, Left Navigation Position, Right Navigation Position, Navi Arrow Icon Size, Custom Prev Arrow Icon, Custom Next Arrow Icon, Arrow Color, Arrow Background Color, lekerekítés, keret, árnyék.
• Pagination: Pagination Position, Pagination Color, Pagination Active Color, Pagination Button Style: Default, Dynamic vagy Progress Bar.
• Bottom Meta Items: Image Width, a név és a dátum stílusa, a szerzőkép lekerekítése, kerete, árnyéka.
• Overlay: a miniatűrön rámutatáskor megjelenő réteg ikonnal, Overlay Icon Color, Overlay Icon Size, Overlay Background Color.

Divi képcarousel

Képek sorozata carouselben: portfólióhoz, ügyféllogókhoz és hasonlóhoz.

Content

Beállítás	Mit csinál
+Add Gallery Images	Több kép kiválasztása a médiatárból.
Order by	Default (a kiválasztás sorrendje) vagy Random (véletlen sorrend).
Image Size	Az összes kép mérete.
Carousel Effect	Slide, Coverflow, Flip vagy Cube.
Coverflow beállítások	Show Shadow, Coverflow rotate, Coverflow Depth.
Carousel Direction	Left to Right vagy Right to Left.
Centered Mode	A következő kép félig látszik, jelezve, hogy van még tartalom.
Slides to Show	Egy diában látható képek száma.
Slides to Scroll	Egy nyílkattintással hány diát lép.
Slider Speed	A léptetés sebessége.
Use Multiple Row	Több sor kép („Row Per Slide”).
Autoplay, Autoplay Change interval	Automatikus léptetés és a lépések közti idő.
Spacing	Térköz a képek között.
Infinite Looping	Körbeforgás.
Show Arrow, Show Pagination	Nyilak és lapozópontok.
Disable Touch/Dragging	Kikapcsolja az érintéssel vagy húzással léptetést.
Use Grab Cursor	Megfogó kéz kurzor.

Content: Lightbox

Beállítás	Mit csinál
Open Image in Lightbox	Kattintásra a kép Lightboxban nyílik. Bekapcsolva további beállítások jelennek meg.
Image Size	A kép mérete a Lightboxban.
Lightbox in Gallery Mode	A Lightboxban nyilakkal lehet váltani a carousel többi képére.
Display Caption	A kép felirata is látszik. A feliratot a médiatárban állíthatod be.

Design

• Layout: Horizontal Alignment, hasznos, ha kis és nagy képek vegyesen vannak.
• Element: Arrow Position és Mobile Arrow Position (belül vagy kívül), Arrow Size, Arrow Color, Arrow Background Color, Pagination Placement (függőleges hely), Pagination Active Color, Pagination In-Active Color.
• Image: lekerekítés, keret, árnyék a képekre.

Link a képekhez. Nyisd meg a képet a médiatárban, és add meg az egyedi URL-t. Kattintáskor a látogató oda jut. Ez csak a Supreme modulokon belül működik. Ha letölthető fájlt szeretnél, add meg a fájl URL-jét, és jelöld be a „Download as File” opciót.

Divi képes harmonika

Képek hover vagy kattintás hatására táguló harmonikában. Elemenként lehet ikon, kép, cím, leírás és gomb.

A + Add new Item gombbal adsz hozzá elemet, minden elemnek saját Content, Design és Advanced füle van. Az elemeket a szürke sávon szerkesztheted, duplikálhatod vagy törölheted.

Content: a modulon

Beállítás	Mit csinál
Accordion Type	Hover vagy Click: rámutatásra vagy kattintásra nyílik.
Accordion Content Animation	Öt animáció közül választhatsz a tartalom megjelenéséhez.
Use Sequenced Animation	Az elemek (cím, leírás, gomb, ikon) külön-külön animálódnak.
Accordion Direction	Horizontal vagy Vertical.
Accordion Height	A harmonika magassága.

Content: egy elem

Beállítás	Mit csinál
Make Item Expanded	Az elem alapból kinyitva jelenik meg.
Image	Az elem fő képe.
Use Icon	Bekapcsolva ikon, kikapcsolva kép szerepel az ikon helyén.
Title, Description	Az elem címe és leírása.
Show Button	Gomb az elemben, bekapcsolás után kéri a szöveget és az URL-t.
Horizontal Align	A tartalom vízszintes igazítása: Left, Right, Center.
Vertical Align	A tartalom függőleges igazítása: Top, Bottom, Center.

Design: a modulon

• Overlay: az Overlay Color bármilyen RGBA értékre állítható, és a képre kerül, hogy a szöveg jobban olvasható legyen.
• Icon: Icon Color, Use Icon Font Size (a méret fogantyúval állítható).
• Icon Image: ha az ikon helyett képet használsz, ennek kerete, lekerekítése és árnyéka itt állítható.
• Title: Title Heading Level (H1-től H6-ig) és a szöveg további stílusa.
• Description: a leírás stílusa, mint a Szöveg modul bekezdéséé.
• Button: a Use Custom Styles for Button után alap Divi gombként formázható.

Design: egy elemen

• Overlay: Overlay Color, a Hover opcióval rámutatáskor másik szín is adható. Az elemeknél ez a legjobb használat.
• Title, Description, Button: mint a modulon.
• Sizing: Content Width, a tartalom szélessége.

Divi képi hotspotok

Képre tehetsz pontokat (hotspotokat), amelyek rámutatásra vagy kattintásra felugró magyarázatot (tooltip) mutatnak.

Content

Először az Image mezőben add meg a képet, utána a + Add new Item gombbal adj hozzá hotspotokat. Minden hotspotnak saját Content, Design és Advanced füle van. A hotspotokat a szürke sávon szerkesztheted, duplikálhatod vagy törölheted.

Content: egy hotspot

Beállítás	Mit csinál
Hotspot Type	A hotspot gombja: Icon (ikon a Divi ikontárból), Image (kép a médiatárból) vagy Text (szöveg, megjelenik egy szövegmező).
Use Tooltip	Be- vagy kikapcsolja a felugró magyarázatot.
Content	A tooltip szövege.
Background	A hotspot háttere: szín, színátmenet, kép vagy videó.

Design: a modulon (minden hotspotra érvényes)

Ha mindegyik hotspot egyformán nézzen ki, itt stílusozd őket. Ha eltérőek legyenek, az elemek saját Design fülén.

Beállítás	Mit csinál
Hotspot text	Szöveges hotspotnál a szöveg színe, mérete, vastagsága.
Trigger Event	Mouse Enter (rámutatásra), Mouse Enter & Click (rámutatásra, és kattintás után is marad), Mouse Enter & Focus (rámutatásra, kattintásra eltűnik), Click (kattintásra), Click & Focus (kattintásra, újabb kattintásra eltűnik).
Padding, Border Radius, Border	A hotspot belső térköze, lekerekítése és kerete.
Icon Color, Icon font Size	A hotspot ikonja.
Tooltip: Background Color, Tooltip Padding, Tooltip Max Width	A tooltip háttere, belső térköze és legnagyobb szélessége.
Tooltip Delay Show, Tooltip Delay Hide	Késleltetés a megjelenéshez és az eltűnéshez, csúszkával.
Tooltip Heading Text, Tooltip Body Text	A tooltip címsorának és törzsszövegének stílusa.
Image: Alignment, Image Box Shadow	A kép igazítása és árnyéka.
Sizing: Force Fullwidth	Teljes szélességre húzza a képet, utána a Width mezővel egyedi szélesség adható.

Design: egy hotspoton

Beállítás	Mit csinál
Hotspot Text	Szöveges hotspot szövegének stílusa.
Left Position, TOP Position	A hotspot helye a képen csúszkákkal.
Padding, Border Radius, border	A hotspot térköze, lekerekítése, kerete.
Hotspot Image width, Hotspot Image Rounded Corners, Hotspot Image Border, Hotspot Image Box Shadow	Képes hotspot stílusa.
Icon Color, Icon font Size	Ikonos hotspot stílusa.
Tooltip Animation	Öt animáció közül választhatsz.
Background color, Padding, Tooltip Max Width	A tooltip háttere, térköze, legnagyobb szélessége.
Placement	A tooltip helye a hotspothoz képest: Top, Bottom, Left vagy Right.
Tooltip Heading Text, Tooltip Body Text	A tooltip szövegeinek stílusa.

Divi kép felfedése rámutatáskor

Rámutatáskor a felső kép 5 darabra szeletelődik, és nagyítási animációval újra felfedi a képet. Négy animáció közül választhatsz.

Content

Beállítás	Mit csinál
Image	A kép. Mindig az oszlop teljes szélességét kitölti, de nem lesz nagyobb az eredeti feltöltött méreténél. A magasságot az eredeti kép aránya adja.
Admin Label	A modul neve a builderben, könnyebb azonosításhoz.

Design

• Sizing > Height: a kép magassága, alapértéke 260px.
• Animation > Image Reveal Animation: Vertical Slide Down, Vertical Slide Up, Horizontal Slide Right vagy Horizontal Slide Left.

Divi kép szövegének felfedése

Rámutatáskor egy réteg balról becsúszik, eltakarja a képet, és megmutat egy szöveget. Az egér elhagyásakor a réteg jobbra kicsúszik. A szövegnek 30-nál több animációja van.

Content

Beállítás	Mit csinál
Reveal Text	A felfedett szöveg.
Image	A kép. Kitölti az oszlop szélességét, de nem nagyobb az eredeti méreténél.
Admin Label	A modul neve a builderben.

Design

• Overlay > Reveal Overlay Color: a takaró réteg színe.
• Animation: a szöveg animációja, több mint 30 közül.

Divi lebegő képek

Több kép, amely lebegő animációval mozog fel-le vagy balra-jobbra.

Content

Beállítás	Mit csinál
+ Image Item	Egy kép hozzáadása. Minden képnek saját Content, Design és Advanced füle van, a szürke sávon szerkesztheted, duplikálhatod vagy törölheted.
Floating Effect	Up Down vagy Left Right.
Image animation delay interval (in ms)	Az animáció indításának késleltetése ezredmásodpercben.
Animation Speed	A lebegés sebessége.
Image (elemenként)	A kép. Az oszlop szélességét kitölti, de nem lesz nagyobb az eredeti méreténél.
Open in Lightbox	A kép kattintásra Lightboxban nyílik.

Design > Sizing

• Horizontal Align: a kép vízszintes helye százalékban.
• Vertical Align: a kép függőleges helye százalékban.
• Width: a kép szélessége.

Divi szűrhető galéria

Képgaléria, amelyet a képekhez rendelt kategóriák szerint lehet szűrni.

Kategóriák létrehozása és hozzárendelése. Kategóriát a Dashboard > Media > Categories oldalon hozhatsz létre és szerkeszthetsz. Kategóriát a médiatárban a kép megnyitása után a jobb oldali sávban rendelhetsz a képhez. Ugyanez megy a Divi Builderben is: a modul beállításaiban a + ikonnal új képet veszel fel a médiatárból, és a jobb sávban hozzárendeled a kategóriákat.

Content

Beállítás	Mit csinál
Use Dynamic Images	Megjelennek a kategóriák, és csak a kiválasztott kategóriák képei látszanak.
Images	Kézzel feltöltött képek, húzással átrendezhetők.
Number of Columns	Oszlopok száma.
Image Size	A kép mérete előre megadott méretek közül.
Column Gap, Row Gap	Az oszlopok és a sorok közti térköz.
Speed	A szűrés animációjának sebessége.
Layout	Card vagy Overlay. Overlay esetén megjelenik az Image Height (a kép magassága), a Hover (Fade In, Zoom vagy None) és a Hover Transition (az átmenet időtartama).
Enable Filterable Gallery	A szűrősáv megjelenítése felül.
Show All Images Text	Az „All” fül megjelenítése, amely az összes képet mutatja. Alatta az All Images Text a fül saját felirata.
Show Title, Show Caption, Show Description	A kép címe, felirata és leírása. Ezeket a médiatárban adod meg.
Use Lightbox	A képek Lightboxban nyílnak.
Show Pagination	Lapozás sok kép esetén, típusa a Pagination panelen állítható.
Items Per Page	Hány kép látszik egy oldalon.
Pagination Type	„Load More” gomb vagy számozott lapozás.

Design

• Title, Caption, Description: a szövegek betűtípusa, mérete, színe, vastagsága és a többi szövegbeállítás.
• Card (Card elrendezésnél): Background Color, Padding, keret, lekerekítés, árnyék.
• Image: Margin, Padding, keret, lekerekítés, árnyék.
• Content Wrapper: Margin, Padding, keret, lekerekítés, árnyék.
• Overlay (Overlay elrendezésnél): a rámutatáskor megjelenő réteg Background Color és Padding értéke.
• Category Tab: Alignment, Inactive BG Color, Active BG Color, Inactive Color, Active Color, Margin, Padding, valamint betűméret, szín, vastagság, keret, lekerekítés és árnyék normál és aktív állapotra.
• Pagination (számozott lapozás): Inactive BG Color, Active BG Color, Inactive Color, Active Color, Margin, Padding, Alignment, plusz betűbeállítások, keret, lekerekítés, árnyék normál és aktív állapotra.
• Load More: Background Color, Margin, Padding, betűbeállítások, keret, lekerekítés, árnyék.

Link a képekhez. Nyisd meg a képet a médiatárban, és add meg az egyedi URL-t. Kattintáskor a látogató oda jut. Ez csak a Supreme modulokon belül működik.

Divi masonry elrendezésű galéria

Képek masonry (téglafal) elrendezésben, például portfólióhoz.

Content

Beállítás	Mit csinál
Gallery	A galéria képei a médiatárból.
Use Overlay	Rámutatáskor réteg jelenik meg a kép címével és leírásával. Ezeket a médiatárban kell kitölteni.
Use Lightbox	A képek Lightboxban nyílnak, nyilakkal lehet váltani köztük.
Use Horizontal Order	A képek vízszintes sorrendbe rendeződnek.
Use Zoom on Hover	Rámutatáskor a képek nagyítási effektet kapnak.

Design

• Grid Layout: Columns (az oszlopok száma, a reszponzív opcióval mobilra külön megadható) és Columns Gaps (az oszlopköz).
• Grid Items: a képek lekerekítése és kerete (Grid Item Rounded Corners and Border), árnyéka (Grid Item Box Shadow).
• Overlay: Show Image Overlay Title, Show Image Overlay Description (kikapcsolhatók), Overlay Color, valamint a cím és a leírás betűtípusa, mérete, vastagsága és a többi szövegbeállítás.

Az átfedés címe és leírása. A WordPress médiatárban szerkeszd a kép címét és leírását, ezek jelennek meg az átfedésben. A „LINK URL” mezőbe (a „Divi Supreme Modules Only” szakaszban) egyedi URL-t is megadhatsz a képhez.

Divi véletlenszerű kép

A feltöltött képek közül véletlenszerűen mutat egyet. Az optimális működéshez kapcsold ki a gyorsítótárazást azon az oldalon, ahol a modul van.

Content

Beállítás	Mit csinál
Images	A véletlenszerűen megjelenítendő képek.
Image Size	A kép mérete, vagy marad a „Full Size”.
Use Image Link URL	Minden képnek lehet saját URL-je.
Lightbox	Bekapcsolva a kép kattintásra Lightboxban nyílik.
Lightbox: Image Size	A kép mérete csak a Lightboxban, vagy marad a „Full Size”.

Design

• Overlay: Image Overlay (a réteg ki- és bekapcsolása), Show Overlay on Hover (csak rámutatáskor látszik), Overlay Icon Color, Overlay Color (az átlátszóság csúszkával állítható), Icon Picker (az ikon kiválasztása).
• Image: lekerekítés, keret, árnyék, szűrők és további képbeállítások.

Divi görgethető kép

Hosszú kép, amely rámutatáskor lefelé vagy felfelé görgetődik a modulon belül.

Content

Beállítás	Mit csinál
Image	A kép a médiatárból.
Open in Lightbox	Kattintásra a kép Lightboxban nyílik.
Image link URL	A kép linkje, és a megnyitás módja (Target).
Use as a Video Popup	Kattintásra videó nyílik Lightboxban. A videó URL-jét az Image Link URL mezőbe kell írni.
Scroll Speed (in s)	Hány másodperc alatt görgetődik végig a kép, csúszkával.
Scroll Reverse Direction	Alapból fentről lefelé görget, bekapcsolva lentről felfelé.

Design

• Overlay: az Overlay a képet fedő szín és ikon rámutatáskor. Beállítható az Overlay Color, a User Icon (az ikon ki- és bekapcsolása), az Overlay Icon color, az Icon Picker (ikon a Divi ikontárból), a Show Overlay on Hover (kikapcsolva a réteg mindig a képen marad), valamint a réteg lekerekítése és kerete (Overlay Border Radius and Border).
• Lightbox: ha a Link panelen Lightboxot vagy videót állítottál be, itt formázhatod: Close Color (a bezáró ikon színe) és Overlay Max Width (a legnagyobb szélesség).

Divi kép

Kép 3D-s átalakítással: perspektívával és forgatással.

Content

Beállítás	Mit csinál
Image	A kép. Kitölti az oszlop szélességét, de nem lesz nagyobb az eredeti méreténél.
Open in Lightbox	Kattintásra a kép teljes méretben, felugró ablakban nyílik.
Link URL	Linkké teszi a képet. Üresen a kép statikus marad.
Use as Video Popup	Kattintásra videó nyílik, a videó URL-jét kell megadni.
Perspective	A 3D-s tér mélysége, az érték határozza meg a hatás erősségét.
Rotate Y	Forgatás a függőleges tengely körül.
Rotate X	Forgatás a vízszintes tengely körül.
Rotate Z	Forgatás a z tengely körül.
Admin Label	A modul neve a builderben.

Design

• Overlay: az Image Overlay rámutatáskor színt és ikont ad a képre. Beállítható az Overlay Color, a Use Icon, az Overlay Icon Color, az Icon Picker (ikon a Divi ikontárból), a Show overlay on Hover (kikapcsolva a réteg mindig látszik), valamint a réteg lekerekítése és kerete.
• Alignment: Image Alignment (balra, jobbra vagy középre) és Always Center Image On Mobile (mobilon a kép középre igazodik, az asztali igazítás változatlan marad).

Divi billenthető kép

Interaktív, egérmozgásra billenő kép. Rá ikon vagy szöveg is tehető.

Content

Beállítás	Mit csinál
Image	A kép. Kitölti az oszlop szélességét, de nem lesz nagyobb az eredeti méreténél.
Disable on Mobile	Mobilon kikapcsolja a billenést.
Perspective	Minél kisebb az érték, annál szélsőségesebb a billenés.
Scale	Nagyítás rámutatáskor. A 2 a 200%, az 1.5 a 150%.
Max Rotation	A legnagyobb dőlés. Minél kisebb, annál kevésbé dől.
Speed	A belépő és kilépő átmenet sebessége.
Use Glare	Rámutatáskor fényvisszaverődés-effekt. Alatta a GLARE a csillogás átlátszósága.
Reverse	Megfordítja a billenés irányát.
Use 3D Pop Out Effect	Térbeli kiemelést ad a kép és az átfedés között. Alatta az OVERLAY 3D POP OUT a kettő távolságát adja.
Open in Lightbox	Kattintásra a kép teljes méretben, felugró ablakban nyílik.
Link URL	Linkké teszi a képet. Üresen a kép statikus.
Use Icon	Az átfedésen ikon jelenik meg.
Overlay Title	Az átfedés címe.
Overlay Content	Az átfedés szövege.
Show on Hover	Az átfedés szövege csak rámutatáskor látszik.
Admin Label	A modul neve a builderben.

Design

• Overlay: Overlay Icon Color, Overlay Color, Use Icon Font Size (az ikon saját méretének megadása).
• Alignment: Image Alignment (balra, jobbra, középre) és Always Center Image On Mobile.
• Overlay Text: az átfedő cím és szöveg betűtípusa, színe, igazítása, és a Text Vertical Alignment (a szöveg függőleges igazítása).

Divi alakzatok

Színes alakzat, amelyhez nem kell képfájl vagy egyedi kód.

Content

Beállítás	Mit csinál
Type	16 alakzat közül választhatsz: Square, Circle, Rectangle, Oval, Trapezoid, Parallelogram, Diamond Square, Hexagon, és 8 féle Blob.
Size	Az alakzat mérete.

Design

Beállítás	Mit csinál
Shape Color	Az alakzat színe.
User Border	Bekapcsolva keretet és lekerekítést adhatsz az alakzathoz.
Shapes Shadow	Árnyék az alakzathoz.

Az alakzat helyének módosítása, háromféleképpen:

• Margin: külső térközt ad, növelve a távolságot a többi elemtől.
• Transform > Translate: a Translate fülön a megjelenő dobozt mozgatva bárhová áthelyezheted az alakzatot.
• Position (Advanced fül): a pozíció típusa Relative vagy Absolute, az alakzat csúszkákkal vagy beírt értékkel mozgatható.

Divi Lottie

After Effects animációk megjelenítése a Divi oldalon, Lottie JSON fájlból.

Content

Beállítás	Mit csinál
Lottie JSON File	A LottieFiles oldalról letöltött .JSON fájl feltöltése.
Loop	Ismétli az animációt.
Number of Times	Hányszor ismétlődjön. A 2 azt jelenti, hogy kétszer ismétlődik, utána megáll.
Direction	Normal vagy Reverse.
Speed (More is Faster)	A sebesség, a nagyobb érték gyorsabb.
Trigger	Bekapcsolva az animációt esemény indítja.
Trigger Method	Play Animation on Hover/Mouse over (rámutatásra), Play Animation on Click (kattintásra), Play Animation on Scroll (görgetésre).
Relative To	Görgetéses indításnál mihez viszonyít: jelenleg az Entire Page (teljes oldal).
On Mouseout action	Csak Hover indításnál látszik: Stop, Pause vagy Reverse, amikor az egeret elviszed a modulról.
Animate in Viewport	Az animáció egy megadott látómezőben játszódik le.

Design: nincs szükség külön beállításra, de kaphat árnyékot, lekerekítést és a szokásos Divi design opciókat.

Divi SVG animáció

SVG ábra animálása kód nélkül.

Content

Beállítás	Mit csinál
Use SVG Code	SVG fájl helyett SVG kódot használsz.
SVG File	Az SVG fájl feltöltése.
Type	Az animáció típusa: Delayed, Sync vagy One-by-One.
Animate Timing Function	A sebességgörbe.
Loop	Az animáció ismétlődik.
Unlimited	Végtelen ismétlés. Kikapcsolva megadhatod az ismétlések számát.
Trigger	Bekapcsolva választhatsz indítási módot.
Trigger Type	Start Animation when in Viewport (ha a modul a látható területre ér), Start on Hover (rámutatásra), Start on Click (kattintásra).
Speed	Az animáció sebessége, minél kisebb az érték, annál gyorsabb.
Delay	Az indítás késleltetése.

Design

• Alignment: az SVG igazítása.
• SVG: Color (az animáció színe) és Width (szélesség).

Divi átforduló doboz

Olyan doboz, mint a Blurb modul, de elő- és hátoldallal: rámutatásra vagy kattintásra átfordul. Több mint 15 effekt közül választhatsz. A + Flipbox Item gombbal adsz hozzá elemet, de csak kettőt hozz létre: az első az előlap, a második a hátlap. Az elemeket a szürke sávon szerkesztheted, duplikálhatod vagy törölheted.

Design: a modulon

Beállítás	Mit csinál
Sizing > Height	A doboz magassága, alapértéke 200px. Ha a tartalom túl hosszú, állítsd nagyobbra.
Trigger Animation On	Hover vagy Click.
Click On	Csak Click esetén látszik: a teljes dobozra kattintva vagy csak a gombra kattintva forduljon át.
Flipbox Type	Flip, Slide, Zoom In, Zoom Out vagy Fade.
Flip Animation	Flip Left, Flip Right, Flip Up vagy Flip Down.
3D Effect	Csak Flip típusnál látszik, térhatást ad.
Slide Animation	Csak Slide típusnál látszik: Slide Left, Slide Right, Slide Up vagy Slide Down.
Zoom In Animation	Nagyításos animáció.
Zoom Out Animation	Csak Zoom Out típusnál látszik: Zoom Out, Zoom Out Up, Zoom Out Down, Zoom Out Left vagy Zoom Out Right.
Animation Speed (in s)	Az animáció sebessége másodpercben.

Content: egy elem

Beállítás	Mit csinál
Title	Az elem címe, félkövér szöveggel.
Sub Title	Alcím a cím alatt, kisebb betűvel.
Content	A törzsszöveg, kitölti az oszlop szélességét.
Use Icon	Ikon vagy kép szerepel a szöveg mellett. Ha nem használsz ikont, képet kell feltölteni.
Icon	Ikon a listából.
Image	Kép, nem lesz nagyobb az eredeti méreténél. Egymás mellett elhelyezett dobozoknál jó, ha a képek egyforma magasak.
Button Text, Button URL	A gomb szövege és célcíme.
URL Opens	A link új ablakban nyíljon-e.

Design: egy elem

• Image & Icon: Icon Color (alapból a téma kiemelő színe), Circle Icon (az ikon színes körben), Circle Color, Show Circle Border és Circle Border Color, Use Icon Font Size (az ikon saját mérete).
• Sizing > Width: a kép legnagyobb szélessége, csak ikon nélküli dobozoknál hat.
• Spacing > Custom Padding: az elem belső margója mind a négy oldalon. Alapból pixelben számol, de más mértékegységet is beírhatsz. A saját érték törléséhez ürítsd ki a mezőt.
• Spacing > Custom Padding: belső térköz a doboz mind a négy oldalán. Alapból pixelben értendő, de más mértékegységet is beírhatsz. Az egyedi érték törléséhez töröld ki a mezőt.