Divi 5 modul: képkarusszel

A Supreme Image Carousel képek karusszelje portfólióhoz, termékképekhez, ügyféllogókhoz. A Divi Supreme kategóriában van a modulválasztóban, és a Divi Supreme Pro → Modulok beállításai fülön kell bekapcsolnod. A beállítások feliratai a builderben angolul maradnak. A szokásos Divi-csoportok (háttér, méret, térköz, szegély, árnyék, animáció) ott érhetők el, ahol a modul támogatja őket. Egyszerű dekorációs képhez elég a sima Divi kép modul, nagyon nagy képkészletnél pedig érdemes külön galéria-bővítményt használni.

1. Add hozzá a Supreme Image Carousel modult a Divi Supreme kategóriából.
2. A Content fülön válaszd ki a képeket az Image Carousel mezőben, és állítsd be a sorrendet, a képméretet.
3. Válaszd ki a típust (karusszel vagy diavetítés), és állítsd be a működését.
4. A Design fülön állítsd be a nyilak és a lapozópontok megjelenését.
5. Mentsd az oldalt, és nézd meg a weboldalon.

Content: képek

Beállítás	Mit csinál
Image Carousel	A karusszelben megjelenő képek kiválasztása.
Order By	A képek sorrendje.
Image Size	A használt WordPress-képméret. Ha a képhez a médiabeállításokban hivatkozást adsz meg, az érvényesül, különben a kép címére mutat.
Use Image Overlay	Szín vagy színátmenet kerül minden dia képére. Diavetítésnél a cím és a képaláírás alatt van. A színét a Design → Image Overlay csoportban állítod.
Image Fit	A kép illeszkedése a keretbe.
Image Position	A kép pozíciója a keretben.
Enabled Lazy Load	Bekapcsolva a fő karusszel késleltetett betöltést használ (a diák képein natív loading="lazy"), a diavetítés hátterei és az előnézeti sáv késleltetett háttér-URL-ekkel töltődnek. Kikapcsolva a képek azonnal betöltődnek. Egyes gyorsítótár- vagy teljesítménybővítmények módosíthatják a működést, ezért próbáld ki a saját oldaladon.

Content: típus és működés

Beállítás	Mit csinál
Type	Karusszel vagy diavetítés (slideshow).
Carousel Orientation	A karusszel iránya (vízszintes vagy függőleges).
Height	A karusszel magassága.
Carousel Effect	A váltás effektje. Az effekttől függően megjelenik a Show Shadow, a Coverflow Rotate és a Coverflow Depth beállítás.
Slideshow Effect	A diavetítés váltóeffektje.
Height (diavetítés)	A diavetítés magassága.
Carousel Direction	A haladás iránya.
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.
Slides To Scroll	Egy lépésben görgetett diák száma.
Use Multiple Row	Többsoros elrendezés.
Row Per Slide	A sorok száma többsoros elrendezésnél.
Slider Speed	A váltás sebessége.
Autoplay	Automatikus léptetés.
Autoplay Change Interval	Az automatikus léptetés időköze.
Autoplay Only On Viewport	Az automatikus léptetés csak akkor fut, ha a karusszel látszik a képernyőn.
Use Mouse Wheel	Az egérgörgő lépteti a diákat.
Pause on Hover	Egérráhúzásra megáll a léptetés.
Spacing	A diák közti rés.
Loop	Végtelen körbeforgás.
Infinite Smooth Scrolling	Folyamatos, egyenletes görgetés. Bekapcsolva a nyilak és a lapozópontok el vannak rejtve.
Show Arrow	Előző és következő nyíl.
Show Pagination	Lapozópontok, csak karusszel módban.
Disable Touch/Dragging	Letiltja az érintéses és egérrel húzós léptetést.
Use Grab Cursor	Megfogó egérkurzor.

Content: diavetítés előnézeti sávja

Beállítás	Mit csinál
Thumbnail To Show	Az előnézeti sávban látható bélyegképek száma.
Thumbnail Image Size	A bélyegképek WordPress-képmérete.
Thumbnail Image Ration	A bélyegképek képaránya.
Thumbnail Image Fit, Thumbnail Image Position	A bélyegképek illeszkedése és pozíciója.
Thumbnail Position	Az előnézeti sáv a fő diavetítés alatt, fölött, vagy szabadon elhelyezett fedőrétegként. A Custom értéknél a pozíció eltolását külön adod meg.

Content: diacím és leírás animációja

Diavetítésnél a dia képén cím és leírás jelenhet meg, külön be- és kimenő animációval.

Beállítás	Mit csinál
Show Slide Title	A csatolmány címe, ennek hiányában az alternatív szöveg fedőrétegként a diákon.
Slide Title Animation In	A cím belépő animációja az aktív dián, minden váltás után. Ha az animáció nem „None”, az Animate.css betöltődik.
Title Animation Duration	Az animáció hossza ezredmásodpercben (100 és 5000 között).
Title Animation Delay	Késleltetés ezredmásodpercben (0 és 3000 között).
Slide Title Animation Out	A cím kilépő animációja a következő dia előtt. „None” esetén azonnal vált.
Title Animation Out Duration, Title Animation Out Delay	A kilépő animáció hossza és késleltetése.
Show Slide Description	A csatolmány képaláírása, ennek hiányában a leírása a cím alatt.
Slide Description Animation In	A leírás belépő animációja (a Show Slide Description bekapcsolása kell hozzá), az időzítés a címével azonos szabályú.
Description Animation Duration, Description Animation Delay	A belépő animáció hossza és késleltetése.
Slide Description Animation Out	A leírás kilépő animációja a cím kilépésével együtt. A karusszel a leghosszabb kilépési időt megvárja.
Description Animation Out Duration, Description Animation Out Delay	A kilépő animáció hossza és késleltetése.
Content Wrapper Animation In	A cím és a leírás közös burkolójának belépő animációja. Az egyedi animációkkal együtt fut.
Wrapper Animation In Duration, Wrapper Animation In Delay	A burkoló belépő animációjának hossza és késleltetése.
Content Wrapper Animation Out	A burkoló kilépő animációja a cím és a leírás mellett.
Wrapper Animation Out Duration, Wrapper Animation Out Delay	A burkoló kilépő animációjának hossza és késleltetése.

Content: lightbox

Beállítás	Mit csinál
Open Image in Lightbox	A kép kattintásra lightboxban nyílik meg.
Image Size	A lightboxban használt képméret.
Lightbox in Gallery Mode	A lightbox galéria módban nyílik, léptethető a képek között.
Display Title	A lightbox megjeleníti a címet.
Display Caption	A lightbox megjeleníti a képaláírást vagy leírást.

Design

Beállítás	Mit csinál
Vertical Alignment	A tartalom igazítása.
Arrow Horizontal Position	A nyilak vízszintes helye.
Top Arrow Position, Bottom Arrow Position	A nyilak függőleges helye felül és alul.
Arrow Position	A nyilak a képen belül vagy kívül vannak, külön a számítógépre, a táblagépre és a telefonra.
Use Arrow Custom Position, Arrow Custom Position	Saját nyílpozíció bekapcsolása és értéke.
Use Custom Previous Arrow Icon, Previous Arrow Icon	Saját ikon az előző nyílhoz.
Use Custom Next Arrow Icon, Next Arrow Icon	Saját ikon a következő nyílhoz.
Arrow Size	A nyilak mérete.
Arrow Color, Arrow Background Color	A nyilak színe és háttere.
Pagination Horizontal Placement, Pagination Vertical Placement	A lapozópontok vízszintes és függőleges helye.
Pagination Active Color, Pagination In-Active Color	Az aktív és az inaktív pont színe.
Pagination Position	A lapozópontok elhelyezése.
Horizontal, Vertical	A diacím és a leírás vízszintes és függőleges igazítása.
Inactive Thumbnail Opacity	A ki nem választott bélyegképek átlátszósága (0 és 1 között, alapérték 0,4).
Active Thumbnail Opacity	A kiválasztott bélyegkép átlátszósága (0 és 1 között, alapérték 1).

A beállításokat érdemes előbb a Content, utána a Design fülön elvégezni, a méreteket pedig külön a táblagépre és a telefonra is megadni.