{"id":367272,"date":"2023-05-16T15:31:00","date_gmt":"2023-05-16T12:31:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=367272"},"modified":"2022-10-12T09:21:30","modified_gmt":"2022-10-12T06:21:30","slug":"come-aggiungere-facilmente-un-hotspot-di-immagini-in-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/it\/come-aggiungere-facilmente-un-hotspot-di-immagini-in-wordpress\/","title":{"rendered":"Come aggiungere facilmente un hotspot di immagini in WordPress"},"content":{"rendered":"\n

Gli esseri umani sono esseri visivi ed \u00e8 difficile immaginare uno strumento pi\u00f9 potente di un’immagine per attirare l’attenzione del gruppo di destinazione. Ma potrebbe esserci un elemento ancora pi\u00f9 allettante di una bella immagine: un hotspot di immagini per WordPress. Un hotspot immagine \u00e8 un tipo di immagine con hotspot interattivi<\/strong>. Quando l’utente passa sopra un hotspot, viene visualizzato un popup che potrebbe contenere quasi tutto ci\u00f2 che desideri.<\/p>\n

Un hotspot di immagini sul tuo sito Web WordPress \u00e8 un ottimo modo per condividere pi\u00f9 informazioni su un determinato argomento<\/strong>, dai blog culinari ai siti Web di costruzione e tutto il resto. Puoi mostrare gli ingredienti e le misure dei pasti, i tipi di materiali utilizzati, i nomi e i titoli, nonch\u00e9 qualsiasi altra informazione sul contenuto del tuo sito web. Il popup pu\u00f2 contenere testo, altro, immagine, video o collegamento. Oltre a fornire ai tuoi utenti dettagli pi\u00f9 precisi, stai anche rendendo il tuo sito web pi\u00f9 interattivo utilizzando hotspot di immagini<\/strong>.<\/p>\n

Se pensi di aver bisogno di un web designer professionista per aggiungere questo elemento di fantasia al tuo sito web, abbiamo ottime notizie! Puoi facilmente aggiungere tutto da solo. Resta sintonizzato per saperne di pi\u00f9 su come aggiungere un hotspot di immagini in WordPress con un plug-in:<\/p>\n<\/p>\n

Perch\u00e9 abbiamo scelto i componenti aggiuntivi Qi per Elementor per la creazione di hotspot di immagini WordPress Elemen<\/h2>\n

Sulla base della nostra esperienza, Qi Addons per Elementor<\/a> \u00e8 uno dei migliori componenti aggiuntivi di Elementor. Include 60 widget gratuiti e oltre 40 premium e molte opzioni per aggiungere diversi elementi al sito con molte opzioni di personalizzazione e stile,<\/strong> cos\u00ec puoi essere sicuro che si adatteranno al design generale del tuo sito. Inoltre, \u00e8 incredibilmente semplice da usare<\/strong>, ecco perch\u00e9 spesso optiamo per questo componente aggiuntivo, che migliora notevolmente il sito.<\/p>\n

Il widget personalizzato di Image Hotspot<\/a> \u00e8 un widget premium. Ti permette di aggiungere un’immagine specifica e posizionare gli hotspot con informazioni specifiche su di essi<\/strong>. L’ utente ottiene quindi le informazioni passando il mouse sopra l’hotspot<\/strong>. Il bello \u00e8 che possiamo determinare le posizioni reattive in modo che non accada che su dispositivi diversi l’hotspot non corrisponda all’oggetto a cui si riferisce. Sulla stessa demo del widget, puoi vedere alcune soluzioni concettuali dell’autore che possono ispirarti.<\/p>\n

Come aggiungere l’elemento WordPress Hotspot di immagini<\/h2>\n

Dopo aver aggiunto Qi Addons al tuo sito, trova il widget personalizzato Hotspot immagine digitando "hotspot immagine" nel campo di ricerca o semplicemente sfogliando gli elementi. Noterai che tutti i widget Qi hanno icone rosse riconoscibili<\/strong>.<\/p>\n

\"Come<\/a><\/p>\n

Quando trascini il widget nella posizione desiderata, vedrai alcuni dei suoi valori predefiniti. Il widget ha due schede: Personalizza<\/strong> e Stile<\/strong> che includono una variet\u00e0 di opzioni per regolare l’elemento, mentre la scheda Avanzate \u00e8 una scheda Elementor che include tutti gli elementi.<\/p>\n

\"Come<\/a><\/p>\n

Iniziamo con le opzioni generali per la scheda personalizzata. Quello che noterai per primo qui \u00e8 dove sono inseriti l’immagine ei tre elementi<\/strong>. Questi elementi sono in realt\u00e0 hotspot<\/strong> e la loro posizione e le impostazioni del contenuto. Per impostazione predefinita, ci sono tre hotspot, ma puoi eliminare quelli esistenti o aggiungerne di nuovi<\/strong>.<\/p>\n

\"Come<\/a><\/p>\n

Dopo aver inserito un’immagine, da una libreria o dopo averne caricato una nuova, \u00e8 il momento di posizionare gli hotspot e aggiungervi dei contenuti.<\/p>\n

Per quanto riguarda il contenuto, hai l’opzione Titolo e Sottotitolo da impostare e non appena inizi a modificarli, vedrai come cambia il contenuto dal vivo.<\/p>\n

C’\u00e8 anche un campo pin qui dove puoi selezionare un’icona<\/strong> per il tuo pin, non deve essere predefinito. La libreria di icone \u00e8 a tua disposizione, ma puoi anche aggiungere la tua icona SVG. Ad esempio, SVGREPO<\/a> offre un gran numero di icone gratuite disponibili per uso commerciale.<\/p>\n

Per quanto riguarda la Posizione Orizzontale e la Posizione Verticale, servono per l’orientamento dell’hotspot sulle posizioni sinistra\/centro\/destra e alto\/centro in basso<\/strong>, mentre l’opzione Offset ci consente effettivamente di mettere a punto le posizioni. Non lo spiegheremo in dettaglio poich\u00e9 siamo sicuri che vedrai di persona come si muovono i tuoi video modificando i valori di offset. Ci\u00f2 che \u00e8 importante tenere a mente \u00e8 che quando personalizzi gli hotspot, dovresti anche osservare la pagina di anteprima che non ha una barra delle impostazioni, in modo da poter vedere come appare tutto su uno schermo a grandezza naturale<\/strong>.<\/p>\n

Inoltre, oltre all’offset, noterai sullo schermo le icone con il titolo, ovvero le classiche icone che indicano che sono disponibili opzioni responsive per questa impostazione<\/strong>. Assicurati di controllare anche loro. \u00c8 meglio non posizionare gli hotspot lungo il bordo estremo di un’immagine poich\u00e9 devi pensare a come apparir\u00e0 il popup dell’hotspot dell’immagine su schermi di dimensioni diverse<\/strong>.<\/p>\n

L’opzione Fade Info Position \u00e8 dove vengono visualizzate le informazioni per l’hotspot al passaggio del mouse.<\/p>\n

\"Come<\/a><\/p>\n

Questo \u00e8 il risultato dopo aver aggiunto l’immagine e gli spilli, ora possiamo procedere allo stile del tutto in modo che appaia esattamente come vogliamo.<\/p>\n

\"Come<\/a><\/p>\n

Regolazione dello stile dell’immagine dell’hotspot<\/h2>\n

Per quanto riguarda la stilizzazione, una variet\u00e0 di opzioni \u00e8 classificata all’interno di una speciale scheda Stile, cos\u00ec puoi vedere dove stilizziamo Pin, Informazioni, Titolo e Sottotitolo.<\/p>\n

\"Come<\/a><\/p>\n

Per quanto riguarda il Pin, tutte le impostazioni sono di facile comprensione. Puoi scegliere un’icona che si applicher\u00e0 a tutti i pin<\/strong>, a differenza delle impostazioni negli elementi in cui puoi sceglierne una separata per ciascuno. Inoltre, puoi specificare la dimensione e il colore<\/strong> per esso. Puoi aggiungere un’icona di sfondo utilizzando le dimensioni del porta Pin. Il nostro sfondo \u00e8 rosso e ha una dimensione di 15px.<\/p>\n

L’opzione Raggio bordo ci ha permesso di rendere lo sfondo simile a un cerchio<\/strong> perch\u00e9 il raggio viene applicato allo sfondo.<\/p>\n

\"Come<\/a><\/p>\n

Lo stile delle informazioni si riferisce all’aspetto del campo in cui vengono visualizzate le informazioni<\/strong>. La visualizzazione delle informazioni \u00e8 un’opzione che determina come viene visualizzato il passaggio del mouse. Potrebbe essere Fade and Reveal, abbiamo scelto Reveal. Il colore del campo e il riempimento sono ci\u00f2 che puoi anche personalizzare qui. Info Border Radius \u00e8 un’opzione particolarmente interessante per il layout di rivelazione che abbiamo utilizzato perch\u00e9 il raggio aiuta ad adattarsi al campo delle informazioni e all’icona della puntina stessa<\/strong>. Se non abbiamo aggiunto un raggio qui, il campo delle informazioni bianco andrebbe sopra il perno della casella dell’icona rossa.<\/p>\n

\"Come<\/a><\/p>\n

Le opzioni per lo stile del titolo delle informazioni si riferiscono al titolo che abbiamo aggiunto a ciascun pin. Le impostazioni qui si applicheranno a tutti i titoli in questo hotspot dell’immagine<\/strong>. Probabilmente hai familiarit\u00e0 con le opzioni e, a prima vista, puoi specificare il tag del titolo, il colore, perfezionare la tipologia del titolo. Il margine inferiore del titolo \u00e8 un’opzione importante quando hai anche i sottotitoli nel campo delle informazioni perch\u00e9 puoi aggiungere questo margine per creare uno spazio tra il titolo e il sottotitolo.<\/p>\n

\"Come<\/a><\/p>\n

Per quanto riguarda lo stile dei sottotitoli Info, nel caso in cui aggiungessi un sottotitolo qui, puoi stilizzarne l’aspetto in modo pi\u00f9 dettagliato. Nelle opzioni di tipografia puoi giocare con diverse impostazioni.<\/p>\n

\"Come<\/a><\/p>\n

Ecco come appare il risultato finale. testo con cui abbiamo aggiunto Abbiamo utilizzato anche il widget Qi del titolo della sezione<\/a> per aggiungere il testo e rendere questa sezione del sito Web molto pi\u00f9 interessante per gli utenti futuri.<\/p>\n

\"Come<\/a><\/p>\n

Insomma<\/h2>\n

Qi Addons \u00e8 uno strumento molto intuitivo che tutti possono utilizzare con completa facilit\u00e0 e senza codifica o qualsiasi altra conoscenza tecnica. Sentiti libero di esplorare le opzioni di questo widget da solo, sperimentare, giocare e goderti il \u200b\u200bprocesso creativo per rendere il tuo sito web pi\u00f9 attraente per i tuoi utenti. In caso di domande, non esitare a contattarci nella sezione commenti: non vediamo l’ora di conoscere le tue esperienze con Qi e immagini hotspot!<\/p>\n

Fonte di registrazione: wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

L’aggiunta di hotspot di immagini in WordPress \u00e8 facile quando hai uno strumento perfetto: impara come farlo con pochi clic.<\/p>\n","protected":false},"author":1,"featured_media":372289,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[208,571,426],"tags":[846],"class_list":["post-367272","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor-7","category-nozioni-di-base-su-wordpress","category-plugin-wordpress","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/posts\/367272","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/comments?post=367272"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/posts\/367272\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/media\/372289"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/media?parent=367272"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/categories?post=367272"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/tags?post=367272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}