Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coppa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Come creare immagini interattive in WordPress

Le immagini possono aggiungere interesse visivo al sito web, rendendolo più attraente di un muro di testo. Ma siamo onesti, a volte le immagini da sole restano lì, belle ma passive.

E se aveste bisogno di guidare l’attenzione dei vostri spettatori verso dettagli chiave o inviti all’azione? È qui che entrano in gioco le immagini interattive. Abbiamo testato diversi plugin e siamo entusiasti di condividere il modo più semplice per aggiungere questo elemento dinamico al vostro sito WordPress.

In questa pubblicazione vi spiegheremo come utilizzare un semplice plugin per trasformare le immagini statiche in immagini interattive per i vostri visitatori.

Create Interactive Images in WordPress

Che cos’è un’immagine interattiva?

Un’immagine interattiva può avere aree di hotspot, evidenziazioni, link, colori e altro ancora. È molto più coinvolgente di una semplice immagine standard caricata sul vostro sito web WordPress.

Le immagini interattive possono attirare l’attenzione del visitatore su caratteristiche e contenuti specifici, mostrando poi informazioni aggiuntive.

Ad esempio, si potrebbe mostrare un popup quando il visitatore passa il mouse su una particolare barra di un grafico.

Description Demo for Interactive Images

Questa interazione può incoraggiare i visitatori a esplorare le immagini in modo più dettagliato, facendoli rimanere più a lungo sulla pagina. Può anche creare un’esperienza più interattiva e interessante, che può aumentare le pagine viste e ridurre la frequenza di rimbalzo in WordPress.

Le immagini interattive possono anche mostrare ai visitatori i passi successivi da compiere. Ad esempio, si possono aggiungere link ad altre parti del sito o mostrare un pulsante di invito all’azione.

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

Nota: se invece volete aggiungere immagini animate al vostro sito web, seguite la nostra guida passo passo su come add-onare GIF animate in WordPress.

Come aggiungere immagini interattive ai contenuti di WordPress

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

An example of an interactive image in WordPress

Nota: in questa guida utilizzeremo la versione gratuita del plugin. Tuttavia, non esitate ad acquistare la versione pro di WP Draw Attention, che consente di creare più mappe di immagini interattive, di utilizzare tooltip ed effetti lightbox e molto altro ancora.

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

Dopo l’attivazione, andate su Attirare l’attenzione “ Modifica immagine nella dashboard di WordPress. Si accede a una schermata in cui è possibile creare diverse interazioni e aggiungerle a un’immagine come aree cliccabili.

The settings in the Draw Attention WordPress plugin

Per iniziare, digitate un titolo per l’immagine interattiva.

Il titolo apparirà accanto all’immagine sul vostro sito web WordPress. Ad esempio, nella seguente immagine utilizziamo il titolo “Caratteristiche di OptinMonster”.

Adding a title to an interactive image in WordPress

Dopo aver digitato un titolo, scorrere la sezione “Immagine” e scegliere l’immagine che si desidera utilizzare.

È possibile selezionare un’immagine dalla libreria dei media o caricare una nuova immagine.

Adding interactions to an image in WordPress

Dopo aver scelto un’immagine, è possibile aggiungere colori e collegamenti, creare aree cliccabili e altro ancora scorrendo la sezione “Aree hotspot”.

Il plugin crea un’Area cliccabile 1 per impostazione predefinita, quindi fare clic per espandere questa sezione.

Adding a hotspot to an image in WordPress

Per iniziare, è necessario evidenziare l’area che si desidera rendere interattiva.

Draw Attention offre alcune forme diverse che possono essere utilizzate per l’evidenziazione, quindi è sufficiente fare clic sulla forma che si desidera utilizzare. Nell’immagine seguente abbiamo selezionato un rettangolo.

Adding clickable areas to an image in WordPress

A questo punto, è sufficiente fare clic e trascinare per evidenziare l’area che si desidera utilizzare come hotspot dell’immagine.

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

Adding a title to an interactive media file in WordPress

Questo apparirà come tooltip quando il visitatore passerà con 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 abbiamo aggiunto il titolo dell’immagine “Timer del conto alla rovescia”.

An example of an image with a clickable area

Una volta fatto ciò, aprite il menu a tendina “Azione” e scegliete cosa accadrà quando un visitatore farà clic su quest’area. Draw Attention può aprire un link o mostrare un riquadro “ulteriori informazioni”.

Verranno visualizzate impostazioni diverse a seconda delle opzioni selezionate. Ad esempio, se si sceglie “Vai all’URL”, è necessario aggiungere un link e specificare se deve essere aperto in una nuova scheda.

How to create a custom animation for an image

Se si seleziona “Mostra altre informazioni”, è necessario digitare le informazioni che appariranno quando il visitatore farà clic sull’hotspot.

È inoltre possibile aggiungere un’immagine di dettaglio o un URL opzionale, che verrà incluso nella casella informativa.

How to add an info box to an interactive image

Nell’immagine seguente, abbiamo aggiunto del testo al riquadro di maggiori informazioni.

Abbiamo anche aggiunto il logo di OptinMonster come immagine di dettaglio.

An example of an info box in an interactive image

Quando si è soddisfatti dell’aspetto dell’hotspot, fare clic sul pulsante “Aggiungi un’altra area”.

A questo punto è possibile configurare l’area cliccabile seguendo la stessa procedura descritta in precedenza.

How to create a clickable interaction in WordPress

È sufficiente ripetere questi passaggi per aggiungere all’immagine tutte le aree cliccabili.

Fatto questo, si può personalizzare l’aspetto delle evidenziazioni e della casella di maggiori informazioni. Ad esempio, è possibile modificare il colore che Draw Attention mostra quando i visitatori passano il mouse su un’area cliccabile, utilizzando le impostazioni di ‘Highlight Color’.

Changing how an interactive image looks in WordPress

È inoltre possibile modificare l’opacità dell’evidenziazione e la larghezza del bordo, aggiungere un bordo e altro ancora utilizzando le impostazioni della sezione “Stile dell’evidenziazione”.

Successivamente, è possibile scorrere fino a “Stilizzazione del riquadro informazioni” e perfezionare l’aspetto del riquadro. Ad esempio, è possibile modificare il colore di sfondo, il colore del testo e altro ancora.

Creating a 'more info' box

Draw Attention è inoltre dotato di diversi temi che si possono applicare all’immagine interattiva.

Per dare un’occhiata a questi temi, è sufficiente scorrere fino alla casella “Applica schema di colori” e aprire il menu a discesa. È possibile scegliere tra Chiaro, Scuro e Attira l’attenzione.

Changing the color scheme for an interactive image

Tutte queste opzioni sono abbastanza semplici, quindi vale la pena di provare diverse impostazioni per vedere quale sia la migliore sul vostro sito web.

Mentre provate le varie opzioni, potete vedere in anteprima l’aspetto che avranno sul vostro sito WordPress facendo clic su “Anteprima delle modifiche”.

How to preview an interactive image

Quando si è soddisfatti dell’aspetto e del comportamento dell’immagine interattiva, fare clic su “Aggiorna” per salvare le modifiche.

È ora possibile aggiungere l’immagine interattiva a qualsiasi pagina, post o area pronta per i widget utilizzando il codice breve nel blocco “Copia codice breve”.

Copy Shortcodes

Per ulteriori informazioni su come inserire lo shortcode, consultare la nostra guida su come aggiungere uno shortcode in WordPress.

Come importare/esportare immagini interattive in altri siti WordPress

A volte è possibile riutilizzare la stessa immagine interattiva su più siti web.

Ad esempio, se siete un affiliate marketer, potete creare un’immagine interattiva che promuova uno dei vostri prodotti. Potete poi utilizzare la stessa immagine interattiva in tutti i vostri negozi di affiliazione Amazon e in altri siti web di marketing di affiliazione.

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

Si consiglia invece di creare l’immagine interattiva una sola volta e di utilizzare la funzione di importazione/esportazione di Draw Attention. In questo modo è possibile riutilizzare la stessa immagine su innumerevoli siti web o negozi online.

A tal fine, è necessario installare il plugin Draw Attention sul sito originale che contiene l’immagine interattiva e su tutti gli altri siti web in cui si desidera utilizzare tale immagine.

Sul sito originale, andare su Draw Attention ” Import / Export e selezionare la casella accanto a ciascuna immagine che si desidera esportare.

Exporting an animation from a WordPress website

Quindi, fare clic sul pulsante “Genera codice di esportazione”. Dopo qualche istante, Draw Attention genererà un codice.

In un’altra scheda, accedere all’altro blog o sito web WordPress e andare su Disegna l’attenzione ” Importazione / Esportazione.

Copiare il codice di esportazione nella casella “Importa” e fare clic sul pulsante “Importa”.

Importing an interactive image into a WordPress website

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

È sufficiente ripetere questi passaggi su tutti i siti web in cui si desidera utilizzare l’immagine interattiva.

Speriamo che questo articolo vi abbia aiutato a capire come creare immagini interattive in WordPress. Potreste anche consultare la nostra guida su come creare immagini flipbox in overlay e al passaggio del mouse in WordPress e la nostra selezione dei migliori plugin per slider di WordPress.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.

Divulgazione: I nostri contenuti sono sostenuti dai lettori. Ciò significa che se cliccate su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come WPBeginner è finanziato , perché è importante e come puoi sostenerci. Ecco il nostro processo editoriale .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Il kit di strumenti WordPress definitivo

Ottenete l'accesso gratuito al nostro kit di strumenti - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Reader Interactions

2 commentiLascia una risposta

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Andrea Davidson

    Hi
    Do I need to pay for the pro to add more than one image?

    Thank you
    Andrea

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tenga presente che tutti i commenti sono moderati in base alle nostre politica dei commenti e il suo indirizzo e-mail NON sarà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avremo una conversazione personale e significativa.