Aggiungere un effetto hover al tuo sito web può sembrare un piccolo dettaglio, ma può migliorare l'aspetto e l'usabilità del sito. Quando i visitatori passano il mouse su un'immagine o un pulsante e vedono che cambia leggermente, segnala che l'elemento è interattivo. 

Questo movimento sottile migliorerà l'engagement e aiuterà a ridurre i tassi di rimbalzo. Gli effetti hover sono particolarmente utili nell'e-commerce. Consentono agli acquirenti di visualizzare più da vicino i prodotti, incoraggiandoli a esplorare ulteriormente e procedere al checkout.

Ci sono molti modi per aggiungere effetti hover alle immagini in WordPress, da semplici dissolvenze ad animazioni di ribaltamento vistose. Di seguito, troverai diversi metodi per iniziare!

Come aggiungere effetti di hover alle immagini in WordPress

In questo articolo, abbiamo raccolto cinque modi semplici per aggiungere effetti hover al tuo sito. Scegli quello che funziona meglio per te!

Metodo 1: Utilizzo di un plugin

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

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

Utilizzare un plugin come Image Hover Effects Ultimate rende questo processo molto più facile. Questo plugin è gratuito per tutti e offre un'ampia gamma di effetti per ogni elemento. Per iniziare, installalo semplicemente seguendo il tutorial qui sotto: 

Installazione di un Plugin

• Apri l'area di amministrazione di WordPress.
• Clicca Aggiungi plugin dal menu Plugin nella barra laterale.

• Digita Effetti Hover Immagine Ultimate nella barra di ricerca.

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

Utilizzo del plugin WordPress Image Hover Effects

• Una volta installato il plugin, vedrai un nuovo Effetto Hover Immagine menu nel tuo cruscotto.

• Clicca sul menu per aprire le impostazioni del plugin. 

• Scegli gli effetti che desideri utilizzare. Per questo tutorial, sperimenteremo con Lente d'ingrandimento per immagini.
• Dopo aver selezionato l'effetto, vedrai una varietà di stili di animazione.

Quando trovi quello che ti piace, clicca Crea Stile.

• Apparirà un pop-up. Inserisci un titolo nel campo Nome e seleziona un effetto dal layout (1°, 2° o 3°). Quindi clicca su Salva per continuare.
• Sarai indirizzato a una nuova pagina dove potrai personalizzare le impostazioni, come altezza, larghezza e opacità. Gioca un po' per vedere cosa sembra meglio.

• Una volta soddisfatto delle impostazioni, clicca Modifica per personalizzare la tua immagine.

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

• Puoi anche sostituire l'immagine cliccando sul pulsante Scegli Immagine.
• Dopo aver configurato tutto, clicca Invia per salvare il tuo effetto hover.

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

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

Metodo 2: Utilizzo di CSS

Non è necessario installare alcun plugin per questo metodo. Utilizzando CSS personalizzati, puoi aggiungere vari effetti di 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:

• Naviga fino al post dove desideri aggiungere un effetto al passaggio del mouse.
• Aggiungi un'immagine cliccando sul blocco Copertura dal +.

• Inserisci il tuo contenuto nel blocco Ricopri. Qui aggiungeremo un titolo e un pulsante.

• Imposta il carattere e gli stili a tuo piacimento.
• Salva la pagina come bozza.
• Successivamente, vai al menu Aspetto nel tuo pannello di controllo.

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

body { visualizza: flex; giustifica: centro; allinea: centro; altezza: 100vh; sfondo: #0f0f0f; margine: 0; famiglia-di-caratteri: Arial, sans-serif; } .hover-underline { dimensione-del-carattere: 2rem; colore: #ffffff; posizione: relativa; visualizza: inline-block; } .hover-underline::after, .hover-underline::before { contenuto: ''; posizione: assoluta; larghezza: 100%; altezza: 2px; sfondo: gradiente-lineare(a destra, #ff0000, #00ffff); fondo: -5px; sinistra: 0; trasforma: scalaX(0); origine-trasforma: destra; transizione: trasforma 0.4s ease-out; } .hover-underline::before { alto: -5px; origine-trasforma: sinistra; } .hover-underline:hover::after, .hover-underline:hover::before { trasforma: scalaX(1); }
 

• Clicca su Pubblica per salvare il codice.

• Ora torna al tuo post e seleziona il testo a cui vuoi applicare l'effetto di sottolineatura.
• Apri la sezione Avanzate nella barra laterale del blocco e inserisci underline-hover nel campo Classi CSS aggiuntive.

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

Ci sono così tanti effetti di hover tra cui scegliere, quindi seleziona quello che meglio si adatta al tuo stile. Puoi imparare a scrivere il CSS da solo o trovare esempi dalla comunità WordPress. È tutto lì fuori!

Metodo 3: Utilizzo di page builder (ad es. Elementor)

Un costruttore di pagine come Elementor ti consente di costruire il tuo sito web con molta creatività. Ha effetti di passaggio del mouse integrati, tutti pronti all'uso per animare il tuo sito senza richiedere alcuna codifica.

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

Per impostare gli effetti:

• Apri l'editor Elementor dal cruscotto di amministrazione.
• Aggiungi la tua immagine.

• Seleziona la tua immagine, quindi vai alla scheda Stile.
• Scorri verso il basso e clicca su Hover.

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

• Abbiamo scelto l'effetto Cresci come esempio. È quindi possibile personalizzare la durata della transizione, l'opacità e altre impostazioni per abbinarle al design del tuo sito.

• Dopo aver finito, potrai vedere l'effetto immediatamente senza doverlo anteprimare. 

Metodo 4: Utilizzo dei Plugin Flipbox

Se stai cercando una scorciatoia, puoi installare il plugin flipbox. Un effetto flipbox si verifica quando un'immagine si capovolge per rivelare il contenuto sul davanti o sul retro quando ci passi sopra con il mouse.

Questo effetto è ottimo per le immagini fotografiche, dove puoi visualizzare la foto sul davanti e i dettagli della macchina fotografica sul retro. Ma le possibilità sono infinite.

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

• Clicca Installa ora, poi Attiva il plugin.

• Per creare un flipbox, vai al menu Flip Box e clicca su Crea nuovo.
• Scegli qualsiasi animazione ti piaccia. Una volta trovata, clicca su Crea stile.

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

• Clicca Salva per continuare.
• Successivamente, sarai indirizzato al menu di personalizzazione dove potrai impostare gli effetti e aggiungere il tuo contenuto.

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

• Una volta terminato, clicca su Invia per salvarlo.

• Per aggiungere questo flipbox alla tua pagina, copia e incolla lo shortcode generato in qualsiasi sezione del tuo sito. 

• E questo è tutto, ecco il prodotto finito! 

Metodo 5: Utilizzo dei Blocchi Gutenberg

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

Sebbene non offra effetti di hover avanzati, puoi migliorare le animazioni utilizzando CSS personalizzato.

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

• Naviga fino al post o alla pagina dove desideri aggiungere l'effetto hover.
• Clicca il + per aggiungere un nuovo blocco, quindi scegli il blocco Ricoprimento.

• All'interno del blocco Ricoprimento, aggiungi un blocco Paragrafo.

• Inserisci il tuo titolo e una breve descrizione.
• Personalizza la dimensione del carattere, l'opacità, l'allineamento e il colore secondo le tue esigenze.

• Quindi seleziona il blocco Copertura per aggiungere una classe CSS personalizzata.
• Apri la sezione Avanzate nella barra laterale destra.
• Immetti fade-hover-effect nel campo Classe CSS Aggiuntiva .

• Dopo di che, salva la pagina come bozza.

• Vai al menu Plugin e seleziona il tuo plugin di snippet di codice. In questo esempio, stiamo utilizzando WPCode.
• Crea un nuovo snippet CSS, quindi incolla il seguente codice:

.fade-hover-effect { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; } .fade-hover-effect:hover { opacity: 1; transform: translateY(0); } 

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

Puoi riutilizzare questo effetto aggiungendo la classe fade-hover-effect a qualsiasi blocco o immagine. Ma se stai gestendo molte immagini, considera l'utilizzo di un plugin come WP Media Folder per organizzare la tua libreria multimediale in cartelle. Ciò rende più facile trovare e riutilizzare contenuti correlati.

L'utilizzo di troppi effetti influisce sulle prestazioni?

Sì, utilizzare troppi effetti al passaggio del mouse nel tuo sito può potenzialmente influire sulle prestazioni, soprattutto se non ottimizzati correttamente. Ciò è dovuto al fatto che alcuni effetti al passaggio del mouse richiedono CSS aggiuntivo. La dimensione del CSS del tuo sito può aumentare e rallentare i tempi di caricamento della pagina.

È meglio utilizzare solo effetti di passaggio del mouse essenziali per migliorare l'esperienza dell'utente senza sovraccaricare il tuo sito.

Conclusione

Imparare ad aggiungere effetti hover alle immagini in WordPress può aiutare a potenziare il tuo sito migliorando l'interazione degli utenti e mantenendoli coinvolti.

Con molteplici modi per aggiungere effetti al passaggio del mouse, sia tramite plugin, CSS personalizzato o page builder, hai la libertà di scegliere cosa funziona meglio per te. Sperimenta con diversi stili per trovare quello che meglio si adatta al tuo sito!