Doriți să creați o animație cu hover Elementor ?
În acest tutorial vom folosi o cutie de pepsi pe care o vom zbura și care va dezvălui o descriere despre aceasta.
Vă invităm să vizionați următorul videoclip pentru a vă face o idee despre ceea ce vrem să vă arătăm.
Introduceți o singură secțiune de coloană, apoi selectați în bara laterală Inaltimea minima pe Înălțime
pe inaltime minima click pe VH apoi trageți glisorul către 100. Întotdeauna în filă schemă defini 650 ca lățime.
Selectați coloana și pe bara laterală a câmpului Aliniere verticală selecta Milieu.
În filă Stil, schimbați culoarea de fundal făcând clic pe selectorul Culoare și tastați # D37636 apoi in sectiune frontieră, hai sa intram 20 pentru toate razele bordurilor.
În filă avansat, dezactivați legarea cu umplutură și tipați 75 pentru marginile interne top et Bas et 25 pentru marginile interne stânga et dreapta.
Apoi, în coloană, trageți un widget sectiunea interna. Să eliminăm una dintre coloanele din secțiunea Internă.
În coloana secțiunii interioare rămase, aruncați Widget pentru titlu și schimbați titlul în Pepsi Dragoste.
Citiți și ghidul nostru despre: Cum se creează un card de efect dintr-un portofoliu în Elementor
Apoi, în filă Stil, dați textului o culoare albă și pentru tipografie setați Dimensiunea pe 32, înălțimea rândului pe 1.2, spațiul dintre litere pe 0.5.
Sub Widget pentru titlu, drop a Widget Editor de text și editați textul. În fila Stil, schimbați culoarea textului în alb și Dimensiunea tipografie activată 16, înălțimea rândului pe 1.5 șispațiul dintre litere pe 0.5.
În filă avansat modifica marja Bas pe -10.
În secțiunea poziționare filă avansat, modificați Lățime pe Personnalisé și Latime personalizata setați pe acesta din urmă la 310.
Mai jos de paragraf vom adăuga un widget-ul butonului cu pentru Text Citește Mai Mult.
În filă Stil da culoarea butonului Alb iar culoarea textului se setează la Noire.
Acum selectați coloana din sectiunea interioara, în secțiune avansat filă avansat dezactivați linkul și faceți clic pe procent, apoi setați marja stânga pe 20 iar în Marja internă definesc cea de stânga pe 20.
Acum trageți imagine-widget deasupra Sectiunea interna inserați o imagine. Am ales pentru exemplu o imagine a unei băuturi care se găsește ușor pe web.
După ce ați introdus imaginea, configurați Marimea imaginii pe Întregul și aliniere hai să facem clic Centru.
În filă avansat, accesați secțiunea Poziţie pe Lățime selecta Online(Automat)Pe Poziţie selecta absolut și Orientare orizontală selecta Dreapta atunci Decalaj introduce -9.9 și pe Decalaj din Orientare verticală introduceți -105.
Mergeți mai departe Secțiune de transformare definissez redimensiona pe 0.5.
Acum selectați coloana din Sectiunea interna iar în filă avansat introduceți numele clase css text pepsi.
Apoi selectați secțiunea noastră principală, accesați secțiunea CSS personalizat a lui Tab Avansat, copiați și lipiți următorul cod:
/*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;
}
}
REMARQUE: Dacă nu aveți această secțiune, atunci trebuie să accesați Versiunea Pro a Elementor.
Acum, dacă dorim să eliminăm culoarea de fundal din text, vom selecta coloana noastră principală și în fila Stil dezactivăm culoarea de fundal.
În acest moment, animația dvs. va rula normal în browser.
Animația pe tabletă pare să fie, de asemenea, perfectă
Dar pe smartphone, nu este afișat în mod normal. Să rezolvăm această problemă.
Să afișăm browserul
În browser, selectați Secțiunea (asigurați-vă că sunteți încă în modul smartphone) și coborâți Lățime pe 320
Apoi selectați coloana principală și în fila acesteia avansat, setați toate marginile interioare la 25
În browser, selectați imaginea și în filă StilFaceți clic pe PX de Lățime și setați-l la 180.
În filă avansat du Widget imagine, continuă Poziţie, și selectați absolutîn offset orizontal introduce 75 și deplasare verticală introduce 236. Pe scurt, asigurați-vă că vă centrați imaginea în mijlocul cercului folosind diferitele decalaje.
Acum vă puteți previzualiza animația pe diferite dispozitive.
Obțineți Elementor Pro acum!!!
Concluzie
Asa de ! Asta este tot pentru acest articol care vă arată cum să creați o animație la hover în Elementor. Dacă aveți nelămuriri cu privire la cum să ajungeți acolo, ne-ar plăcea să auzim de la dvs comentarii.
Cu toate acestea, puteți consulta și resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
