Come aggiungere effetti di passaggio del mouse sulle immagini in WordPress (5 semplici modi)

Aggiungere un effetto hover al tuo sito web può sembrare un dettaglio di poco conto, ma può migliorarne l'aspetto e l'usabilità. Quando i visitatori passano il mouse su un'immagine o un pulsante e lo vedono cambiare leggermente, significa che l'elemento è interattivo. 

Questo movimento discreto migliorerà il coinvolgimento e contribuirà a ridurre i tassi di rimbalzo. Gli effetti hover sono particolarmente utili nell'e-commerce. Consentono agli acquirenti di visualizzare in anteprima i prodotti più da vicino, incoraggiandoli a esplorare ulteriormente e procedere al pagamento.

Esistono molti modi per aggiungere effetti hover alle immagini in WordPress, dalle semplici dissolvenze alle accattivanti animazioni flip. Di seguito, troverai diversi metodi per iniziare!

Come aggiungere effetti di passaggio del mouse sulle immagini in WordPress

In questo articolo abbiamo raccolto cinque semplici modi per aggiungere effetti hover al tuo sito. Scegli quello più adatto a te!

Metodo 1: utilizzo di un plugin

Un plugin ti farà risparmiare un sacco di tempo e fatica, soprattutto se vuoi utilizzare più effetti hover sullo stesso sito.

Ad esempio, se hai più gallerie di immagini, puoi applicare animazioni diverse a ciascuna, come un semplice zoom per le miniature del blog o un effetto flip per le immagini dei prodotti.

Utilizzare un plugin come Image Hover Effects Ultimate semplifica notevolmente questo processo. Questo plugin è gratuito per tutti e offre un'ampia gamma di effetti per ogni elemento. Per iniziare, è sufficiente installarlo seguendo il tutorial qui sotto: 

Installazione di un plugin

• Apri l'area di amministrazione di WordPress.
• Fare clic su Aggiungi plugin dal Plugin nella barra laterale.

• Digita Image Hover Effects Ultimate nella barra di ricerca.

• Seleziona il primo risultato e clicca su Installa ora per avviare il download.
• Una volta completata l'installazione, fare clic sul Attiva per iniziare a utilizzare il plugin.

Utilizzo del plugin WordPress Image Hover Effects

• Una volta installato il plugin, vedrai un nuovo Image Hover nella tua dashboard.

• Fare clic sul menu per aprire le impostazioni del plugin. 

• Scegli gli effetti che desideri utilizzare. In questo tutorial, sperimenteremo con Image Magnifier .
• Dopo aver selezionato l'effetto, vedrai diversi stili di animazione.

Quando ne trovi uno che ti piace, clicca su Crea stile .

• Apparirà una finestra pop-up. Inserisci un titolo nel Nome e seleziona un effetto dal layout (1°, 2° o 3°). Quindi fai clic su Salva per continuare.
• Verrai indirizzato a una nuova pagina in cui potrai personalizzare le impostazioni, come altezza, larghezza e opacità. Prova a sperimentare per vedere quale sia la migliore.

• Una volta che sei soddisfatto delle impostazioni, fai clic su Modifica per personalizzare l'immagine.

• Apparirà un altro pop-up. Qui potrai personalizzare la posizione di ingrandimento. 

• È anche possibile sostituire l'immagine tramite il Scegli immagine .
• Dopo aver impostato tutto, fai clic su Invia per salvare l'effetto hover.

• Per applicare l'effetto al tuo sito, copia e incolla lo shortcode nel tuo post o nella tua pagina. 

• Ora il tuo semplice effetto hover sull'immagine è pronto per essere utilizzato in qualsiasi parte del tuo sito. 

Metodo 2: utilizzo di CSS

Per questo metodo non è necessario installare alcun plugin. Utilizzando CSS personalizzato, puoi aggiungere vari effetti hover al tuo tema.

Inizieremo con qualcosa di semplice, come un effetto di sottolineatura al passaggio del mouse. Se desideri aggiungere questo effetto al tuo tema, segui i semplici passaggi seguenti:

• Vai al post in cui vuoi aggiungere un effetto hover.
• Aggiungi un'immagine cliccando sul Copertina dal + .

• Inserisci il contenuto nel Copertina . Qui aggiungeremo un titolo e un pulsante.

• Imposta il carattere e gli stili a tuo piacimento.
• Salva la pagina come bozza.
• Successivamente, vai al Aspetto nella dashboard.

• Quindi, fai clic su Personalizza e vai su CSS aggiuntivo . Aggiungi il seguente codice:

corpo { display: flex; giustifica-contenuto: centro; allinea-elementi: centro; altezza: 100vh; sfondo: #0f0f0f; margine: 0; famiglia di caratteri: Arial, sans-serif; } .hover-underline { dimensione carattere: 2rem; colore: #ffffff; posizione: relativa; display: inline-block; } .hover-underline::after, .hover-underline::before { contenuto: ''; posizione: assoluta; larghezza: 100%; altezza: 2px; sfondo: linear-gradient(a destra, #ff0000, #00ffff); fondo: -5px; sinistra: 0; trasformazione: scalaX(0); origine della trasformazione: destra; transizione: trasformazione 0,4s ease-out; } .hover-underline::before { cima: -5px; origine della trasformazione: sinistra; } .hover-underline:hover::dopo, .hover-underline:hover::prima { trasforma: scaleX(1); }
 

• Fare clic su Pubblica per salvare il codice.

• Ora torna al tuo post e seleziona il testo a cui vuoi applicare l'effetto sottolineato.
• Apri la Avanzate nella barra laterale del blocco e inserisci underline-hover nel Classe/i CSS aggiuntiva/e .

• Salva la pagina e visualizzane l'anteprima per vedere l'effetto. 

Ci sono così tanti effetti hover tra cui scegliere, quindi scegli quello più adatto al tuo stile. Puoi imparare a scrivere il CSS da solo o trovare esempi dalla community di WordPress. Ce n'è per tutti i gusti!

Metodo 3: Utilizzo di Page Builder (ad esempio, Elementor)

Un page builder come Elementor ti permette di creare il tuo sito web con grande creatività. Include effetti hover integrati, pronti all'uso per ravvivare il tuo sito senza bisogno di scrivere codice.

Puoi anche usarlo per creare effetti di passaggio del mouse sulle immagini in WordPress. In questa sezione, sperimenteremo gli effetti di passaggio del mouse integrati nel page builder stesso.

Per impostare gli effetti:

• Apri l' Elementor dalla dashboard di amministrazione.
• Aggiungi la tua immagine.

• Seleziona l'immagine, quindi vai alla Stile .
• Scorri verso il basso e fai clic su Passa il mouse .

• Nel Animazione al passaggio del mouse troverai una varietà di effetti pronti all'uso.

• Qui abbiamo scelto l' Grow come esempio. Puoi quindi personalizzare la durata della transizione, l'opacità e altre impostazioni per adattarle al design del tuo sito.

• Una volta terminato, potrai vedere l'effetto immediatamente, senza bisogno di visualizzarlo in anteprima. 

Metodo 4: utilizzo dei plugin Flipbox

Se cerchi una scorciatoia, puoi installare il plugin Flipbox. Un effetto Flipbox si ottiene quando un'immagine si capovolge, rivelando il contenuto sul fronte o sul retro quando ci passi sopra con il mouse.

Questo effetto è ottimo per le immagini fotografiche, in cui è possibile visualizzare la foto sul fronte e i dettagli della fotocamera sul retro. Ma le possibilità sono infinite.

• Dalla dashboard di WordPress, clicca sul Plugin . Quindi, seleziona Aggiungi plugin .
• Digita Flipbox - Awesome Flip Boxes Image Overlay nella barra di ricerca.

• Fare clic su Installa ora , quindi su Attiva il plugin.

• Per creare un flipbox, vai al menu Flip Box Crea nuovo .
• Scegli le animazioni che preferisci. Una volta trovata quella giusta, clicca su "Crea stile" .

• Apparirà una finestra pop-up. Seleziona il layout desiderato (1°, 2° o 3°) e inserisci un titolo. 

• Fare clic su Salva per continuare.
• Successivamente verrai indirizzato al menu di personalizzazione, dove potrai impostare gli effetti e aggiungere i tuoi contenuti.

• Scorri verso il basso per trovare la scheda Anteprima Modifica per personalizzare il contenuto sia per la parte anteriore che per quella posteriore del flipbox.

• Una volta terminato, clicca su Invia per salvarlo.

• Per aggiungere questo flipbox alla tua pagina, ti basta copiare e incollare lo shortcode generato in qualsiasi sezione del tuo sito. 

• Ed ecco fatto, il prodotto finito! 

Metodo 5: Utilizzo dei blocchi di Gutenberg

Gutenberg è l'editor a blocchi predefinito di WordPress che consente di aggiungere effetti hover direttamente all'interno dell'editor.

Anche se non offre effetti hover avanzati, è possibile migliorare le animazioni utilizzando CSS personalizzati.

Ad esempio, creiamo un semplice effetto dissolvenza al passaggio del mouse. Ecco il tutorial passo passo:

• Vai al post o alla pagina in cui desideri aggiungere l'effetto hover.
• Fare clic sul pulsante + per aggiungere un nuovo blocco, quindi scegliere il Copertina .

• All'interno del Copertina , aggiungi un Paragrafo .

• Inserisci il titolo e una breve descrizione.
• Personalizza la dimensione del carattere, l'opacità, l'allineamento e il colore in base alle tue esigenze.

• Quindi seleziona il Copertina per aggiungere una classe CSS personalizzata.
• Apri la Avanzate nella barra laterale destra.
• Inserisci fade-hover-effect nel campo Classe CSS aggiuntiva .

• Dopodiché salva la pagina come bozza.

• Vai al Plugin e seleziona il tuo plugin per gli snippet di codice. In questo esempio, utilizziamo WPCode .
• Crea un nuovo frammento CSS, quindi incolla il seguente codice:

.fade-hover-effect { opacità: 0; trasformazione: translateY(10px); transizione: opacità 0,4s facilità, trasformazione 0,4s facilità; } .fade-hover-effect:hover { opacità: 1; trasformazione: translateY(0); } 

• Salva lo snippet e attivalo.
• Ora visualizza l'anteprima della pagina per vedere l'effetto dissolvenza al passaggio del mouse in azione.

Puoi riutilizzare questo effetto aggiungendo la classe fade-hover-effect a qualsiasi blocco o immagine. Tuttavia, se hai a che fare con molte immagini, potresti valutare l'utilizzo di un plugin come WP Media Folder per organizzare la tua libreria multimediale in cartelle. Questo renderà più facile trovare e riutilizzare i contenuti correlati.

L'utilizzo di troppi effetti influisce sulle prestazioni?

Sì, l'utilizzo di troppi effetti hover sul tuo sito può potenzialmente influire sulle prestazioni, soprattutto se non ottimizzati correttamente. Questo perché alcuni effetti hover richiedono CSS aggiuntivo. Le dimensioni del CSS del tuo sito possono accumularsi e rallentare i tempi di caricamento delle pagine.

È meglio utilizzare solo gli effetti hover essenziali per migliorare l'esperienza utente senza sovraccaricare il sito.

Incartare

Imparare ad aggiungere effetti di passaggio del mouse sulle immagini in WordPress può aiutarti a potenziare il tuo sito, migliorando l'interazione degli utenti e mantenendoli coinvolti.

Con diversi modi per aggiungere effetti hover, tramite plugin, CSS personalizzati o page builder, hai la libertà di scegliere ciò che funziona meglio per te. Sperimenta diversi stili per trovare quello più adatto al tuo sito!