Hai bisogno di aggiungere l'effetto hover in Elementor tramite CSS personalizzato?
Elementor ha una funzione integrata per aggiungere un effetto al passaggio del mouse a un elemento (l'abbiamo trattato in uno dei nostri articoli. Sebbene la funzione sia abbastanza utile, ha uno svantaggio. Puoi solo aggiungere un effetto al passaggio del mouse ad essa. una sezione, una colonna, un widget Immagine, un widget Pulsante e un widget Post.
Leggi anche: Come installare Elementor su WordPress
La funzione di effetto al passaggio del mouse integrata di Elementor non ti consente di aggiungere l'effetto al passaggio del mouse ad altri widget come il widget dell'editor di testo, il widget del titolo, ecc. Un altro svantaggio è che puoi aggiungere solo un effetto al passaggio del mouse molto semplice.
C'è qualche altra opzione per aggiungere l'effetto hover in Elementor?
Si C'è. Puoi aggiungere l'effetto hover in Elementor tramite CSS personalizzato. Ma per aggiungere CSS personalizzati, è necessario utilizzare Elementor Pro poiché il CSS personalizzato è disponibile solo su Elementor Pro.
Aggiunta di un effetto al passaggio del mouse in Elementor tramite CSS personalizzato
Prima di iniziare, diamo un'occhiata all'esempio di effetti al passaggio del mouse creati tramite CSS personalizzati.
A differenza dell'effetto hover integrato di Elementor, puoi utilizzare questo metodo per aggiungere un effetto hover a qualsiasi elemento in Elementor. Che si tratti di una sezione, colonna o widget (tutti i widget).
In questo esempio, ti mostreremo come aggiungere un effetto punto a una colonna.
Innanzitutto, fai clic sulla maniglia della colonna per passare al pannello delle impostazioni della colonna. Una volta lì, vai alla scheda avanzato e apri il blocco Custom CSS e incolla il seguente codice CSS.
selettore: hover {transition: all .2s easy-in-out; trasforma: scala (1.1); cursore: punto; indice z: 1; }
Voilà.
Nel codice sopra, stiamo usando la proprietà CSS trasformare () per aggiungere l'effetto hover. Il tipo di trasformazione che stiamo usando in questo esempio è la scala, con una durata di 1,1 secondi.
Ci sono altri 4 tipi di trasformazione che puoi usare con:transform
- Matrice
- Traduci
- Ruota
- storto
Se desideri utilizzare uno stile di trasformazione diverso, puoi semplicemente sostituire il valore di trasformare sul codice CSS sopra.
Si può leggere questa pagina per saperne di più sulla trasformazione CSS.
Puoi seguire lo stesso percorso per aggiungere un effetto hover ad altri elementi.
Per aggiungere un effetto punto a una sezione, puoi fare clic sulla maniglia della sezione e andare alla scheda avanzato e apri il blocco CSS personalizzato.
Per aggiungere un effetto al passaggio del mouse a un widget, puoi fare clic sulla maniglia del widget e tornare alla scheda. Avanzate, quindi apri il blocco CSS personalizzato.
Altri plugin premium aggiuntivi per WordPress
Scopri anche altri plugin di WordPress premium che ottimizzano le prestazioni del tuo blog o sito Web WordPress.
1. Live Sales Popup
Il popup di vendita dal vivo è un altro WordPress Plugin notifica con diverse chicche che puoi trasformare in un vantaggio. Prima di tutto, ha la possibilità visualizzare una finestra pop-up quando qualcuno completa un ordine. 
In secondo luogo, la finestra pop-up delle vendite in tempo reale può anche visualizzare una notifica quando una persona aggiunge semplicemente un articolo al carrello. In terzo luogo, puoi utilizzare lo strumento per aumentare l'hype per un prodotto mostrando quanti visitatori hanno visualizzato l'articolo.
Con le ultime tendenze del web, puoi aspettarti che Live Sales Popup venga visualizzato magnificamente su tutti i dispositivi e browser. Per quanto riguarda il layout pop-up, puoi personalizzarlo fin nei minimi dettagli.
Leggi: Come risolvere un allarme di sicurezza sul tuo blog WordPress
Le altre funzionalità di Live Sales Popup sono più di trenta animazioni, suoni, conto alla rovescia e posizionamento personalizzato. Funziona anche per le notifiche false e ti consente di impostarlo solo per pagine specifiche in cui desideri che la notifica esegua il suo compito.
Download | Demo | Web hosting
2. Foodify
Foodify è il modo più rapido e semplice per i clienti di ordinare cibo da un negozio. Lo è interamente di risposta e include funzionalità aggiuntive come immagine, opzione di ricerca, informazioni sul prodotto. 
Aggiunge anche pulsanti al carrello per migliorare l'esperienza dell'utente. Questa estensione WooCommerce è una soluzione di ordinazione rapida e completa che può essere aggiunta a qualsiasi sito Web WooCommerce.
Qui per te Plugin 5 WordPress per ottimizzare le descrizioni e le etichette delle categorie
Ha il vantaggio di essere molto flessibile e compatibile con molti plugin esistenti nella directory di WordPress.
Download | Demo | Web hosting
3. Visualizzatore di immagini Mega Zoom e Pan
Il plug-in Mega Zoom & Pan Image Viewer è un ottimo visualizzatore di immagini e browser con un layout completamente reattivo per la visualizzazione di immagini di grandi dimensioni sul tuo blog WordPress.
È un potente strumento progettato per presentare prodotti (immagini di prodotti ad alta risoluzione. Es: abbigliamento, automobili, schemi tecnici, ecc.), Visualizzare mappe e tutte le altre immagini, grazie al suo zoom, alla sua funzione panoramica, i suoi controlli di navigazione, la sua barra di scorrimentoe marker / punti di accesso altamente personalizzabili.
Questi sono 5 app per smartphone per proteggere immagini e video
Questo plugin funziona alla grande su iOS (iPad, iPhone), Android e Windows mobile, ecc. Funziona anche su tutti i browser moderni e sui browser più vecchi come IE7 o IE8.
Download | Demo | Web hosting
Altre risorse consigliate
Ti invitiamo inoltre a consultare le risorse seguenti per approfondire la presa e il controllo del tuo sito Web e blog.
- Come eliminare tutti i commenti in sospeso su WordPress
- Quando e come installare WordPress in una sottodirectory
- 5 plugin WordPress per aggiungere la gioia del Natale al tuo sito web
- 10 WordPress plugin per migliorare la visualizzazione del tuo sito web
Conclusione
Ecco ! Questo è tutto per questa guida. Speriamo che questo articolo ti abbia aiutato ad aggiungere l'effetto hover in Elementor tramite CSS personalizzato. Puoi anche leggere il nostro articolo su Come correggere il blocco del rendering JavaScript e CSS in WordPress.
Tuttavia, sarai anche in grado di consultare il nostro 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.
Se hai un amico o un commento, lascialo nella sezione commento. Sopprattuto condividi questo articolo sui tuoi diversi social network.
...
