In questo testo vedrai come aggiungere bellissimi effetti al passaggio del mouse al tuo sito WordPress utilizzando le opzioni fornite dalla versione gratuita di Elementor. Gli effetti al passaggio del mouse sono una cosa davvero interessante e possono migliorare il design del tuo sito e l'esperienza dell'utente sul sito. Maggiori informazioni sui diversi effetti di seguito.
Effetti al passaggio del mouse
Il primo effetto di cui parleremo più approfonditamente è la transizione del colore. Fai clic su una sezione e sotto l'opzione Stile seleziona Passa il mouse dove puoi cambiare il colore che vuoi vedere quando passi il mouse su una determinata sezione. In questo esempio la transizione va dal blu al blu più chiaro e puoi anche impostare la durata di tale transizione in secondi sotto l'opzione Durata della transizione.
Dopo il passaggio del mouse
L'effetto successivo è l'effetto al passaggio del mouse sull'intera immagine. In questo esempio, abbiamo un'immagine in bianco e nero che trasformeremo in un'immagine a colori quando ci passeremo sopra con il mouse. È necessario fare clic sulla sezione e anche sotto l'opzione Stile vedere il codice Normale che c'è un'immagine in bianco e nero e quando lo scegli Passa il mouse inserisci l'immagine dello stesso colore e in questo modo la tua immagine cambierà quando passi il mouse su di essa.
Dopo il passaggio del mouse
L'effetto successivo è cambiare la posizione dell'immagine. In questo esempio utilizziamo la stessa immagine, cambiamo solo la sua posizione nella cornice Stile opzioni sotto Posizione. Quando si sta in piedi Normale, la posizione è In alto a destrae quando è acceso Passa il mouse, la posizione è In basso a destra. Quando spostiamo il mouse sull'immagine, otteniamo un fantastico effetto di scorrimento dell'immagine.
Dopo il passaggio del mouse
L'effetto successivo è l'effetto hover di sovrapposizione. Con la transizione del colore si ottiene un bell'effetto di passaggio da un colore all'altro, ma sfortunatamente nella foto non si ottiene questo effetto. Possiamo ottenere questo risultato cambiando il colore sotto l'opzione Sovrapposizione di sfondo. Scegliamo Passa il mouse e lì determiniamo quale colore vogliamo aggiungere all'immagine e la percentuale di luminosità di quel colore Opacità. In questo modo otteniamo un effetto molto carino e quando si sposta il mouse sull'immagine il titolo risalta ancora di più.
Dopo il passaggio del mouse
L'effetto successivo è l'effetto confine. Questo non è impostato all'interno della sezione ma all'interno del plugin. Fai clic su Casella di immagine, quindi sotto l'opzione Avanzate tu vai a Passa il mouse, seleziona il tipo di confine che in questo caso è Solido, scegli il colore e la dimensione di quel bordo. Con questo ottieni un effetto molto carino che mette in risalto le tue colonne nella sezione e lascia una buona impressione nel design generale.
Dopo il passaggio del mouse
L'effetto successivo è l'effetto poster, in cui combiniamo 2 effetti diversi. Per prima cosa selezioniamo l'immagine e sotto l'opzione Stile entro Passa il mouse scegliamo l'animazione più adatta a noi, in questo caso Crescere. Quindi andiamo all'opzione Avanzate e sotto Confine scegliamo Scatola Ombra e il colore che vogliamo impostare. Con questi 2 effetti otteniamo un effetto eccellente, come se il poster saltasse fuori dallo schermo.
Dopo il passaggio del mouse
Tutti questi effetti sono disponibili a livello di sezione, colonna e plug-in. Nell'esempio seguente vediamo l'effetto a livello di colonna. Selezioniamo la colonna e sotto l'opzione Stile il codice Passa il mouse scegliamo un colore e otteniamo un bell'effetto.
Dopo il passaggio del mouse
E l'ultimo effetto che verrà visualizzato è a livello di plugin. Qui abbiamo un plugin Listino prezzi e sotto opzione Avanzate scegliamo Sfondo, dove viene selezionato un colore, in questo caso il bianco, con il quale si ottiene una buona messa a fuoco su un determinato testo che si passa sopra con il mouse.
Dopo il passaggio del mouse
Qui ti vengono mostrate diverse opzioni di effetti al passaggio del mouse, puoi sperimentare cose diverse da solo, tutto può essere ottenuto, lascia correre la tua immaginazione. Spero che questo testo ti sia stato utile e che tu abbia imparato qualcosa di nuovo, se sei interessato a leggere altri consigli per il lavoro indipendente puoi verificarli sul nostro blog, e nel caso in cui desideri consultare professionisti, clicca su questo Collegamento.
Fonte: Youtube
