Come creare e utilizzare immagini hot spot in WordPress (5 semplici passaggi)

Una singola immagine può aiutare a spiegare un'idea complessa, ed è più efficace di una descrizione. Perché puoi ingrandire ed esplorare l'immagine per maggiori dettagli. Ma per rendere viva l'immagine è necessario renderla cliccabile. Per questo, è necessario utilizzare immagini hot spot.

È noto che le informazioni veicolate tramite immagini sono più facili da capire e ricordare.

L'idea degli hot spot delle immagini è quella di fornire agli utenti immagini interattive che li aiutino a comprendere le informazioni che stai cercando di trasmettere. Gli hot spot sono punti di aree dell'immagine che, se cliccati, fanno apparire una finestra. Tale popup può contenere descrizioni comandi, testo, video o un collegamento URL. Ecco un esempio,

Per conoscere le parti di biciclette, puoi fare clic sulle aree indicate e sapere quale parte è cosa. Non è necessario leggere le descrizioni.

Tuttavia, la creazione di un'immagine hot spot è un compito complesso. A meno che tu non abbia un sito WordPress. Quindi puoi creare un'immagine con punti caldi usando HappyAddons.

HappyAddons è l'ultimo componente aggiuntivo di Elementor. Con oltre 100.000 installazioni attive, è uno dei componenti aggiuntivi di Elementor più popolari nel settore in questo momento. Ha 88 widget pro e gratuiti insieme a 16 funzionalità uniche al momento. Tra i widget professionali, Happy Addons offre un Hot Spot Widget che puoi utilizzare per creare un'immagine interattiva come sopra.

Quindi nel post di oggi ti mostreremo come rendere un'immagine reattiva con punti caldi e anche alcune ispirazioni su come puoi usare queste immagini.

Come creare immagini hot spot per WordPress usando Happy Addons

L'aggiunta di punti caldi a un'immagine è un modo divertente per interagire con gli utenti e anche un ottimo modo per attirare la loro attenzione. Li incoraggia a interagire con i tuoi contenuti.

Con questo in mente, ti mostreremo come creare l'immagine perfetta dell'hot spot in cinque passaggi con il widget dell'hot spot HappyAddons.

Passaggio 1: seleziona il widget e rilascia nella sezione

All'inizio, apri il tuo editor di Elementor e seleziona il widget dell'hot spot dalla barra laterale di sinistra. Quindi trascinalo e rilascialo nella sezione di modifica.

Passaggio 2: scegli l'immagine che desideri aggiungere

Ora devi aggiungere un'immagine. Clicca sull'area contrassegnata e scegli l'immagine. Puoi selezionare un'immagine esistente o caricare nuove immagini.

Passaggio 3: aggiungi punti caldi all'immagine

Dopo aver aggiunto l'immagine vedrai un punto nell'immagine. Ora, cerca l'opzione ' Spot '. Quando fai clic sull'opzione spot puoi aggiungere tutti gli spot che desideri.

Il motivo per cui puoi utilizzare il numero di punti che desideri in modo da non mancare di contrassegnare la parte importante della tua immagine.

Inoltre, puoi personalizzare gli spot individualmente. Troverai le opzioni per aggiungere testo, icone e anche immagini. Ma questa decisione dipende totalmente dalla tua immagine di sfondo.

Se scegli di aggiungere testi, puoi aggiungere un testo generale sul posto. Il tuo testo apparirà in una finestra pop-up blu.

Fare clic sull'opzione ' ToolTip '. E puoi aggiungere qui il testo che vuoi mostrare. Devi seguire la stessa procedura per aggiungere testi in tutti gli altri punti caldi.

Passaggio 4: stilizzare gli hot spot

Come abbiamo detto in precedenza, puoi personalizzare gli hot spot individualmente. Troverai tutte le opzioni di personalizzazione nell'opzione ' Stile '.

Lì puoi modificare vari elementi dell'hot spot come,

• Larghezza
• Altezza
• Imbottitura
• Frontiera
• Colore
• Colore del testo
• E il colore di sfondo della descrizione comando.

Puoi regolare queste opzioni in base al tuo design o layout, otterrai il risultato che desideri.

Se vuoi puoi personalizzare il tooltip. Fai clic sull'opzione Tooltip e regola fino a trovare la giusta combinazione in base al tuo layout.

Passaggio 5: utilizza la sezione avanzata per aggiungere più effetti

Se desideri aggiungere effetti di movimento, effetti felici, sfondo o rendere la pagina reattiva, fai clic su " Avanzate " per esplorare queste opzioni. " Avanzate " è una funzionalità predefinita di Elementor. Dai una lettura a questo documento per saperne di più sulle funzionalità avanzate e sui loro usi.

Questo è tutto.

Nota : non c'è limite al numero di hotspot che è possibile aggiungere a una mappa immagine.

Inoltre, utilizzando la Modalità reattiva di Elementor puoi facilmente determinare se l'immagine è perfettamente allineata su tutte le piattaforme.

Immagini hot spot: casi d'uso e importanza

"Un'immagine vale più di mille parole" è una famosa frase inglese. Ma ciò non significa che puoi dire tutto con una singola immagine. È qui che le immagini hot spot fanno la differenza. Perché questa funzione fornisce un contesto aggiuntivo alle tue immagini. Inoltre, rende le immagini intuitive e interattive.

Quando combini l'immagine con i testi, otterrai un'ottima risposta. Ecco alcuni degli esempi in cui l'hot spot dell'immagine tornerà utile.

Marketing di prodotto

Nel 2021 ci sono da 12 a 24 milioni di negozi online.

digitale a tutto tondo

Questa è una scelta ovvia. Ci sono milioni di negozi online in tutto il mondo. Quindi, perché gli utenti dovrebbero scegliere il tuo negozio? Cosa stai facendo diversamente dagli altri negozi? – Punto caldo nelle immagini dei prodotti.

Per distinguersi dal resto, utilizzare i punti caldi nelle immagini dei prodotti è un'ottima idea. Rivelerà ulteriori informazioni sul prodotto. Ma l'attrazione principale è che i clienti potranno cogliere il concetto del tuo prodotto semplicemente cliccando sull'immagine del prodotto.

Inoltre, puoi facilmente mettere in evidenza i punti unici invece di descriverli nel testo. Perché esiste la possibilità che l'utente possa perdere la descrizione.

Infografica

Le infografiche sono un ottimo modo per trasmettere informazioni ai tuoi utenti. Scoprirai che molte infografiche contengono tutorial, statistiche, guide, ecc. In altre parole, le infografiche sono molto interattive.

Tuttavia, se puoi applicare la funzione hot spot a queste infografiche, diventerà più reattiva. Puoi aggiungere ulteriori informazioni senza alterare il design dell'infografica.

Apprendimento

I punti caldi delle immagini sono un ottimo modo per mostrare immagini interattive nella classe. Ecco alcuni esempi,

Biologia

Bene, non dobbiamo dirti che il modo migliore per conoscere il corpo umano è attraverso le immagini. E con i punti caldi dell'immagine puoi aggiungere il nome di tutte le parti del corpo contrassegnando i punti giusti. Ecco un breve esempio,

Geografia

Bene, se chiedi agli studenti quale classe trovano più noiosa e difficile, Geografia farà la lista. Perché è difficile ricordare il nome di qualsiasi paese e continente leggendo. Quindi, che ne dici di mostrarli semplicemente nella mappa. Sì, con l'hot spot puoi contrassegnare il paese sulla mappa. In questo modo gli studenti ricorderanno facilmente tutti i paesi.

Storia

Bene, è insolito usare la funzione hot spot nelle classi di storia. Ma può essere usato. Quando spieghi un evento storico che coinvolge personaggi famosi, puoi segnare chi sta usando l'hot spot. In questo modo gli studenti identificheranno facilmente le leggende famose e ricorderanno anche qualsiasi evento storico.

Domande frequenti sulle immagini hot spot

Aumenta la conversione con le immagini interattive Hot Spot

Quando progetti un sito web, dovresti sempre cercare modi per attirare più utenti e coinvolgerli. Le immagini Hot Spot possono essere un'opzione praticabile. Puoi rendere le tue immagini più interattive e coinvolgenti. Ma ancora di più, aggiungerà valore al tuo sito Web e ai suoi contenuti.

E puoi vedere dal nostro articolo che creare hot spot di immagini con HappyAddons Hot Spot Widget è molto semplice. Con la modalità reattiva di Elementor puoi facilmente controllare come verrà visualizzata l'immagine su tutte le piattaforme.

In caso di domande non dimenticare di contattarci.