Vuoi rendere le tue immagini di WordPress più interattive e coinvolgenti? Gli hotspot delle immagini trasformano le immagini statiche in contenuti dinamici aggiungendo aree cliccabili che rivelano informazioni aggiuntive.
Li abbiamo sperimentati noi stessi per mostrare punti su una mappa, taggare i membri del team in una fotografia e evidenziare le caratteristiche del prodotto. Dalla nostra ricerca, abbiamo trovato 2 modi semplici per aggiungere hotspot alle immagini in WordPress.
Pronto a migliorare l'esperienza visiva del tuo sito web? Iniziamo.
Quando aggiungere hotspot alle tue 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 dovresti pensare di aggiungere hotspot alle tue immagini?
Un buon momento per usare gli hotspot è quando vuoi mostrare diverse parti di un'immagine di prodotto.
Diciamo che stai vendendo un nuovo telefono. Puoi aggiungere hotspot per indicare la fotocamera, lo schermo e altre caratteristiche. Questo aiuta i clienti a conoscere il prodotto senza leggere lunghe descrizioni.
Molti siti web di articoli per la casa utilizzano anche annotazioni di immagini per evidenziare i dettagli del prodotto degli articoli visualizzati in foto allestite.
Gli hotspot sono ottimi anche per rendere più coinvolgenti infografiche e visualizzazioni di dati. Invece di stipare tutte le informazioni in un'unica immagine, puoi nascondere dettagli aggiuntivi dietro gli hotspot. Quando le persone cliccano su diverse parti dell'infografica, possono vedere più fatti e cifre.
Se gestisci un sito web di eLearning, gli hotspot possono migliorare l'esperienza utente e rendere le tue lezioni più interattive. Ad esempio, potresti aggiungere hotspot a una mappa, consentendo agli studenti di cliccare per conoscere diversi paesi o punti di riferimento.
Tenendo presente questo, vediamo come aggiungere facilmente hotspot alle immagini sul tuo sito WordPress. Abbiamo ideato 2 metodi e puoi utilizzare i collegamenti rapidi qui sotto per navigare nell'articolo:
- Metodo 1: Aggiungere hotspot alle immagini con SeedProd (per landing page/temi personalizzati)
- Metodo 2: Aggiungere hotspot alle immagini con il plugin Image Hotspot (gratuito ma limitato)
- Altri suggerimenti di design per WordPress che dovresti conoscere
Metodo 1: Aggiungere hotspot alle immagini con SeedProd (per landing page/temi personalizzati)
Questo primo metodo utilizza SeedProd, un costruttore di pagine drag-and-drop, per aggiungere hotspot immagine al tuo sito web WordPress. Consigliamo questo metodo se stai creando una landing page personalizzata o un tema WordPress personalizzato e desideri utilizzare una piattaforma con un blocco hotspot immagine.
Abbiamo testato in passato altri page builder come Divi e WPBakery, ma SeedProd è sempre il migliore.
Ciò che amiamo di SeedProd è che offre oltre 350 modelli di landing page e kit di temi per diverse categorie di settori, dalle boutique online e servizi di pulizia alle aziende SaaS. Quindi, c'è un'opzione per ogni tipo di sito.
Una cosa da considerare è che se desideri solo una soluzione gratuita per creare hotspot immagine, allora questo metodo potrebbe non fare al caso tuo. Questo perché il blocco hotspot di SeedProd è disponibile solo nelle versioni a pagamento di SeedProd. In tal caso, ti consigliamo di passare al metodo 2.
Per maggiori informazioni sulle funzionalità e sui prezzi del plugin, consulta la nostra recensione di SeedProd.
Una volta acquistato un piano SeedProd, puoi scaricare e installare il plugin WordPress nella tua area amministratore. Dopodiché, vai su SeedProd » Impostazioni e inserisci la tua chiave di licenza. Puoi trovare queste informazioni nella tua pagina account SeedProd.
Una volta fatto, fai clic su ‘Verifica chiave’.
Dopodiché, naviga su SeedProd » Pagine di destinazione.
Quindi, fai clic su ‘Aggiungi nuova pagina di destinazione’.
Ora vedrai tutti i modelli offerti da SeedProd. Ci sono opzioni per una pagina di destinazione con lista d'attesa virale, una pagina di destinazione per annunci Google, una pagina 'coming soon' e altro ancora.
Assicurati di scorrere le opzioni e di visualizzarle in anteprima una per una, in modo da poter scegliere quella che meglio si adatta alle tue esigenze.
Una volta deciso un modello, passa il mouse sopra la tua selezione.
Quindi, fai clic sul pulsante con il segno di spunta arancione.
Ora apparirà un nuovo popup che ti chiederà di nominare la pagina e inserire il suo slug URL.
Dopo averlo fatto, fai clic su ‘Salva e inizia a modificare la pagina’.
Questo aprirà l'editor drag-and-drop di SeedProd.
Funziona in modo simile all'editor a blocchi di WordPress, dove puoi trascinare e rilasciare blocchi sulla pagina e fare clic su di essi per personalizzarli come preferisci.
Per creare hotspot nelle immagini, puoi trovare il blocco 'Hotspot' nella barra laterale sinistra.
Quindi, trascinalo e rilascialo sulla tua pagina.
Successivamente, devi caricare l'immagine di WordPress a cui vuoi aggiungere gli hotspot.
Puoi farlo cliccando sul blocco 'Hotspot' e scegliendo 'Usa la tua immagine' o 'Usa un'immagine stock' per selezionare un'immagine.
La prima opzione aprirà la libreria multimediale dove potrai scegliere un'immagine esistente o caricarne una nuova. Se la dimensione è piuttosto grande, puoi consultare la nostra guida su come caricare immagini di grandi dimensioni in WordPress.
Una volta caricata un'immagine, puoi inserire del testo alternativo per descrivere l'immagine per i motori di ricerca e gli strumenti di lettura dello schermo.
Puoi anche personalizzare le dimensioni e l'allineamento dell'immagine.
Dopodiché, puoi scorrere verso il basso per iniziare ad aggiungere i tuoi hotspot.
Puoi farlo cliccando sul pulsante '+ Aggiungi Hotspot'.
Ora apparirà un punto arancione sulla tua immagine. Puoi regolarne la posizione trascinando le barre di orientamento orizzontale e verticale.
Inoltre, puoi inserire il testo che dovrebbe apparire quando il cursore di un utente passa sopra l'hotspot.
Scorrendo verso il basso, puoi cambiare il colore dell'hotspot.
Clicca semplicemente sulle impostazioni 'Colore' per scegliere un colore che si adatti al tuo marchio e al design del tuo sito web.
Se continui a scorrere verso il basso, puoi attivare l'interruttore 'Impostazioni avanzate'.
Qui puoi aggiungere un link al testo del tooltip del tuo hotspot in modo che gli utenti possano essere reindirizzati alla pagina desiderata.
Oltre a ciò, puoi scegliere un'icona personalizzata per sostituire la forma circolare predefinita.
Per fare ciò, fai semplicemente clic sul pulsante 'Scegli icona'.
Apparirà una finestra popup dove potrai scegliere varie icone dalla libreria di SeedProd. Puoi anche scegliere icone da Font Awesome se hai bisogno di più opzioni.
Per usare un'icona, fai semplicemente clic su di essa.
Una volta scelta un'icona, puoi trascinare la barra 'Dimensione icona' per rimpicciolire o ingrandire la forma, a seconda delle tue preferenze.
Puoi quindi ripetere i passaggi per creare altre aree interattive dell'immagine.
Di seguito, puoi aggiungere un effetto animato alle tue aree interattive dell'immagine. Ci sono 2 opzioni: 'Battito leggero' e 'Espandi'.
Ora, spostiamoci nella sezione 'Tooltip'.
Qui puoi cambiare la posizione del tooltip (destra, sinistra, sopra o sotto l'area interattiva) e cambiare il trigger.
Se selezioni 'Clic', significa che il tooltip verrà visualizzato quando l'utente fa clic sull'area interattiva. D'altra parte, 'Passaggio del mouse' significa che il tooltip apparirà quando il cursore ci passa sopra.
Successivamente, puoi cambiare la durata del tooltip.
Questo si riferisce semplicemente a quanto tempo impiegherà il tooltip ad apparire dopo che l'utente ha passato il cursore o fatto clic sull'area interattiva. Se vuoi che il testo venga visualizzato istantaneamente, impostalo su 0.
Puoi anche disabilitare la freccia del tooltip, a seconda delle tue preferenze.
Ora, se passi alla scheda 'Avanzate', puoi personalizzare ulteriormente l'aspetto dell'immagine.
Ad esempio, puoi aggiungere un'ombra a box o regolare il padding e il margine.
Una volta terminato, fai semplicemente clic sul pulsante 'Salva' nell'angolo in alto a destra.
Quindi, fai clic su 'Pubblica' per rendere la pagina live.
E il gioco è fatto! Assicurati di visualizzare la pagina su dispositivi mobili, desktop e tablet per vedere se ha un bell'aspetto su tutti i dispositivi.
Ecco come appare la nostra area interattiva dell'immagine:
Metodo 2: Aggiungere hotspot alle immagini con il plugin Image Hotspot (gratuito ma limitato)
Se stai usando un page builder e cambiare tema ti sembra un po' troppo, puoi usare invece il plugin gratuito di WordPress Image Hotspot. È uno dei migliori plugin per hotspot di immagini che abbiamo provato ed è un'ottima alternativa al metodo 1.
Tuttavia, tieni presente che la versione gratuita consente solo l'aggiunta di un massimo di 6 hotspot su una singola immagine.
Per utilizzare Image Hotspot, puoi installare e attivare il plugin di WordPress nella tua area amministrativa. Quindi, vai su Image Map Hotspot » All Image Map Hotspot e fai clic sul pulsante 'Aggiungi nuovo'.
Ora, procedi e dai un nome al tuo nuovo hotspot per mappe di immagini. Quindi, seleziona uno dei tipi di visualizzazione del tooltip. Puoi far apparire i tooltip dell'hotspot interattivo passando il mouse sopra o facendo clic.
Una volta fatto, fai clic su 'Salva'.
Fatto ciò, aggiungiamo la tua immagine.
Per fare ciò, fai semplicemente clic sul pulsante 'Carica immagine'.
Questo aprirà la libreria multimediale, dove puoi caricare una nuova immagine o selezionarne una esistente.
Successivamente, puoi aggiungere hotspot alla tua mappa di immagini. Per farlo, fai semplicemente clic sul pulsante 'Aggiungi punto'.
Ora apparirà una finestra popup per configurare il tuo hotspot di immagini interattivo.
Per prima cosa, naviga nella scheda 'Marker'. Qui puoi personalizzare l'aspetto dell'immagine dell'hotspot. Per cambiare le icone, puoi fare clic sul segno '+' accanto ai campi 'Icone' e/o 'Icone al passaggio del mouse'.
'Icone' si riferisce al simbolo predefinito dell'hotspot quando non viene cliccato o passato sopra con il mouse. Nel frattempo, 'Icone al passaggio del mouse' è il simbolo che appare quando l'utente clicca o passa il mouse sull'hotspot.
Ora, procedi e seleziona un'icona per sostituire l'opzione predefinita corrente. Il plugin ne ha molte tra cui scegliere.
Una volta fatta la tua scelta, fai clic su di essa e premi il pulsante 'Chiudi'.
Con le immagini dei tuoi hotspot impostate, puoi cambiare i colori delle icone.
Il plugin ti consente di rendere il colore predefinito dell'icona del hotspot diverso dal colore al passaggio del mouse sull'icona. In questo modo, gli utenti possono facilmente capire se un hotspot è attivo quando ci cliccano sopra o ci passano sopra con il mouse.
Per cambiare il colore, fai clic sul pulsante di selezione del colore quadrato e scegli il colore che desideri utilizzare.
Puoi quindi fare clic in un punto qualsiasi della pagina per passare a un'altra impostazione.
Puoi anche personalizzare le dimensioni dell'icona del hotspot sul desktop. Maggiore è il numero, più grande sarà l'icona.
Una volta soddisfatto dell'aspetto dell'icona, fai semplicemente clic su 'Salva'.
Ora, scorri verso l'alto e passa alla scheda 'Contenuto'. È qui che puoi personalizzare il testo e l'aspetto della tooltip.
Il plugin offre 4 modelli tra cui scegliere, in modo da poter selezionare quello che meglio si adatta al design del tuo sito web.
Oltre a ciò, assicurati di sostituire il contenuto del titolo predefinito con il tuo testo.
E a seconda del design del tuo sito web, potresti voler aumentare la dimensione del carattere e cambiare il colore del testo per migliorarne la leggibilità.
Quando sei soddisfatto delle impostazioni, fai semplicemente clic su 'Salva'.
L'ultima scheda è 'link'. Qui, hai la possibilità di rendere il testo della tua tooltip un collegamento ipertestuale, in modo che gli utenti possano essere reindirizzati a una pagina diversa.
Se vuoi farlo, seleziona 'Sì' nell'impostazione 'Vuoi collegare il titolo?'.
Dopo di che, inserisci l'URL del tuo titolo nel campo appropriato e scegli se vuoi che il link si apra in una nuova scheda o meno.
Infine, fai clic su 'Salva'.
Ora, dovrebbe apparire un nuovo hotspot sulla tua immagine, che puoi trascinare nella posizione desiderata.
Puoi anche ripetere gli stessi passaggi precedenti per creare altri hotspot immagine.
Una volta configurata la tua mappa immagine, puoi fare nuovamente clic sul pulsante 'Salva'.
Per aggiungere l'hotspot immagine a una qualsiasi delle tue pagine, post e/o widget, puoi copiare lo shortcode sopra l'immagine.
Dopodiché, incolla semplicemente lo shortcode in un blocco shortcode sul tuo widget, pagina o post nell'editor a blocchi. Puoi saperne di più su come fare nella nostra guida passo passo su come aggiungere e utilizzare gli shortcode in WordPress.
Ecco come appare il nostro hotspot immagine interattivo:
Altri suggerimenti di design per WordPress che dovresti conoscere
Oltre a creare hotspot immagine interattivi, ci sono molti altri modi per rendere il design del tuo sito web coinvolgente. Ecco alcune guide che ti aiuteranno:
- Elementi chiave di design per un sito web WordPress efficace
- Come aggiungere lo scorrimento infinito al tuo sito WordPress (guida passo passo)
- Come aggiungere lo scorrimento infinito al tuo sito WordPress (guida passo passo)
- Come creare una sitemap visiva in WordPress (passo dopo passo)
- Come creare una barra del footer fluttuante fissa in WordPress
- Come aggiungere un ridimensionatore di font in WordPress per l'accessibilità
- Come aggiungere un pulsante clicca per chiamare in WordPress (Passo dopo passo)
- Come aggiungere una barra di scorrimento personalizzata in WordPress
- Come aggiungere una barra di avanzamento nei tuoi post di WordPress
- Come creare un divisore di forma personalizzato in WordPress
- Come aggiungere un ticker di notizie scorrevole in WordPress
Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere facilmente hotspot immagine in WordPress. Potresti anche voler consultare la nostra guida definitiva ai trucchi per la barra laterale di WordPress per ottenere i massimi risultati e le nostre scelte esperte dei migliori costruttori di temi WordPress.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Hai una domanda o un suggerimento? Lascia un commento per iniziare la discussione.