Želite li stvoriti lebdeću animaciju pomoću Elementor ?
U ovom tutorialu koristit ćemo limenku pepsija koju ćemo preletjeti i koja će otkriti opis o njoj.
Pozivamo vas da pogledate sljedeći video kako biste dobili ideju o tome što vam želimo pokazati.
Umetnite odjeljak s jednim stupcem, a zatim odaberite na bočnoj traci Minimalna visina sur Visina
na minimalna visina kliknite na VH zatim povucite klizač na 100. Uvijek u kartici raspored definirati 650 Comme širina.
Odaberite stupac i na bočnoj traci na polju Vertikalno poravnanje odabrati milje.
U kartici Stil, promijenite boju pozadine klikom na alat za odabir boja i upišite # D37636 zatim u odjeljku granica, uđimo 20 za sve radijuse rubnika.
U kartici napredan, isključite padding binding i upišite 75 za unutarnje margine Haut et Bas et 25 za unutarnje margine lijevo et Droite.
Zatim u stupcu povucite widget unutarnji dio. Uklonimo jedan od stupaca iz odjeljka Interno.
U stupcu preostalog unutarnjeg odjeljka ispustite Widget naslova i promijeniti naslov u Pepsi Ljubav.
Pročitajte i naš vodič na: Kako stvoriti karticu s efektima iz portfelja u Elementoru
Zatim, u kartici Stil, dajte tekstu bijelu boju i za tipografiju postavite struk sur 32je visina reda sur 1.2, razmak između slova sur 0.5.
Ispod Widget naslova, ispustite a Widget za uređivač teksta i uredite tekst. U kartici Stil, promijenite boju teksta u bijelu i struk tipografija na 16je visina reda sur 1.5 irazmak između slova sur 0.5.
U kartici napredan promijeniti marginu Bas sur -10.
U odjeljku namještanje tab napredan, izmijenite Širina sur Personnalisé i Širina prilagođena postavite potonje na 310.
Ispod paragrafa ćemo dodati a widget gumb sa za Tekst Pročitajte više.
U kartici Stil dati gumbu boju Bijela boja i boju teksta postavite na Noire.
Sada odaberite stupac unutarnji presjek, u odjeljku napredan tab napredan isključite link i kliknite na postotak pa postavite marginu lijevo sur 20 i u Interna marža definirati ono od lijevo sur 20.
Sada povucite slika-widget iznad Unutarnji dio umetnite sliku. Za primjer smo odabrali sliku pića koje je lako pronaći na webu.
Nakon što ste umetnuli sliku, konfigurirajte Veličina slike sur Cijeli i poravnanje kliknimo na Centar.
U kartici napredan, idite na odjeljak Položaj sur Širina odabrati Online (automatski)Na Položaj odabrati absolu i Horizontalna orijentacija odabrati U pravu tada smjena ući -9.9 i na smjena okomitog usmjerenja enter -105.
Idi dalje dolje Transformacijski odjeljak definirati veličinu sur 0.5.
Sada odaberite stupac Unutarnji dio i u kartici napredan unesite naziv css klase pepsi tekst.
Zatim odaberite naš glavni odjeljak, idite na odjeljak Prilagođena CSS njegovog Tab Napredna, kopirajte i zalijepite sljedeći kod:
/*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;
}
}
NAPOMENA: Ako nemate ovaj odjeljak, morate otići na Pro verzija Elementora.
Sada, ako želimo ukloniti boju pozadine iz teksta, odabrat ćemo naš glavni stupac i na kartici Style deaktivirati boju pozadine.
U ovom trenutku vaša će se animacija normalno izvoditi u pregledniku.
Animacija na tabletu također se čini savršenom
Ali na pametnom telefonu se ne prikazuje normalno. Riješimo ovaj problem.
Prikažimo preglednik
U pregledniku odaberite odjeljak (provjerite jeste li još uvijek u načinu rada pametnog telefona) i spustite Širina sur 320
Zatim odaberite glavni stupac i u njegovoj kartici Napredna, postavite sve unutarnje margine na 25
U pregledniku odaberite sliku i na kartici Stilkliknite na PX de Širina i postavite ga na 180.
U kartici napredan du Slikovni widget, nastavi Položaji odaberite absoluU horizontalni pomak ući 75 i vertikalni pomak ući 236. Ukratko, svakako centrirajte svoju sliku u sredini kruga koristeći različite pomake.
Sada možete pregledati svoju animaciju na različitim uređajima.
Nabavite Elementor Pro sada!!!
Zaključak
Dakle! To je sve za ovaj članak koji vam pokazuje kako stvoriti animaciju pri lebdenju u Elementor. Ako imate bilo kakvih nedoumica o tome kako doći tamo, voljeli bismo čuti vaše mišljenje u Komentari.
Međutim, možete se konzultirati naši resursi, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na internetu Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
