Come creare immagini interattive in WordPress

Trovare l'immagine perfetta per il tuo post di WordPress è un ottimo inizio, ma spesso è una strada a senso unico. I tuoi visitatori vedono un'immagine statica e potrebbero perdersi i dettagli chiave che vuoi evidenziare.

Questo può essere frustrante, soprattutto quando stai cercando di mostrare le caratteristiche del prodotto o guidare gli utenti attraverso un processo. E se le tue immagini potessero fare di più e coinvolgere attivamente il tuo pubblico?

È esattamente quello che fanno le immagini interattive. Dopo aver testato diversi plugin qui a WPBeginner, abbiamo trovato un metodo semplice che consente a chiunque di aggiungere aree cliccabili alle proprie immagini senza bisogno di codice.

In questa guida, ti mostreremo come trasformare facilmente le tue immagini statiche in esperienze interattive e coinvolgenti per i tuoi visitatori.

In questa guida, ti guideremo attraverso l'intero processo. Ecco una rapida panoramica di ciò che imparerai.

1. Cos'è un'immagine interattiva?
2. Come aggiungere immagini interattive ai tuoi contenuti WordPress
3. Come importare/esportare immagini interattive su altri siti WordPress
4. Domande frequenti sulle immagini interattive

Cos'è un'immagine interattiva?

Un'immagine interattiva può avere aree hotspot, evidenziazioni, link, pulsanti cliccabili, colori, contenuti audiovisivi e altro ancora.

Immediatamente, questo è molto più coinvolgente di una semplice immagine standard che carichi sul tuo sito web WordPress.

Le immagini interattive possono attirare l'attenzione del visitatore su caratteristiche e contenuti specifici e quindi mostrare informazioni aggiuntive.

Ad esempio, potresti mostrare un popup quando il visitatore passa il mouse sopra una barra specifica in un grafico.

Questa interazione può incoraggiare i visitatori a esplorare le tue immagini in modo più dettagliato, il che li manterrà sulla pagina più a lungo. Può anche creare un'esperienza più interattiva e interessante, che può aumentare le tue visualizzazioni di pagina e ridurre il tasso di rimbalzo in WordPress.

Le immagini interattive possono anche mostrare ai visitatori i passaggi successivi da intraprendere. Ad esempio, potresti aggiungere collegamenti ad altre parti del tuo sito o mostrare un pulsante di call to action.

Detto questo, vediamo come puoi creare immagini interattive per il tuo sito WordPress.

Nota: Se desideri aggiungere immagini animate al tuo sito web, segui la nostra guida passo passo su come aggiungere GIF animate in WordPress.

Come aggiungere immagini interattive ai tuoi contenuti WordPress

Il modo più semplice e intuitivo per aggiungere aree cliccabili o hotspot interattivi è utilizzare Draw Attention. Questo plugin ti consente di mostrare un popup 'maggiori informazioni' o di aprire un nuovo URL quando l'utente interagisce con un'immagine.

La prima cosa da fare è installare e attivare il plugin Draw Attention. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin di WordPress.

Dopo l'attivazione, vai su Draw Attention » Edit Image nella dashboard di WordPress. Questo ti porterà a una schermata dove puoi creare diverse interazioni e poi aggiungerle a un'immagine come aree cliccabili.

Per iniziare, digita un titolo per l'immagine interattiva.

Questo apparirà accanto all'immagine sul tuo sito web WordPress. Ad esempio, nell'immagine seguente, stiamo usando il titolo 'Funzionalità di OptinMonster'.

Dopo aver digitato un titolo, scorri fino alla sezione 'Immagine' e scegli l'immagine che desideri utilizzare.

Puoi selezionare un'immagine dalla libreria multimediale o caricare una nuova immagine.

Dopo aver scelto un'immagine, puoi aggiungere colori e collegamenti, creare aree cliccabili e altro ancora scorrendo verso il basso fino alla sezione 'Aree Hotspot'.

Il plugin crea un'Area Cliccabile 1 per impostazione predefinita, quindi fai clic per espandere questa sezione.

Per iniziare, dovrai evidenziare l'area che desideri rendere interattiva.

Draw Attention ha alcune forme diverse che puoi utilizzare per l'evidenziazione, quindi fai semplicemente clic sulla forma che desideri utilizzare. Nell'immagine seguente, abbiamo selezionato un rettangolo.

Ora, fai semplicemente clic e trascina per evidenziare l'area che desideri utilizzare come hotspot dell'immagine.

Draw Attention mostrerà ora alcune nuove impostazioni per quest'area cliccabile. Per iniziare, digita un nome nel campo 'Titolo'.

Questo apparirà come un tooltip quando il visitatore passerà il mouse sopra l'hotspot, quindi è una buona idea usare qualcosa di descrittivo.

Nell'immagine seguente, abbiamo trasformato l'area del conto alla rovescia in un hotspot e aggiunto il titolo dell'immagine 'Countdown Timer'.

Una volta fatto ciò, apri il menu a discesa 'Azione' e scegli cosa accadrà quando un visitatore farà clic su quest'area. Draw Attention può aprire un collegamento o mostrare una casella 'maggiori informazioni'.

Vedrai impostazioni diverse a seconda delle opzioni che selezioni. Ad esempio, se scegli 'Vai all'URL', dovrai aggiungere un link e specificare se deve aprirsi in una nuova scheda.

Se selezioni 'Mostra ulteriori informazioni', dovrai digitare le informazioni che appariranno quando il visitatore fa clic sull'hotspot.

Puoi anche aggiungere un'immagine o un URL di dettaglio opzionale, che sarà incluso nella casella delle informazioni.

Nell'immagine seguente, abbiamo aggiunto del testo alla casella delle ulteriori informazioni.

Abbiamo anche aggiunto il logo OptinMonster come immagine di dettaglio.

Quando sei soddisfatto dell'aspetto dell'hotspot, fai clic sul pulsante 'Aggiungi un'altra area'.

Ora puoi configurare l'area cliccabile seguendo lo stesso processo descritto sopra.

Ripeti semplicemente questi passaggi per aggiungere tutte le aree cliccabili all'immagine.

Fatto ciò, potresti voler personalizzare l'aspetto degli highlight e della casella delle ulteriori informazioni. Ad esempio, puoi cambiare il colore che Draw Attention mostra quando i visitatori passano il mouse sopra un'area cliccabile utilizzando le impostazioni 'Colore di evidenziazione'.

Puoi anche cambiare l'opacità dell'evidenziazione e la larghezza del bordo, aggiungere un bordo e altro ancora utilizzando le impostazioni nella sezione 'Stile dell'evidenziazione'.

Dopodiché, puoi scorrere fino a 'Stile della casella ulteriori informazioni' e mettere a punto l'aspetto della casella. Ad esempio, puoi cambiare il colore di sfondo, il colore del testo e altro ancora.

Draw Attention viene fornito anche con temi diversi che puoi applicare alla tua immagine interattiva.

Per dare un'occhiata a questi temi, scorri semplicemente fino alla casella ‘Applica schema colori’ e apri il menu a discesa. Puoi scegliere tra Chiaro, Scuro e Attira l'attenzione.

Tutte queste opzioni sono abbastanza semplici, quindi vale la pena provare diverse impostazioni per vedere quale funziona meglio sul tuo sito web.

Mentre provi le varie opzioni, puoi visualizzare in anteprima come appariranno sul tuo sito WordPress facendo clic su ‘Anteprima modifiche’.

Quando sei soddisfatto di come l'immagine interattiva appare e funziona, assicurati di fare clic su ‘Aggiorna’ per salvare le modifiche.

Ora puoi aggiungere l'immagine interattiva a qualsiasi pagina, post o area pronta per i widget utilizzando lo shortcode nel blocco ‘Copia shortcode’.

Per maggiori informazioni su come posizionare lo shortcode, consulta la nostra guida su come aggiungere uno shortcode in WordPress.

Come importare/esportare immagini interattive su altri siti WordPress

A volte, potresti voler riutilizzare la stessa immagine interattiva su più siti web.

Ad esempio, se sei un affiliato, potresti creare un'immagine interattiva che promuove uno dei tuoi prodotti. Puoi quindi utilizzare la stessa immagine interattiva su tutti i tuoi negozi affiliati Amazon e altri siti web di marketing di affiliazione.

Caricare la stessa immagine e quindi ricreare manualmente tutte le interazioni può richiedere molto tempo e impegno.

Invece, consigliamo di creare l'immagine interattiva una volta e quindi utilizzare la funzione di importazione/esportazione di Draw Attention. Questo ti permette di riutilizzare la stessa immagine su innumerevoli siti web o negozi online.

Per fare ciò, dovrai installare il plugin Draw Attention sul sito originale che ha l'immagine interattiva e su tutti gli altri siti web in cui desideri utilizzare quell'immagine.

Sul tuo sito originale, vai su Draw Attention » Importa / Esporta e seleziona la casella accanto a ciascuna immagine che desideri esportare.

Quindi, fai clic sul pulsante 'Genera codice di esportazione'. Dopo alcuni istanti, Draw Attention genererà del codice.

In una scheda diversa, accedi al tuo altro blog WordPress o sito web e vai su Draw Attention » Importa / Esporta.

Qui, copia il codice di esportazione nella casella 'Importa' e fai clic sul pulsante 'Importa'.

Draw Attention importerà ora l'immagine e tutte le sue interazioni, pronte per essere utilizzate.

Ripeti semplicemente questi passaggi su tutti i siti web in cui desideri utilizzare l'immagine interattiva.

Domande frequenti sulle immagini interattive

Ecco le risposte ad alcune delle domande più frequenti sull'aggiunta di immagini interattive in WordPress.

Qual è il miglior plugin per creare immagini interattive in WordPress?

Per i principianti, consigliamo il plugin Draw Attention perché è facile da usare e ha un'interfaccia semplice. La versione gratuita fornisce tutte le funzionalità di base di cui hai bisogno, mentre la versione pro sblocca opzioni più avanzate come mappe di immagini multiple e stili extra per i tooltip.

Le immagini interattive sono ottimizzate per i dispositivi mobili?

Sì, il plugin Draw Attention è completamente reattivo. Ciò significa che i tuoi hotspot interattivi e le caselle informative si adatteranno automaticamente per adattarsi a qualsiasi dimensione dello schermo, offrendo un'ottima esperienza utente sui dispositivi mobili.

Posso aggiungere video o animazioni agli hotspot interattivi?

Puoi utilizzare l'azione 'Vai a URL' per collegare un hotspot a un video su una piattaforma come YouTube o Vimeo. Sebbene l'incorporamento diretto di video nel popup possa richiedere la versione pro, il collegamento è un semplice workaround. Per le immagini animate, ti consigliamo di seguire la nostra guida su come aggiungere GIF animate a WordPress.

L'aggiunta di immagini interattive rallenterà il mio sito web?

Come qualsiasi altro media, le immagini interattive aumentano il peso della tua pagina. Tuttavia, il plugin Draw Attention è leggero e ben codificato. Il fattore più importante è la dimensione del file dell'immagine originale, quindi ti consigliamo sempre di ottimizzare le tue immagini per il web prima di caricarle.

Speriamo che questo articolo ti abbia aiutato a imparare come creare immagini interattive in WordPress. Potresti anche voler consultare la nostra guida su come creare overlay e hover di flipbox di immagini in WordPress e le nostre scelte esperte dei migliori plugin per slider di WordPress.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.