In questa fase tratteremo le tre domande più comuni e importanti che sorgono dopo la pubblicazione di un tour.
1. Come incorporare rapidamente un tour virtuale su qualsiasi sito web
Il metodo più semplice e universale è incorporamento di iframe .
Funziona con quasi tutti i siti Web e non richiede competenze di programmazione.
Esamineremo esempi che utilizzano le piattaforme CMS più diffuse: WordPress, Tilda e Bitrix .
Esempio: WordPress (Gutenberg/Elementor)
- Copia il codice iframe del tuo tour dalla pagina di pubblicazione di Space Pano.
- Sul tuo sito web, aggiungi un blocco HTML:
- in Gutenberg — utilizza il blocco HTML personalizzato ;
- in Elementor : utilizza il widget HTML .
- Incolla interamente il codice copiato nel blocco HTML.
- Salvare la pagina.
Fatto: il tour è incorporato e funziona.
Lo stesso approccio si applica a Tilda, Bitrix e qualsiasi altro CMS che supporti l’inserimento di codice HTML.
2. Come organizzare un tour sul tuo sito web senza abbonamento
Questa opzione è adatta se desideri un tour completamente autonomo che funzioni senza un abbonamento attivo .
⚠️ Importante
Questo metodo è non adatto a Tilda e costruttori di siti Web simili che non forniscono accesso a un file system.
Passaggi:
- Scarica l’archivio ZIP del tour sul tuo dispositivo.⚠️ Nota: il tour non si aprirà localmente sul tuo computer. Per la visualizzazione locale è necessario un ambiente server (localhost). Se non hai esperienza con i server locali, non ti consigliamo di configurarlo separatamente, poiché va oltre l’ambito del generatore di tour.
- Carica l’archivio sul tuo hosting/server:
- tramite un file manager come ISPmanager o cPanel ;
- o collegandosi tramite FTP .
- Non caricare il tour nella directory principale se il tuo hosting ha già un sito web attivo. In caso contrario, il tour sovrascriverà i file di sistema e danneggerà il sito. Approccio consigliato:
- crea una cartella, ad esempio:miosito.com/tour
- carica l’archivio in questa cartella;
- estrarre l’archivio.
Successivamente il tour sarà disponibile all’indirizzo corrispondente, ad esempio: https://mysite.com/tour
3. Incorporamento di un tour tramite iframe (Opzione avanzata)
Se ospiti il tour sul tuo server o hai bisogno di un incorporamento personalizzato, puoi utilizzare un codice iframe standard sostituendo il collegamento con il tuo.
Esempio di iframe di base:
Parametri:
- width=”100%” — larghezza del blocco;
- Height=”600″ – altezza del blocco (può essere regolata per adattarla al design del tuo sito).
Incorporamento intuitivo con poster e pulsante di riproduzione Per una migliore esperienza utente, consigliamo di utilizzare il codice di incorporamento esteso fornito dai nostri sviluppatori:
- la pagina scorre normalmente fino al lancio del tour;
- l’iframe non acquisisce eventi di scorrimento, scorrimento o rotellina del mouse;
- il tour si attiva solo dopo aver fatto clic sul pulsante Riproduci .
È possibile utilizzare questo codice:
- con tour ospitati su Space Tour ;
- o con tour ospitati su il tuo server .
/* Wrapper: definisce l’area in cui verrà visualizzato il tour */
.spazio-panorama {
posizione: relativa;
larghezza: 100%;
altezza: 600px; /* Puoi modificare l’altezza, ad es. 500px o 80vh */
overflow: nascosto;
}
/* Fa in modo che l’iframe riempia l’intero wrapper */
.space-pano iframe {
larghezza: 100%;
altezza: 100%;
bordo: 0;
/* Punto chiave:
Mentre il tour non viene avviato, l’iframe NON acquisisce clic/scorrimento
quindi la pagina scorre normalmente */
eventi puntatore: nessuno;
}
/* Sovrapposizione (poster + pulsante Riproduci) */
.space-pano__overlay {
posizione: assoluta;
inserto: 0;
display: flessibile;
allineare gli elementi: centro;
giustifica-contenuto: centro;
overflow: nascosto;
transizione: opacità 0,25 s facilità, visibilità 0,25 s facilità;
}
/* Immagine poster */
.space-pano__overlay-img {
posizione: assoluta;
inserto: 0;
larghezza: 100%;
altezza: 100%;
adattamento all’oggetto: copertura;
}
/* Pulsante di riproduzione in cima al poster */
.space-pano__play {
posizione: relativa;
indice z: 2;
sfondo: trasparente;
bordo: nessuno;
imbottitura: 0;
cursore: puntatore;
}
/* Nascondi l’overlay dopo il lancio */
.space-pano__overlay.is-hidden {
opacità: 0;
visibilità: nascosta;
eventi puntatore: nessuno;
}
- /* Wrapper: definisce l’area in cui verrà visualizzato il tour */ .spazio-panorama { posizione: relativa; larghezza: 100%; altezza: 600px; /* Puoi modificare l’altezza, ad es. 500px o 80vh */ overflow: nascosto; } /* Fa in modo che l’iframe riempia l’intero wrapper */ .space-pano iframe { larghezza: 100%; altezza: 100%; bordo: 0; /* Punto chiave: Mentre il tour non viene avviato, l’iframe NON acquisisce clic/scorrimento quindi la pagina scorre normalmente */ eventi puntatore: nessuno; } /* Sovrapposizione (poster + pulsante Riproduci) */ .space-pano__overlay { posizione: assoluta; inserto: 0; display: flessibile; allineare gli elementi: centro; giustifica-contenuto: centro; overflow: nascosto; transizione: opacità 0,25 s facilità, visibilità 0,25 s facilità; } /* Immagine poster */ .space-pano__overlay-img { posizione: assoluta; inserto: 0; larghezza: 100%; altezza: 100%; adattamento all’oggetto: copertura; } /* Pulsante di riproduzione in cima al poster */ .space-pano__play { posizione: relativa; indice z: 2; sfondo: trasparente; bordo: nessuno; imbottitura: 0; cursore: puntatore; } /* Nascondi l’overlay dopo il lancio */ .space-pano__overlay.is-hidden { opacità: 0; visibilità: nascosta; eventi puntatore: nessuno; }
- // Avvia il tour quando l’utente fa clic sul pulsante Riproduci: // 1) rende l’iframe cliccabile (abilita eventi puntatore) // 2) rimuove la sovrapposizione del poster document.addEventListener(‘clic’, funzione (evento) { const btn = event.target.closest(‘.space-pano__play’); if (!btn) ritorno; const wrapper = btn.closest(‘.space-pano’); if (!wrapper) ritorno; const iframe = wrapper.querySelector(‘iframe’); const overlay = wrapper.querySelector(‘.space-pano__overlay’); if (iframe) iframe.style.pointerEvents = ‘auto’;se (sovrapposizione) { overlay.classList.add(‘è nascosto’); setTimeout(funzione () { sovrapposizione.rimuovi(); }, 300); } }); // Se il poster manca o non viene caricato, rimuovi l’immagine in modo che non blocchi l’interfaccia utente document.addEventListener(‘DOMContentLoaded’, funzione () { document.querySelectorAll(‘.space-pano__overlay-img’).forEach(funzione (img) { const src = img.getAttribute(‘src’); se (!src) { img.rimuovi(); ritorno; } img.addEventListener(‘errore’, funzione () { img.rimuovi(); }); }); });
Riepilogo
A questo punto sai come:
incorpora un tour su qualsiasi sito web in pochi minuti;
ospita un tour in modo indipendente senza abbonamento;
- utilizza l’incorporamento iframe sia nei formati di base che in quelli avanzati.
- ✅ La guida è completa.
- Ora conosci l’intero flusso di lavoro: dal caricamento dei panorami alla pubblicazione e all’utilizzo del tour virtuale.
