Vuoi creare un'animazione al passaggio del mouse con Elementor ?
In questo tutorial useremo una lattina di pepsi che sorvoleremo e che rivelerà una descrizione a riguardo.
Vi invitiamo a guardare il seguente video per avere un'idea di cosa vogliamo mostrarvi.
Inserisci una singola sezione di colonna, quindi nella barra laterale seleziona Altezza minima su Hauteur
Sur altezza minima clic VH quindi trascina il cursore su 100. Sempre nella scheda disposizione définir 650 come largeur.
Seleziona la colonna e sulla barra laterale del campo Allineamento verticale selezionare Mezzo.
Nella scheda Style, cambia il colore di sfondo facendo clic sul Selettore colore e digita #D37636 poi nella sezione confine, prendiamo 20 per tutti i raggi di cordolo.
Nella scheda avanzato, disattiva la rilegatura del riempimento e digita 75 per margini interni Haut et Basso et 25 per margini interni Goffo et Diritto.
Quindi trascina un widget nella colonna sezione interna. Rimuoviamo una delle colonne dalla sezione Interna.
Nella colonna della restante sezione interna, rilascia il Widget del titolo e cambia il titolo in Pepsi Amore.
Leggi anche la nostra guida su: Come creare una scheda effetto da un portfolio in Elementor
Poi nella scheda Style, dai al testo un colore bianco e per la tipografia imposta il taille su 32, la altezza della riga su 1.2, spaziatura del carattere su 0.5.
Sotto il Widget del titolo, rilascia a Widget Editor di testo e modifica il testo. Nella scheda Style, cambia il colore del testo in bianco e il taille tipografia attiva 16, la altezza della riga su 1.5 espaziatura del carattere su 0.5.
Nella scheda avanzato cambia il margine Basso su all'10 ottobre.
Nella sezione posizionamento tab avanzato, modificare il Larghezza su personnalisé e Larghezza Personalizzata impostare quest'ultimo su 310.
Sotto il paragrafo aggiungeremo a widget del pulsante con per il testo Per Saperne Di Più.
Nella scheda Style dai il colore al bottone Bianco e il colore del testo impostalo su Nero.
Ora seleziona la colonna del sezione interna, nella sezione avanzato tab avanzato disattivare il collegamento e fare clic sulla percentuale, quindi impostare il margine Goffo su 20 e nel Margine interno definire quello di Goffo su 20.
Ora trascina il widget di immagini sopra il Sezione interna inserire un'immagine. Abbiamo scelto per l'esempio un'immagine di una bevanda che si trova facilmente sul web.
Una volta inserita l'immagine, configurare il Dimensione dell'immagine su Totale e allineamento clicchiamo su Centro.
Nella scheda avanzato, vai alla sezione Posizione su Larghezza selezionare In linea (automatico)Su Posizione selezionare assoluto e Orientamento orizzontale selezionare Destra poi spostamento entrare all'9.9 ottobre e sul spostamento dell'Orientamento verticale entrare all'105 ottobre.
Vai più in basso Sezione Trasforma definire ridimensionare su 0.5.
Ora seleziona la colonna del Sezione interna e nella scheda avanzato inserire il nome del classi CSS testo pepsi.
Quindi seleziona la nostra sezione principale, vai alla sezione CSS personalizzato della sua Tab Avanzate, copia e incolla il seguente codice:
/*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;
}
}
NOTA: Se non hai questa sezione, devi andare a Versione Pro di Elementor.
Ora se vogliamo rimuovere il colore di sfondo dal testo, selezioneremo la nostra colonna principale e nella scheda Stile disattiveremo il colore di sfondo.
A questo punto, l'animazione verrà eseguita normalmente sul browser.
Anche l'animazione su tablet sembra essere perfetta
Ma su smartphone, non viene visualizzato normalmente. Risolviamo questo problema.
Mostriamo il browser
Nel browser seleziona Sezione (assicurati di essere ancora in modalità smartphone) e abbassa il Larghezza su 320
Quindi seleziona la colonna principale e nella sua scheda Avance, imposta tutti i margini interni su 25
Nel browser, seleziona l'immagine e nella scheda Style, Cliquez sur PX de Larghezza e impostalo su 180.
Nella scheda avanzato du Widget immaginedai Posizionee selezionare assolutoin spostamento orizzontale entrare 75 ed in spostamento verticale entrare 236. In breve, assicurati di centrare l'immagine al centro del cerchio usando i diversi offset.
Ora puoi visualizzare in anteprima la tua animazione su diversi dispositivi.
Ottieni subito Elementor Pro!!!
Conclusione
Ecco ! Questo è tutto per questo articolo che ti mostra come creare un'animazione al passaggio del mouse in Elementor. Se hai dubbi su come arrivarci, ci piacerebbe avere tue notizie nel commentaires.
Tuttavia, puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...