Divi 5 modulok: képharmonika, hotspotok és hover felfedés

Ebben a fejezetben három interaktív képmodult találsz. Mindegyik 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 őket. 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.

A képharmonika és a hotspot modul szülő és gyermek elemekből áll. A szülőn a közös beállítások vannak, a gyermek elemek az egyes panelek vagy pontok. A gyermek elemet mindig a szülő Content füléről add hozzá, külön nem tehetsz az oldalra. A sorrendet húzással változtathatod. Kezdj 3 és 6 elem között, és a közös stílust a szülőn finomítsd. Egyszerű dekorációs képhez elég a sima Divi kép modul.

Képharmonika (Supreme Image Accordion)

Képek lenyitható panelekben, egérráhúzásra vagy kattintásra működő animációval. Minden panelhez adhatsz ikont, képet, címet, leírást és gombot.

1. Add hozzá a Supreme Image Accordion modult a Divi Supreme kategóriából.
2. A Content fülön vedd fel az első panelt (gyermek elem), és töltsd ki.
3. A szülőn állítsd be a harmonika típusát, irányát és magasságát.
4. Mentsd az oldalt, és nézd meg a weboldalon.

Szülő

Beállítás	Mit csinál
Accordion Type	A harmonika típusa, vagyis hogy a panelek hogyan nyílnak (egérráhúzásra vagy kattintásra).
Accordion Content Animation	A panel tartalmának megjelenési animációja.
Use Sequenced Animation	A tartalom elemei egymás után animálódnak.
Accordion Direction	A panelek iránya.
Accordion Height	A harmonika magassága.
Overlay Color (Design)	A képre kerülő fedőszín.
Horizontal align, Vertical align (Design)	A panel tartalmának vízszintes és függőleges igazítása.
Icon Color (Design)	Az ikon színe.
Use Icon Font Size, Icon Font Size (Design)	Külön ikonméret bekapcsolása és az ikon mérete.

Gyermek elem (panel)

Beállítás	Mit csinál
Make Item Expanded	A panel az oldal betöltésekor nyitva van.
Background Image	A panel háttérképe. Elsőbbséget élvez a Background csoportban megadott képpel szemben.
Use Icon	Ikon használata.
Icon	A panel ikonja.
Icon Image	Ikon helyett saját kép.
Title	A panel címe.
Description	A panel leírása.
Show Button	Gomb megjelenítése.
Button Text	A gomb felirata.
Button Link	A gomb hivatkozása.
Url Opens	A hivatkozás megnyitási módja (ugyanabban vagy új ablakban).
Horizontal Align, Vertical Align	A panel tartalmának igazítása.
Overlay Color, Icon Color (Design)	Csak erre a panelre érvényes fedőszín és ikonszín.
Use Icon Font Size, Icon Font Size (Design)	Az ikon mérete.
Image Width (Design)	Az ikonkép szélessége.

Képes hotspotok (Supreme Image Hotspots)

Egy képre pontokat (hotspotokat) tehetsz, amelyek buborékban további információt mutatnak.

1. Add hozzá a Supreme Image Hotspots modult a Divi Supreme kategóriából.
2. A Content fülön töltsd fel a képet az Image mezőbe.
3. Vedd fel az első hotspotot (gyermek elem), és állítsd be a helyét a Left Position és Top Position csúszkákkal.
4. A Design fülön állítsd be a buborék viselkedését és színeit.
5. Mentsd az oldalt, és nézd meg a weboldalon.

Szülő

Beállítás	Mit csinál	Alapérték
Image (Content)	A kép, amelyre a hotspotok kerülnek.
Trigger Event	A buborék megjelenítése egérráhúzásra vagy kattintásra.	hover
Icon Color	A hotspot ikonjának színe.	#ffffff
Icon Font Size	Az ikon mérete.	14px
Background Color	A buborék háttérszíne.	rgba(34,34,34,0.9)
Tooltip Animation	A buborék megjelenési animációja.	fade
Tooltip Max Width	A buborék legnagyobb szélessége.	180px
Tooltip Delay Show	A buborék megjelenésének késleltetése.	50
Tooltip Delay Hide	A buborék eltűnésének késleltetése.	50

Gyermek elem (hotspot)

Beállítás	Mit csinál	Alapérték
Type	A hotspot ikon vagy szöveg.	icon
Icon	A hotspotként megjelenő ikon.
Hotspot Image	Saját kép a hotspothoz.
Hotspot Text	A hotspot szövege.	text
Use Tooltip	A hotspothoz tartozik buborék.	be
Content	A buborék szövege.	Your tooltip content goes here
Left Position, Top Position (Design)	A hotspot helye a képen.
Icon Color, Icon Font Size (Design)	Az ikon színe és mérete.	#ffffff, 14px
Hotspot Image Width (Design)	A hotspot képének szélessége.
Background Color (Design)	Csak erre a hotspotra érvényes buborékháttér. Üresen a szülő beállítását használja.
Placement (Design)	A buborék helye a hotspothoz képest.
Tooltip Max Width (Design)	Csak erre a hotspotra érvényes buboréknagyság. Üresen a szülő értékét használja.
Use Pulse Animation	Pulzáló animáció a hotspoton.	ki
Background Color (pulzálás)	A pulzáló hatás színe.

Képfelfedő hover hatás (Supreme Image Hover Reveal)

Egérráhúzásra a felső kép öt szeletre bomlik, és alatta nagyítási animációval újra megjelenik a kép. Négy animációtípus közül választhatsz.

1. Add hozzá a Supreme Image Hover Reveal modult a Divi Supreme kategóriából.
2. A Content fülön töltsd fel a képet, adj meg magasságot, és válaszd ki az animációt.
3. Mentsd az oldalt, és nézd meg a weboldalon.

Beállítás	Mit csinál
Image	A kép. Az SVG fájlok is jól működnek, a megjelenítési hibákat a modul magától javítja.
Height	A modul magassága.
Image Reveal Animation	A felfedés csúszásának iránya.