Dëshironi të krijoni një animacion pezullues me Elementor ?
Në këtë tutorial do të përdorim një kanaçe pepsi mbi të cilën do të fluturojmë dhe e cila do të zbulojë një përshkrim rreth tij.
Ju ftojmë të shikoni videon e mëposhtme për të marrë një ide se çfarë duam t'ju tregojmë.
Futni një seksion kolone të vetme dhe më pas zgjidhni në shiritin anësor Lartësia minimale sur Lartësia
Për lartësia minimale klikoni në VH pastaj tërhiqni rrëshqitësin te 100. Gjithmonë në skedë plan urbanistik përcaktoj 650 comme gjerësi.
Zgjidhni kolonën dhe në shiritin anësor në fushë Rreshtimi vertikal zgjedh Mjedis.
Në skedë Stili, ndryshoni ngjyrën e sfondit duke klikuar zgjedhësin e ngjyrave dhe shkruani # D37636 pastaj në seksion kufi, le të kapim 20 për të gjitha rrezet frenuese.
Në skedë i përparuar, çaktivizoni lidhjen e mbushjes dhe shkruani 75 për marzhet e brendshme Haut et Bas et 25 për marzhet e brendshme majtas et e drejtë.
Më pas në kolonë tërhiqni një miniaplikacion seksioni i brendshëm. Le të heqim një nga kolonat nga seksioni i brendshëm.
Në kolonën e pjesës së brendshme të mbetur, hidhni Miniaplikacioni i titullit dhe ndryshoni titullin në Dashuri Pepsi.
Lexoni gjithashtu udhëzuesin tonë në: Si të krijoni një kartë efekti nga një portofol në Elementor
Pastaj, në skedën Stili, jepni tekstit një ngjyrë të bardhë dhe për tipografinë vendosni madhësi sur 32, lartësia e rreshtit sur 1.2, ndarja e shkronjave sur 0.5.
Më poshtë Miniaplikacioni i titullit, hedh a Miniaplikacioni i Redaktuesit të Tekstit dhe redaktoni tekstin. Në skedën Stili, ndryshoni ngjyrën e tekstit në të bardhë dhe madhësi tipografi në 16, lartësia e rreshtit sur 1.5 dhendarja e shkronjave sur 0.5.
Në skedë i përparuar ndryshoni marzhin Bas sur -10.
Në seksionin pozicionimi skedinë i përparuar, modifikoni gjerësi sur Personnalisé dhe Gjerësia e personalizuar vendoseni këtë të fundit në 310.
Poshtë paragrafit do të shtojmë a miniaplikacioni i butonit me për Tekst Lexo më shumë.
Në skedë Stili jepni ngjyrën butonit E bardhë dhe ngjyra e tekstit vendoseni në Noire.
Tani zgjidhni kolonën e seksion i brendshëm, në pjesën i përparuar skedinë i përparuar fikni lidhjen dhe klikoni në përqindje dhe më pas vendosni margjinën majtas sur 20 dhe në Marzhi i brendshëm përcaktojnë atë të majtas sur 20.
Tani tërhiqni fotografi-widget mbi Seksioni i brendshëm futni një imazh. Ne kemi zgjedhur për shembull një imazh të një pije që gjendet lehtësisht në internet.
Pasi të keni futur imazhin, konfiguroni Madhësia e imazhit sur I tërë dhe radhitje le të klikojmë Qendra.
Në skedë i përparuar, shkoni në seksion pozitë sur gjerësi zgjedh Online (Auto)Në pozitë zgjedh absolut dhe Orientimi horizontal zgjedh E drejtë pastaj në Kompensimi hyj -9.9 dhe në Kompensimi të orientimit vertikal hyr -105.
Shkoni më poshtë Seksioni i transformimit përcaktojnë resize sur 0.5.
Tani zgjidhni kolonën e Seksioni i brendshëm dhe në skedën i përparuar shkruani emrin e klasa css teksti pepsi.
Pastaj zgjidhni seksionin tonë kryesor, shkoni te seksioni Custom CSS të Tab-it të tij I avancuar, kopjoni dhe ngjisni kodin e mëposhtëm:
/*Hover Animation CSS*/
selector{
--transition: 0.5s;
--circle-color: #313F69;
--content-background: #D27838;
--mobile-height: 670px;
--mob-top: 320px;
}
selector .elementor-widget-wrap,selector .elementor-widget-container,selector .elementor-widget-image,.pepsi-text,selector > .elementor-widget-wrap:before,selector{
transition: all var(--transition) !important;
}
selector > .elementor-widget-wrap:before{
content: "";
background: var(--circle-color);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 20px;
clip-path: circle(120px at center);
}
selector:hover > .elementor-widget-wrap:before{
clip-path: circle(400px at center);
background: var(--content-background);
}
selector:hover .elementor-widget-image{
right: -200px !important;
}
selector:hover .elementor-widget-image .elementor-widget-container{
transform: scale(1);
}
selector .pepsi-text{
opacity: 0;
visibility: hiddin;
}
selector:hover .pepsi-text{
opacity: 1;
visibility: visible;
}
selector:hover .pepsi-text .elementor-widget-wrap{
margin-left: 0px !important;
}
/*Responsive*/
@media (max-width: 767px) {
selector{
height: var(--mobile-height);
}
selector .elementor-widget-image .elementor-widget-container{
transform: scale(1);
}
selector:hover .elementor-widget-image{
right: 68px !important;
top: var(--mob-top) !important;
}
selector:hover .pepsi-text .elementor-widget-wrap{
margin-top: -265px !important;
}
}
KUJDESI: Nëse nuk e keni këtë seksion, atëherë duhet të shkoni te Versioni Pro i Elementor.
Tani nëse duam të heqim ngjyrën e sfondit nga teksti, do të zgjedhim kolonën tonë kryesore dhe në skedën Style çaktivizojmë ngjyrën e sfondit.
Në këtë kohë, animacioni juaj do të funksionojë normalisht në shfletuesin.
Animacioni në tabletë gjithashtu duket të jetë i përsosur
Por në smartphone, ai nuk shfaqet normalisht. Le ta zgjidhim këtë problem.
Le të shfaqim shfletuesin
Në shfletues zgjidhni seksionin (sigurohuni që jeni ende në modalitetin e smartfonit) dhe uleni gjerësi sur 320
Pastaj zgjidhni kolonën kryesore dhe në skedën e saj i avancuar, vendosni të gjitha kufijtë e brendshëm në 25
Në shfletues, zgjidhni imazhin dhe në skedën Stiliklikoni mbi PX de gjerësi dhe vendoseni në 180.
Në skedë i përparuar du Miniaplikacioni i imazhit, vazhdo pozitë, dhe zgjidhni absolutNë kompensim horizontal hyj 75 dhe zhvendosje vertikale hyj 236. Me pak fjalë, sigurohuni që ta përqendroni imazhin tuaj në mes të rrethit duke përdorur zhvendosjet e ndryshme.
Tani mund ta shikoni paraprakisht animacionin tuaj në pajisje të ndryshme.
Merr Elementor Pro tani!!!
Përfundim
Kështu që ! Kjo është ajo për këtë artikull që ju tregon se si të krijoni një animacion në hover në Elementor. Nëse keni ndonjë shqetësim se si të arrini atje, ne do të donim të dëgjonim nga ju në komente.
Sidoqoftë, gjithashtu mund të këshilloheni burimet tona, nëse keni nevojë për më shumë elemente për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar me udhëzuesin tonë për Krijimi i blogut të WordPress ose atë më Divi: tema më e mirë e WordPress të të gjitha kohërave.
Por në ndërkohë, ndajeni këtë artikull në rrjetet tuaja të ndryshme sociale.
...
