Vuoi scoprire come creare un tour virtuale a 360 gradi in WordPress con l'aiuto diElementor?

La tecnologia di Google Street View ti consente di camminare virtualmente in una determinata area senza essere fisicamente presente. Ad esempio, puoi praticamente vedere l'ambiente intorno a Kuta Beach a Bali mentre sei fisicamente nel tuo appartamento a Londra.

Per alcuni luoghi, come il Louvre di Parigi, Google Street View può persino coprire un tour virtuale al coperto.

Se disponi di un sito Web basato su WordPress, puoi facilmente creare una funzionalità di guida a 360 gradi sul tuo sito Web senza codifica.

Offrire un tour virtuale a 360 gradi è un'ottima idea per aziende come uno zoo, un'attrazione turistica o un ristorante perché consente al tuo Visitatori per vedere virtualmente l'ambiente intorno alla tua posizione.

Vedi anche: Come utilizzare il widget dei post di Elementor

Come accennato, puoi aggiungere una funzionalità di guida a 360 gradi nel tuo sito Web WordPress senza codifica. Puoi farlo usando i seguenti plugin:

Come creare un tour virtuale a 360 gradi in WordPress utilizzando i componenti aggiuntivi essenziali

Prima di iniziare, assicurati di aver installato Elementor e componenti aggiuntivi essenziali. Potete scarica Elementor (puoi usare la versione gratuita) sul repository ufficiale di plugin di WordPress. Mentre per i componenti aggiuntivi essenziali, puoi ottenerlo sul suo site officiel.

Scarica Componenti aggiuntivi essenziali Pro

Passaggio 1: integrazione dei componenti aggiuntivi essenziali con Google Maps

La prima cosa che devi fare dopo aver installato Elementor ed Essential Addons è integrare Essential Addons con Google Maps. Puoi integrarli utilizzando una chiave API di Google Maps.

Per creare una chiave API di Google Map, prima visita Console dell'API di Google e accedi con il tuo account Google. Se non hai ancora un progetto, creane uno nuovo facendo clic sull'elenco a discesa nella parte superiore della dashboard principale della Console API di Google e fai clic sul pulsante NUOVO PROGETTO sulla finestra che appare.

Assegna un nome al tuo nuovo progetto e fai clic sul pulsante CREATE .

crea un tour virtuale a 360 gradi in WordPress con Elementor

Una volta creato il tuo nuovo progetto, selezionalo tramite il menu a discesa in alto e fai clic su Biblioteca sul pannello di sinistra.

crea un tour virtuale a 360 gradi in WordPress con Elementor

L'API di Google Maps è suddivisa in 17 tipi. Puoi cliccare sul link MOSTRA TUTTO nella sezione Cartoline d'auguri per vederli tutti.

Per poter utilizzare Essential Addons, è necessario abilitare le seguenti API:

  • API delle indicazioni stradali
  • API di geocodifica
  • Mappe JavaScript API
  • API Places

Per attivare un'API, selezionare l'API interessata (cliccandoci sopra) e cliccare sul pulsante ATTIVARE.

Dopo aver completato l'abilitazione delle API richieste, torna alla dashboard principale della console API di Google e fai clic su Identifiers sul pannello di sinistra. Fare clic sul pulsante Crea credenziali e seleziona Chiave API. Copia la chiave API nel popup che appare.

crea un tour virtuale a 360 gradi in WordPress con Elementor

Una volta ottenuta la chiave API, accedi alla dashboard di WordPress e vai alla pagina Impostazioni componenti aggiuntivi essenziali facendo clic sul menu Componenti aggiuntivi essenziali sulla barra laterale sinistra.

Vai alla scheda Elementi e scorri verso il basso nella sezione Elementi di contenuto dinamico. Cliquez sur Configurazione del widget Google Map avanzata e incolla la tua chiave API di Google. Fare clic sul pulsante SALVA IMPOSTAZIONI per applicare la modifica.

Passaggio 2: inizia a creare il tour virtuale a 360 gradi

Crea una nuova pagina (Pagine -> Aggiungi) o un nuovo elemento (Articoli – > Aggiungi) e modificalo con Elementor. Prima di iniziare a creare la pagina, puoi prima definire il layout.

Scopri anche: Come aggiungere elementi correlati in Elementor

Per fare ciò, apri il pannello Impostazioni facendo clic sull'icona a forma di ingranaggio nell'angolo in basso a sinistra. Imposta il layout dal menu a discesa disposizione.

Aggiungi una nuova sezione facendo clic sull'icona più nella casella di modifica e aggiungi la mappa di Google EA al suo interno.

crea un tour virtuale a 360 gradi in WordPress con Elementor

Sotto l'opzione Impostazioni generali tab Contenuto , cambia il tipo di mappa in Panorama.

Aprire Google Maps in una nuova scheda e trova dove desideri creare il tour virtuale. Fare clic con il tasto destro sulla posizione del pin e fare clic con il tasto sinistro ora sulla prima voce del menu contestuale che appare. Ciò consente di copiare la latitudine (il primo valore) e la longitudine (il secondo valore).

Torna alla scheda Contenuti e incolla la latitudine e la longitudine nei rispettivi campi.

crea un tour virtuale a 360 gradi in WordPress con Elementor

opzione aperta Controlli della mappa per abilitare/disabilitare i controlli della carta che vuoi fornire. È inoltre possibile impostare il livello di zoom iniziale.

Vai alla scheda Style per definire la larghezza e l'altezza della tua carta.

crea un tour virtuale a 360 gradi in WordPress con Elementor

Fare clic sul pulsante PUBBLICARE per pubblicare la tua mappa.

NOTA: se la mappa non viene caricata dopo aver trascinato il widget Google Maps nell'editor e viene visualizzato il messaggio "Solo per scopi di sviluppo", assicurati di attivare la fatturazione di Google Cloud.

La nuova politica di Google richiede agli sviluppatori di attivare l'account di fatturazione (puoi comunque utilizzare l'API di Google Maps gratuitamente).

Ottieni subito Elementor Pro!!!

Conclusione

Ecco ! Questo è tutto per questo articolo che ti mostra come creare un tour virtuale a 360 gradi in WordPress. 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.

...