Vuoi imparare come aggiungere un effetto al passaggio del mouse agli elementi nel widget dei postElementor?
Se sei un utente di WordPress che utilizza Elementor per creare il tuo sito web, dovresti avere familiarità con la funzione dell'effetto al passaggio del mouse. Puoi trovare questa funzione principalmente in ogni impostazione del widget Elementor.
L'effetto hover può rendere i tuoi elementi attraenti, quindi è un modo efficace per migliorare l'esperienza utente sul tuo sito web.
Bene, parlando dell'effetto hover, questo articolo ti mostrerà come aggiungere quest'ultimo ai singoli elementi del post nel widget Elementor Post che utilizzano il CSS personalizzato di Elementor, in particolare l'effetto di ingrandimento al passaggio del mouse.
Ci sono due ragioni per cui stiamo realizzando questo tutorial per te:
- Per impostazione predefinita, puoi aggiungere un effetto al passaggio del mouse a un post dal widget dei post di Elementor. Ma l'effetto al passaggio del mouse sarà molto semplice/standard.
- Per impostazione predefinita, Elementor ti consente di aggiungere un effetto cerniera al widget Post (tab avanzato -> Trasformatore –> échelle). Ma l'effetto al passaggio del mouse avrà un impatto su tutti gli elementi del widget dei post (non singoli).
Passaggi per aggiungere l'effetto al passaggio del mouse ai singoli post dal widget dei post di Elementor
Prima di iniziare il tutorial, vogliamo farti sapere che questo tutorial utilizza la funzione CSS personalizzato di Elementor. Questa funzione è disponibile solo su Elementor Pro; assicurati di aver aggiornato la tua versione.
Passaggio 1: aggiungi il widget dei post
Vai al tuo editor di Elementor e inizieremo tutto da zero, quindi crea una sezione con una singola colonna.
Leggi anche: Come integrare MailChimp con Elementor
Quindi, seleziona il widget Post dal pannello del widget, quindi trascinalo e rilascialo nell'area di modifica. Dopo aver aggiunto il widget Post, puoi modificare e modellare il widget in base alle tue preferenze.
osservazione: Assicurati di aver già pubblicato articoli sul tuo sito web.
Passaggio 2: aggiungi lo snippet CSS
Dopo aver modificato e applicato lo stile al widget Post, aggiungeremo un effetto al passaggio del mouse all'interno di un singolo post aggiungendo il semplice snippet CSS. Nelle impostazioni del widget Post, vai alla scheda avanzato -> CSS personalizzato. Copia lo snippet CSS di seguito e incollalo nel campo CSS personalizzato.
selector .elementor-post:hover{
transition: all .50s ease-in-out;
transform: scale(1.1);
cursor: pointer;
z-index: 1;
}
Il codice sopra selezionerà il singolo elemento del post sul widget Post utilizzando il selettore .élémentor-post e applica la trasformazione CSS.
Se sei soddisfatto dell'effetto al passaggio del mouse che è stato utilizzato, puoi mantenerlo così e salvare il tuo progetto se lo desideri. Tuttavia, se desideri personalizzare la velocità di transizione e il valore della scala di trasformazione, puoi modificare il valore nello snippet CSS.
osservazione: Trasforma/ingrandisci è un effetto comune e popolare utilizzato sui siti Web. Se vuoi saperne di più su altri metodi per trasformare gli effetti al passaggio del mouse, puoi visitare questo pagina.
Scopri anche: tutti i selettori di widget Elementor nel seguente articolo
Ottieni subito Elementor Pro!!!
Conclusione
Questo articolo mostra quanto sia facile aggiungere un effetto al passaggio del mouse ai singoli elementi del post nel widget dei post di Elementor utilizzando CSS personalizzati.
La tecnica che abbiamo utilizzato per questo effetto è ( zoom-in ) che coinvolge il 2D e alcuni elementi pseudo trasformati. Personalizza e gioca con tutti gli stili di effetti al passaggio del mouse finché non trovi il miglior effetto al passaggio del mouse per il tuo sito web.
Ecco! Ti abbiamo appena presentato i migliori strumenti per Marketing via e-mail per Elementor. Se hai dubbi su come usarli, faccelo sapere all'interno 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.
...
