Vuoi scoprire come creare un'immagine interattiva con Hotspot in WordPress grazie a Elementor e componenti aggiuntivi essenziali?
L'immagine è un ottimo strumento per trasmettere informazioni. Tutti sanno che le informazioni trasmesse attraverso l'immagine - e la forma visiva nel suo insieme - sono più facili da capire e ricordare.
Nel contesto del Web, puoi utilizzare molti formati di immagine. Da un'infografica, una foto, un fumetto, un'illustrazione, ecc….
Se desideri creare contenuti Web come l'anatomia di qualcosa, punti di riferimento della città , mappe o indicazioni stradali, la creazione di immagini con Hotspot può essere un'ottima idea.
L'idea di questo tipo di contenuto è fornire un'immagine interattiva che renda facile per i tuoi lettori comprendere le informazioni che stai trasmettendo. Puoi aggiungere hotspot su un'immagine che contiene una descrizione comando su ogni hotspot. Ecco un esempio.
Se si dispone di un sito web basato su WordPress, creare un'immagine con hotspot non è troppo difficile da fare. Puoi crearne uno usando il modulo Componenti aggiuntivi essenziali .
Che cos'è il modulo Componenti aggiuntivi essenziali?
Componenti aggiuntivi essenziali è un componente aggiuntivo diElementor. Questa è una delle mod più popolari con oltre 2 milioni di download. Questo componente aggiuntivo aggiunge circa 60 widget aggiuntivi al tuo Elementor.
Uno dei widget offerti da Essential Addons è Hotspot di immagini EA che puoi utilizzare per creare un'immagine interattiva. Essential Addons stesso è un componente aggiuntivo freemium, ma è necessario utilizzare la versione pro per creare immagini con Hotspot perché il widget EA Image Hotspots è disponibile solo su questa versione.
Come utilizzare il modulo Componenti aggiuntivi essenziali per creare immagini con Hotspot
Innanzitutto, devi installare i moduli Elementor ed Essential Addons sul tuo WordPress. Puoi ottenere la versione pro di Essential Addons sul suo sito web ufficiale. Considerando che per Elementor, puoi utilizzare la versione gratuita.
Vedi anche: Come utilizzare un widget globale in Elementor
La versione gratuita di Elementor è disponibile nella directory del WordPress Plugin quindi puoi installarlo digitando "elementor" nella casella di ricerca del programma di installazione dei plug-in (Plugin -> Aggiungi).
Una volta installati Elementor ed Essential Addons, crea una nuova pagina (Pagine -> Aggiungi) o un nuovo elemento (Articoli – > Aggiungi) e modificalo con Elementor. Verrai reindirizzato all'editor di Elementor dopo aver fatto clic sul pulsante Modifica con Elementor.
Prima di creare le immagini con gli hotspot, puoi prima impostare il layout. Per fare ciò, apri il pannello delle impostazioni della pagina facendo clic sull'icona a forma di ingranaggio nell'angolo in basso a sinistra del pannello di sinistra.
Leggi anche: Come utilizzare il widget dei post di Elementor
Imposta il layout nel menu a discesa disposizione
Aggiungi una nuova sezione facendo clic sull'icona più nella casella di modifica e aggiungi il widget EA Image Hotspots dal pannello di sinistra.
Aggiungi la tua immagine facendo clic sul selettore di immagini nel pannello di sinistra.
opzione aperta Punti caldi sul pannello di sinistra per aggiungere i punti di accesso. Per impostazione predefinita, il widget EA Image Hotspot contiene un hotspot. È possibile fare clic sul punto di accesso predefinito per modificarne il contenuto.
Per impostazione predefinita, il tipo di punto di accesso è impostato su icona. Puoi cambiarlo in Testo o partire Vide se lo si desidera.
Fare clic sulla scheda POSIZIONE per impostare la posizione del punto di accesso. Imposta le posizioni X e Y trascinando i cursori.
Fare clic sulla scheda SUGGERIMENTO per aggiungere il contenuto della descrizione comandi. Attiva il tooltip e aggiungi i tuoi contenuti nell'editor. Puoi anche impostare la posizione del tooltip, in alto, in basso, a sinistra oa destra.
Per aggiungere altri hotspot, basta fare clic sul pulsante AGGIUNGI UN ELEMENTO nella sezione Punti caldi e ripetere i passaggi precedenti per impostare la posizione dell'hotspot, il contenuto del tooltip e la posizione del tooltip.
Apri la sezione Impostazioni descrizione comandi per impostare la dimensione dei suggerimenti e l'effetto di animazione.
Ora vai alla scheda Style per dare uno stile ai tuoi hotspot e ai suggerimenti. Innanzitutto, apri l'opzione Immagine per impostare la dimensione dell'immagine.
Sezione aperta hotspot per personalizzare gli hotpot. Puoi impostare la dimensione, il colore dell'icona (o il testo a seconda del tipo di hotspot selezionato), il colore dello sfondo, il raggio del bordo ecc...
Scopri anche: Come aggiungere elementi correlati in Elementor
Apri la sezione tooltip per personalizzare i suggerimenti. Puoi impostare il colore di sfondo, il colore del testo, la tipografia (dimensione del carattere, famiglia di caratteri, stile del carattere) e la larghezza.
Finora hai creato con successo immagini con hotspot. Puoi giocare con il pannello di sinistra per personalizzare le tue immagini con gli hotspot finché non sei soddisfatto del risultato. Al termine, puoi fare clic sul pulsante PUBBLICARE per pubblicare la tua pagina.
Aggiungi immagini con hotspot a Gutenberg
Se vuoi aggiungere immagini con hotspot come materiale di supporto per l'articolo su cui stai lavorando, puoi integrarlo con Gutenberg (l'editor predefinito di WordPress) usando il plugin Blocchi Elementor per Gutenberg. Questo plug-in ti consente di utilizzare un modello Elementor come blocco Gutenberg.
Per salvare le immagini con gli hotspot sopra come modello di sezione Elementor, fai clic con il pulsante destro del mouse sulla maniglia della sezione e seleziona Salva come modello.
Dai un nome al tuo modello e clicca sul pulsante REGISTRARE.
Apri l'articolo in cui desideri aggiungere immagini con hotspot. Aggiungi un nuovo blocco, seleziona Libreria Elementor e seleziona il modello di immagine con gli hotspot che hai appena creato.
Ottieni subito Elementor Pro!!!
Conclusione
Ecco ! Questo è tutto per questo articolo che ti mostra come crea un'immagine interattiva con Hotspot in WordPress grazie a Elementor e Essential Addons. Se hai dei dubbi su come arrivarci, faglielo sapere nel commentaires.
Tuttavia, puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...
