Come aggiungere hotspot di immagini in WordPress (in modo semplice)

A volte, l’aggiunta di immagini e immagini da sola non è sufficiente per attirare l’attenzione dei visitatori.

È qui che gli hotspot delle immagini possono venire in soccorso. Queste aree cliccabili possono trasformare una semplice immagine in un’esperienza informativa e coinvolgente per i vostri visitatori. Noi stessi li abbiamo sperimentati per mettere in evidenza punti su una mappa, taggare i membri di un team in una fotografia ed evidenziare le caratteristiche di un prodotto.

Se vi state chiedendo come fare lo stesso, siete nel posto giusto. Questa guida vi mostrerà 2 semplici metodi per creare un hotspot di immagini per il vostro sito WordPress senza alcun codice.

Quando aggiungere gli hotspot alle immagini in WordPress

Gli hotspot delle immagini sono punti cliccabili che possono trasformare semplici immagini in contenuti interattivi che i visitatori possono esplorare. Ma quando si dovrebbe pensare di aggiungere gli hotspot alle proprie immagini?

Una buona occasione per usare gli hotspot è quando si vogliono mostrare le diverse parti dell’immagine di un prodotto.

Supponiamo che stiate vendendo un nuovo telefono. Potete aggiungere degli hotspot per evidenziare la fotocamera, lo schermo e altre caratteristiche. Questo aiuta i clienti a conoscere il prodotto senza dover leggere lunghe descrizioni.

Molti siti web di articoli per la casa utilizzano anche hotspot di immagini per evidenziare i dettagli dei prodotti esposti nelle foto in scena.

Gli hotspot sono ottimi anche per rendere più engagement le infografiche e le visualizzazioni di dati. Invece di stipare tutte le informazioni in un’unica immagine, è possibile nascondere ulteriori dettagli dietro gli hotspot. Quando le persone fanno clic su parti diverse dell’infografica, possono vedere altri fatti e cifre.

Se gestite un sito web di eLearning, gli hotspot possono migliorare l’esperienza dell’utente e rendere le lezioni più interattive. Ad esempio, potete aggiungere gli hotspot a una mappa, consentendo agli studenti di fare clic per conoscere diversi Paesi o punti di riferimento.

Tenendo conto di ciò, vediamo come aggiungere facilmente hotspot di immagini al vostro sito WordPress. Abbiamo proposto due metodi e potete usare i link rapidi qui sotto per navigare nell’articolo:

Metodo 1: Aggiungere hotspot di immagini con SeedProd (per landing page/temi personalizzati)

Questo primo metodo utilizza SeedProd, un costruttore di pagine drag-and-drop, per aggiungere hotspot di immagini al vostro sito WordPress. Vi consigliamo questo metodo se state creando una landing page personalizzata o un tema WordPress personalizzato e volete utilizzare una piattaforma con un blocco di hotspot di immagini.

Quello che ci piace di SeedProd è che offre oltre 350 modelli di landing page e kit di temi per diverse categorie di settore, dalle boutique online ai servizi di pulizia, fino alle aziende SaaS. Quindi, c’è un’opzione per ogni tipo di sito.

Una cosa da considerare è che se volete solo una soluzione gratuita per creare hotspot di immagini, questo metodo potrebbe non fare al caso vostro. Infatti, il blocco hotspot di SeedProd è disponibile solo nelle versioni a pagamento di SeedProd. In questo caso, si consiglia di seguire il metodo 2.

Per ulteriori informazioni sulle caratteristiche e sui prezzi del plugin, consultate la nostra recensione di SeedProd.

Una volta acquistato un piano SeedProd, è possibile scaricare e installare il plugin per WordPress nell’area di amministrazione. Successivamente, andare su SeedProd “ Impostazioni e inserire la chiave di licenza. Queste informazioni sono disponibili nella pagina del vostro account SeedProd.

Una volta fatto, basta fare clic su “Verifica chiave”.

Successivamente, andare su SeedProd ” Landing Pages.

Quindi, fare clic su “Aggiungi landing page”.

Ora vedrete tutti i modelli offerti da SeedProd. Ci sono opzioni per una landing page virale per le liste d’attesa, una landing page per gli annunci di Google, una pagina “coming soon” e altro ancora.

Assicuratevi di scorrere le opzioni e di visualizzarle in anteprima una per una, in modo da poter scegliere quella più adatta alle vostre esigenze.

Una volta deciso il modello, basta passare il mouse sulla selezione.

Quindi, fare clic sul pulsante arancione con il segno di spunta.

A questo punto, apparirà un nuovo popup che chiederà di dare un nome alla pagina e di inserire il suo URL slug.

Dopo aver fatto ciò, fare clic su “Salva e inizia a modificare la pagina”.

Si aprirà l’editor di trascinamento di SeedProd.

Funziona in modo simile all’editor di blocchi di WordPress, dove è possibile trascinare e rilasciare i blocchi sulla pagina e fare clic su di essi per personalizzarli come si desidera.

Per creare hotspot di immagini, è possibile trovare il blocco “Hotspot” nella barra laterale sinistra.

Quindi, basta trascinarlo e rilasciarlo direttamente sulla pagina.

Successivamente, è necessario caricare l’immagine di WordPress a cui si desidera aggiungere gli hotspot.

È possibile farlo facendo clic sul blocco “Hotspot” e scegliendo “Usa la tua immagine” o “Usa un’immagine stock” per selezionare un’immagine.

La prima opzione apre la libreria multimediale, dove è possibile scegliere un’immagine esistente o caricarne una nuova. Se le dimensioni sono molto grandi, potete consultare la nostra guida su come caricare immagini grandi in WordPress.

Una volta caricata un’immagine, è possibile inserire un testo alt per descrivere l’immagine per i motori di ricerca e gli strumenti di lettura dello schermo.

È inoltre possibile personalizzare le dimensioni e l’allineamento dell’immagine.

Dopodiché, è possibile scorrere verso il basso per iniziare ad aggiungere gli hotspot.

È possibile farlo facendo clic sul pulsante “+ Aggiungi hotspot”.

Sulla vostra immagine apparirà un punto arancione. È possibile regolare la sua posizione trascinando le barre di orientamento orizzontale e verticale.

Inoltre, è possibile inserire il testo che deve apparire quando il cursore dell’utente passa sopra l’hotspot.

Scendendo verso il basso, è possibile modificare il colore dell’hotspot.

È sufficiente fare clic sulle impostazioni “Colore” per scegliere il colore più adatto al proprio marchio e al design del sito web.

Se si continua a scorrere verso il basso, è possibile attivare la levetta “Impostazioni avanzate”.

Qui è possibile aggiungere un link al testo dell’hotspot, in modo da reindirizzare gli utenti alla pagina desiderata.

Inoltre, è possibile scegliere un’icona personalizzata per sostituire la forma circolare predefinita.

A tale scopo, è sufficiente fare clic sul pulsante “Scegli icona”.

Verrà visualizzata una finestra popup in cui è possibile scegliere varie icone dalla libreria di SeedProd. È anche possibile scegliere le icone da Font Awesome se si desiderano più opzioni.

Per utilizzare un’icona, è sufficiente fare clic su di essa.

Una volta scelta l’icona, è possibile trascinare la barra ‘Dimensione icona’ per rendere la forma più piccola o più grande, a seconda delle preferenze.

È possibile ripetere i passaggi per creare altri hotspot di immagini interattivi.

Di seguito, è possibile aggiungere un effetto animato agli hotspot delle immagini. Sono disponibili 2 opzioni: ‘Soft Beat’ e ‘Expand’.

Passiamo ora alla sezione ‘Tooltip’.

Qui è possibile modificare la posizione del suggerimento (a destra, a sinistra, sopra o sotto il punto caldo) e cambiare l’attivazione.

Se si seleziona “Clicca”, significa che la descrizione degli strumenti verrà visualizzata quando l’utente fa clic sul punto caldo. D’altra parte, “Passaggio” significa che la descrizione degli strumenti apparirà quando il cursore vi passerà sopra.

Successivamente, è possibile modificare la durata della descrizione degli strumenti.

Questo valore si riferisce al tempo necessario affinché la descrizione degli strumenti appaia dopo che l’utente passa sopra il punto caldo o fa clic su di esso. Se si desidera che il testo venga visualizzato immediatamente, è sufficiente impostarlo a 0.

È anche possibile disattivare la freccia del tooltip, a seconda delle preferenze.

Se si passa alla scheda ‘Avanzate’, è possibile personalizzare ulteriormente l’aspetto dell’immagine.

Ad esempio, è possibile aggiungere un’ombra al riquadro o regolare il padding e il margine.

Una volta terminato, basta fare clic sul pulsante “Salva” nell’angolo in alto a destra.

Quindi, fare clic su “Pubblica” per rendere la pagina attiva.

E questo è quanto! Assicuratevi di visualizzare la pagina su mobile, desktop e tablet per verificare che abbia un bell’aspetto su tutti i dispositivi.

Ecco come si presenta il nostro hotspot interattivo di immagini:

Metodo 2: Aggiungere hotspot di immagini con il plugin Image Hotspot (gratuito ma limitato)

Se usare un costruttore di pagine e cambiare tema vi sembra un po’ troppo, potete invece usare il plugin gratuito WordPress Image Hotspot. Questo plugin è un’ottima alternativa al metodo 1, ma va notato che la versione gratuita consente di aggiungere solo fino a 6 hotspot su una singola immagine.

Per utilizzare Image Hotspot, è possibile installare e attivare il plugin di WordPress nell’area di amministrazione. Quindi, andare su Image Map Hotspot ” All Image Map Hotspot e fare clic sul pulsante ‘Aggiungi nuovo’.

A questo punto, assegnare un nome al nuovo hotspot della mappa immagine. Quindi, selezionare uno dei tipi di visualizzazione dei suggerimenti. È possibile far apparire i suggerimenti dell’hotspot al passaggio del mouse o facendo clic.

Al termine, fare clic su “Salva”.

Una volta terminato, aggiungiamo l’immagine.

Per farlo, basta fare clic sul pulsante “Carica immagine”.

Si aprirà la libreria multimediale, dove è possibile caricare una nuova immagine o selezionarne una esistente.

Successivamente, è possibile aggiungere punti caldi alla mappa dell’immagine. È sufficiente fare clic sul pulsante ‘Aggiungi punto’ per farlo.

Verrà visualizzata una finestra a comparsa per configurare l’hotspot immagine interattivo.

Per prima cosa, passare alla scheda “Marcatore”. Qui è possibile personalizzare l’aspetto dell’immagine dell’hotspot. Per modificare le icone, è possibile fare clic sul segno ‘+’ accanto ai campi ‘Icone’ e/o ‘Icone Hover’.

Icone” si riferisce al simbolo predefinito dell’hotspot quando non viene cliccato o sorvolato. Mentre ‘Hover Icons’ è il simbolo che appare quando l’utente fa clic o passa il mouse sull’hotspot.

A questo punto, selezionare un’icona per sostituire l’attuale opzione predefinita. Il plugin offre un’ampia scelta.

Una volta effettuata la scelta, basta fare clic su di essa e premere il pulsante “Chiudi”.

Una volta impostate le immagini dell’hotspot, è possibile modificare i colori delle icone.

Il plugin consente di rendere il colore predefinito dell’icona dell’hotspot diverso dal colore del passaggio dell’icona. In questo modo, gli utenti possono facilmente capire se un hotspot è attivo quando vi fanno clic o vi passano sopra.

Per modificare il colore, è sufficiente fare clic sul pulsante di selezione del colore quadrato e selezionare il colore che si desidera utilizzare.

È quindi possibile fare clic su un punto qualsiasi della pagina per passare a un’altra impostazione.

È inoltre possibile personalizzare le dimensioni dell’icona dell’hotspot sul desktop. Più alto è il numero, più grande sarà l’icona.

Una volta soddisfatti dell’aspetto dell’icona, basta fare clic su “Salva”.

Ora, scorrere verso l’alto e passare alla scheda “Contenuto”. Qui è possibile personalizzare il testo e l’aspetto del tooltip.

Il plugin offre 4 modelli tra cui scegliere, in modo da poter scegliere quello che meglio si adatta al design del vostro sito web.

Oltre a questo, assicuratevi di sostituire il contenuto del titolo predefinito con il vostro testo.

Inoltre, a seconda del design del vostro sito web, potreste voler ingrandire la dimensione del carattere e cambiare il colore del testo per migliorarne la leggibilità.

Quando si è soddisfatti delle impostazioni, è sufficiente fare clic su “Salva”.

L’ultima scheda è “link”. Qui si ha la possibilità di rendere il testo del tooltip un collegamento ipertestuale, in modo che gli utenti possano essere reindirizzati a una pagina diversa.

Se si desidera farlo, selezionare “Sì” nell’impostazione “Collega il titolo?”.

A questo punto, inserite l’URL del vostro titolo nel campo appropriato e scegliete se volete che il link si apra in una nuova scheda o meno.

Infine, fare clic su “Salva”.

A questo punto, sull’immagine dovrebbe apparire un nuovo punto caldo, che può essere trascinato nella posizione desiderata.

È inoltre possibile ripetere la stessa procedura per creare altri punti caldi dell’immagine.

Una volta configurata la mappa delle immagini, è possibile fare clic sul pulsante “Salva”.

Per aggiungere l’hotspot immagine a qualsiasi pagina, post e/o widget, è possibile copiare lo shortcode sopra l’immagine.

Dopodiché, basta incollare lo shortcode in un blocco shortcode sul widget, sulla pagina o sul post nell’editor dei blocchi. Per saperne di più, consultate la nostra guida passo-passo su come aggiungere e utilizzare gli shortcode in WordPress.

Ecco come si presenta il nostro hotspot interattivo di immagini:

Scoprite altre entusiasmanti funzioni di design per il vostro sito web WordPress

Oltre a creare hotspot interattivi per le immagini, ci sono molti altri modi per rendere il design del vostro sito web coinvolgente. Ecco alcune guide per aiutarvi:

• Come aggiungere lo scroll infinito al vostro sito WordPress (passo dopo passo)
• Come creare una Sitemap visiva in WordPress (passo dopo passo)
• Come creare una barra fluttuante appiccicosa in WordPress
• Come aggiungere un ridimensionamento dei caratteri in WordPress per l’accessibilità
• Come aggiungere un pulsante per chiamare in WordPress (passo dopo passo)
• Come aggiungere una barra di scorrimento personalizzata in WordPress
• Come aggiungere una barra di avanzamento nei post di WordPress
• Come creare un divisore di forma personalizzato in WordPress
• Come aggiungere un ticker di notizie a scorrimento in WordPress

Speriamo che questo articolo vi abbia aiutato a capire come aggiungere facilmente hotspot di immagini in WordPress. Potreste anche voler dare un’occhiata alla nostra guida definitiva ai trucchi per la barra laterale di WordPress per ottenere i massimi risultati e alle nostre verifiche sui migliori costruttori di temi per WordPress.

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