Opsionet e integruara të transformimit të Divi janë dëshmuar të jenë një mjet dizajni jashtëzakonisht i dobishëm, duke ju lejuar të ndryshoni madhësinë, rrotulloni, anoni ose poziciononi çdo element në një faqe me lehtësi. Dhe madje mund të zgjidhni t'i ktheni artikujt në gjendje pezullimi për efekte të mrekullueshme të lëvizjes. Kështu që sot ne do t'ju tregojmë se si t'i vendosni këto animacione me një klik.

Kjo metodë kërkon përdorimin e jQuery. Gjëja më e mirë për këtë teknikë është se ju mund të përdorni parametrat e integruar të projektimit të Divi për të stiluar vetitë e transformimit, më pas aktivizoni (ose çaktivizoni) ato veçori të transformimit me një klikim të mausit. Kjo do të hapë një sërë mundësish unike për zbulim përmbajtje fshehur duke lëvizur artikujt me klikim në vend që të rri pezull. Dhe gjithashtu ndihmon në reduktimin e nevojës për të ditur shumë CSS.

Le të fillojë.

Çfarë duhet të filloni

Për këtë tutorial, gjithçka që ju nevojitet është Divi. Për të filluar, shkoni te pulti juaj i WordPress. Krijoni një faqe të re, jepni një titull faqes tuaj dhe vazhdoni të dizajnoni në ndërtuesin Divi në plan të parë. Zgjidhni opsionin "Ndërto nga e para". Tani jeni gati për të shkuar!

Ideja themelore e shpjeguar

Para se të hyj në shumë detaje në këtë tutorial, do t'ju përshkruaj se si funksionon kjo teknikë me disa fjalë.

Sa herë që personalizoni një element (seksion, linjë ose modul) në Divi, ju i shtoni CSS të personalizuar këtij elementi në sfond. Për shembull, duke përdorur cilësimet e integruara të Divi-t, ju mund të shtoni një veti të rrotullimit të transformimit në një modul blurb në mënyrë që ai të rrotullojë modulin përgjatë boshtit Z për 20 gradë.

Cilësimet e divi për Blurb

Por prapa skenave, ju krijoni një CSS me porosi që i shtohet këtij moduli teksti dhe duket si kjo:

.et_pb_text_0 {transform: rotateZ (20deg); }

Mjaft e thjeshtë. Dhe le të themi se keni dashur të shtoni të njëjtën mundësi të transformimit të rri pezull. Thjesht duhet të aplikoni vetinë e transformimit për gjendjen e rri pezull në cilësimet e Divi Builder.

Animacion divi hover

Dhe kodi do të duket diçka si kjo prapa skenave:

.et_pb_text_0: hover {transformo: rotateZ (20deg); }

Sidoqoftë, nëse doni të vendosni pronën e transformimit me klikim, gjërat do të duhet të funksionojnë pak më ndryshe. Ju do të duhet të futni një kod javascript për të shkaktuar një ngjarje të klikimit në element (ose modulin e tekstit).

Me shembullin tonë aktual, qëllimi ynë kryesor është në thelb të kthejmë dhe çaktivizojmë me klikim vetinë e transformimit "transform: rotateZ (20deg)". Një mënyrë e thjeshtë për ta bërë këtë është të krijoni një klasë të personalizuar CSS me pronën "transformator: asnjë!" E rëndësishme "në cilësimet e faqes (ose stilit të jashtëm). Do të dukej diçka e tillë.

.toggle-transform-animation {transform: none! rëndësishme; }

Parametrat e faqes divi

Me atë CSS në vend. Mund të shtojmë klasën CSS "toggle-transform-animation" në elementin e modulit blurb i cili ka vetinë tonë të transformimit.

Përmbledhje e parametrave

Kjo do të çaktivizojë (të anashkalojë) vetinë e transformimit dhe do ta parandalojë atë që fillimisht të aktivizohet edhe pse stili i vetive të transformimit tashmë është shtuar në të.

Tani gjithçka që duhet të bëni është të aktivizoni (shtoni dhe hiqni) këtë klasë të personalizuar CSS kur klikoni në element. Pra, sa herë që klikojmë në element, klasa do të fshihet dhe vetitë e transformimit (ato që keni shtuar me Divi) do të vendosen.

Këtu është një shembull i thjeshtë se si ta bëni këtë. Së pari, shtoni një klasë tjetër CSS në modulin blurb me emrin "transform_target".

Divi Transformoni Prona në Kliko

Më pas, shkoni te Divi > Opsionet e Temave > Integrimi dhe shtoni skriptin e mëposhtëm jQuery në krye të blogun tuaj:

jQuery(document).ready(function() { 
    jQuery('.transform_target').click(function(){
        jQuery(this).toggleClass('toggle-transform-animation');
    }); 
});

Shto seksionin e integrimit divi

Kjo eshte e gjitha ! Tani, sa herë që klikoni në modulin e prezantimit, prona e transformimit që keni shtuar në prezantim në Divi do të aktivizohet ose çaktivizohet.

Shkrepje animacioni

Le të ndërtojmë një shembull në mënyrë që të shihni se si kjo mund të jetë e dobishme për projektet tuaja.

Si të kaloni pronat e transformimit në Klikoni për të shfaqur përmbajtjen në Divi

Për këtë shembull, ne do t'i përmbahemi një shembulli të thjeshtë të rrëfimit të përdorur më sipër. Më pas, ne do të shtojmë turbullim shtesë pas kësaj, në mënyrë që sa herë që të klikoni në turbullimin e sipërm, ajo do të largohet nga rruga për të zbuluar përmbajtje turbullira shtesë që qëndron pas dokumentit.

Krijimi i moduleve Blurb para dhe mbrapa

Pastaj shtoni një modul prezantimi në kolonën 1.

Moduloni përmbledhjen diviPërditësoni përmbajtje blurb për të përfshirë vetëm një titull (hiqni përmbajtjen e paracaktuar të trupit), më pas shtoni një ikonë turbullimi.

Personalizoni modulin përmbledhës diviPastaj azhurnoni parametrat e projektimit si më poshtë:

Ngjyra e sfondit: #4c5866
Ngjyra e ikonës: #ffffff
Orientimi i tekstit: qendra
Ngjyra e tekstit
: Marzhi i lehtë për porosi: 0px në fund
Mbushja me porosi: 15% në krye, 15% në fund, 10% në të majtë, 10% në të djathtë

Modifikoni ndarjen e modulit divi

Ne do të kthehemi në këtë modul më vonë, por tani për tani, duhet të krijojmë modulin tonë të dytë Blurb i cili do të shërbejë si një modul "kthimi" me përmbajtje shtesë.

Për ta bërë këtë, kopjoni modulin e prezantimit që sapo keni krijuar.

Kopjoni modulin përmbledhës divi

Pastaj, në modulin e dytë, hiqni ikonën e prezantimit (dhe imazhin e paracaktuar) dhe shtoni përmbajtjen e trupit përsëri në modul. Pastaj azhurnoni parametrat e dizajnit si më poshtë:

Ngjyra e sfondit: rgba (76,88,102,0.3)
Ngjyra e tekstit: E zezë
Mbushje me porosi: 20% lartë

Modifikoni fontin dhe sfondin divi

Poziciononi modulin para Përmbledhjes

Tani që janë formuar dy blurbs tona, ne duhet të kthehemi në mjegullën tonë të përparme (të sipërme) dhe ta pozicionojmë atë mbi mjegullën e pasme (të poshtme). Për ta bërë këtë, ne do t'i japim një pozicion absolut me një lartësi prej 100% dhe një gjerësi prej 100%.

Së pari, hapni cilësimet e modulit të prezantimit në krye / para dhe azhurnoni sa vijon:

lartësia: 100%;
gjerësia: 100%;

Divi Transformoni Prona në Kliko

Pastaj shtoni kodin e mëposhtëm të personalizuar CSS në elementin kryesor:

pozita: absolute! e rëndësishme; tranzicion: të gjitha .5s;

Pastaj azhurnoni indeksin z si më poshtë:

Indeksi Z: 2000

Rregullo modulin e ndarjes CSS

Pozicioni absolut, i kombinuar me 100% lartësi dhe gjerësi dhe indeksin z, siguron që moduli blurb të qëndrojë në krye të modulit blurb prapa tij. Prona e tranzicionit është në fakt kohëzgjatja e tranzicionit të opsioneve të transformimit që ne do të vendosim në klikimin tjetër. Dhe "kursori: treguesi" është të ndryshojë kursorin në mënyrë që elementi të duket i klikueshëm tek përdoruesi.

Shtimi i opsioneve të transformimit dhe klasa me porosi në prishjen e përparme

Tani është koha për të shtuar vetitë tona të transformimit në mjegullën e përparme. Ne më pas do të shtojmë klasat e personalizuara CSS të nevojshme për jQuery-in tonë për të ndryshuar këto veti me klikim.

Nën parametrat e projektimit të mjegullimit të parë, shtoni këto karakteristika të transformimit:

Shkalla e transformimit X dhe y: 20%

Transformimi Divi

Origjina e transformimit: qendra e sipërme

Divi i transformimit të modifikimit

Mos harroni se modeli i transformimit që shihni në këtë pikë do të jetë ai i shkaktuar me klikim. Ne thjesht përfitojmë nga ndërtuesi Divi për të marrë projektin e dëshiruar. Në këtë rast, mjegullia e përparme kontraktohet dhe bëhet e përqendruar në krye të saj si një ikonë e klikueshme.

Pasi të keni mbaruar, shtoni dy klasat CSS të nevojshme për të synuar prishjen e përparme me jQuery si më poshtë:

Klasa CSS: kthyesi-transformuar-animacion transform_target

(sigurohuni të ndani secilën emër të klasës me një hapësirë)

Divi Transformoni Prona në Kliko

Pastaj shtoni copëzën e mëposhtme të kodit CSS që do të përdoret për të mundësuar dhe çaktivizuar vetitë e transformimit me jQuery.

.toggle-transformo-animacion {transformo: asnjë! e rëndësishme; }

Cilësimet e faqes DiviJu do të vini re që pronat e transformimit të shtuar të mëparshme të çmendura janë çaktivizuar sepse kjo klasë është aplikuar në të.

Tani shkoni te Divi> Opsionet e temës> Integrimi dhe shtoni skriptin e mëposhtëm jQuery në krye të blogut:

jQuery(document).ready(function() { 
    jQuery('.transform_target').click(function(){
        jQuery(this).toggleClass('toggle-transform-animation');
    }); 
});

Shto seksionin e integrimit divi

Le të shohim rezultatin përfundimtar.

Anulimi i modulit të divizionit të animacionit

Ju mund ta përdorni këtë shembull për të krijuar dizajne edhe më mbresëlënëse. Mos hezitoni të ndani mendimin tuaj në seksionin e komenteve.