En esta etapa, cubriremos las tres preguntas más comunes e importantes que surgen después de publicar un recorrido.
1. Cómo insertar rápidamente un recorrido virtual en cualquier sitio web
El método más simple y universal es incrustando iframe .
Funciona con casi cualquier sitio web y no requiere conocimientos de programación.
Veremos ejemplos que utilizan plataformas CMS populares: WordPress, Tilda y Bitrix .
Ejemplo: WordPress (Gutenberg / Elementor)
- Copie el código iframe de su recorrido desde la página de publicación de Space Pano.
- En su sitio web, agregue un bloque HTML:
- en Gutenberg : use el bloque HTML personalizado ;
- en Elementor : use el widget HTML .
- Pegue el código copiado por completo en el bloque HTML.
- Guarda la página.
Listo: el recorrido está integrado y funcionando.
El mismo enfoque se aplica a Tilda, Bitrix y cualquier otro CMS que admita la inserción de código HTML.
2. Cómo organizar un recorrido en su propio sitio web sin una suscripción
Esta opción es adecuada si desea un recorrido totalmente autónomo que funcione sin una suscripción activa .
⚠️ Importante
Este método no es adecuado para Tilda y creadores de sitios web similares que no proporcionan acceso a un sistema de archivos.
Pasos:
- Descargue el archivo ZIP del recorrido en su dispositivo.⚠️ Nota: El recorrido no se abrirá localmente en su computadora. Se requiere un entorno de servidor (localhost) para la visualización local. Si no tiene experiencia trabajando con servidores locales, no recomendamos configurarlo por separado, ya que está fuera del alcance del creador del recorrido.
- Sube el archivo a tu hosting/servidor:
- a través de un administrador de archivos como ISPmanager o cPanel ;
- o conectándose a través de FTP .
- No cargue el recorrido en el directorio raíz si su alojamiento ya tiene un sitio web activo. De lo contrario, el recorrido sobrescribirá los archivos del sistema y dañará el sitio. Enfoque recomendado:
- cree una carpeta, por ejemplo:mysite.com/tour
- cargue el archivo en esta carpeta;
- extrae el archivo.
Luego de eso, el tour estará disponible en la dirección correspondiente, por ejemplo: https://mysite.com/tour
3. Incrustar un recorrido mediante iframe (opción avanzada)
Si aloja el recorrido en su propio servidor o necesita una incrustación personalizada, puede usar un código iframe estándar reemplazando el enlace por el suyo propio.
Ejemplo de iframe básico:
Parámetros:
- width=»100%» — ancho de bloque;
- height=»600″ : altura del bloque (se puede ajustar para que coincida con el diseño de su sitio).
Incrustación fácil de usar con póster y botón de reproducción Para una mejor experiencia de usuario, recomendamos utilizar el código de inserción extendido proporcionado por nuestros desarrolladores:
- la página se desplaza normalmente hasta que se inicia el recorrido;
- el iframe no captura eventos de desplazamiento, deslizamiento o rueda del mouse;
- el recorrido se activa solo después de hacer clic en el botón Reproducir .
Este código se puede utilizar:
- con recorridos organizados en Space Tour ;
- o con tours alojados en tu propio servidor .
/* Wrapper: define el área donde se mostrará el recorrido */
.espacio-pano {
posición: relativa;
ancho: 100%;
altura: 600 px; /* Puedes cambiar la altura, p.e. 500px o 80vh */
desbordamiento: oculto;
}
/* Hacer que el iframe llene todo el contenedor */
.espacio-pano iframe {
ancho: 100%;
altura: 100%;
borde: 0;
/* Punto clave:
Mientras el recorrido no se inicia, el iframe NO captura clics/desplazamiento
entonces la página se desplaza normalmente */
eventos de puntero: ninguno;
}
/* Superposición (póster + botón Reproducir) */
.espacio-pano__overlay {
posición: absoluta;
recuadro: 0;
pantalla: flexible;
alinear elementos: centro;
justificar-contenido: centro;
desbordamiento: oculto;
transición: opacidad 0,25 s de facilidad, visibilidad 0,25 s de facilidad;
}
/* Imagen del cartel */
.space-pano__overlay-img {
posición: absoluta;
recuadro: 0;
ancho: 100%;
altura: 100%;
ajuste de objeto: cubierta;
}
/* Botón de reproducción en la parte superior del póster */
.espacio-pano__play {
posición: relativa;
índice z: 2;
fondo: transparente;
borde: ninguno;
relleno: 0;
cursor: puntero;
}
/* Ocultar superposición después del lanzamiento */
.space-pano__overlay.is-hidden {
opacidad: 0;
visibilidad: oculta;
eventos de puntero: ninguno;
}
- /* Wrapper: define el área donde se mostrará el recorrido */ .espacio-pano { posición: relativa; ancho: 100%; altura: 600 px; /* Puedes cambiar la altura, p.e. 500px o 80vh */ desbordamiento: oculto; } /* Hacer que el iframe llene todo el contenedor */ .espacio-pano iframe { ancho: 100%; altura: 100%; borde: 0; /* Punto clave: Mientras el recorrido no se inicia, el iframe NO captura clics/desplazamiento entonces la página se desplaza normalmente */ eventos de puntero: ninguno; } /* Superposición (póster + botón Reproducir) */ .espacio-pano__overlay { posición: absoluta; recuadro: 0; pantalla: flexible; alinear elementos: centro; justificar-contenido: centro; desbordamiento: oculto; transición: opacidad 0,25 s de facilidad, visibilidad 0,25 s de facilidad; } /* Imagen del cartel */ .space-pano__overlay-img { posición: absoluta; recuadro: 0; ancho: 100%; altura: 100%; ajuste de objeto: cubierta; } /* Botón de reproducción en la parte superior del póster */ .espacio-pano__play { posición: relativa; índice z: 2; fondo: transparente; borde: ninguno; relleno: 0; cursor: puntero; } /* Ocultar superposición después del lanzamiento */ .space-pano__overlay.is-hidden { opacidad: 0; visibilidad: oculta; eventos de puntero: ninguno; }
- // Inicia el recorrido cuando el usuario hace clic en el botón Reproducir: // 1) hacer que se pueda hacer clic en el iframe (habilitar eventos de puntero) // 2) eliminar la superposición del póster document.addEventListener(‘clic’, función (evento) { const btn = event.target.closest(‘.space-pano__play’); si (!btn) regresa; contenedor const = btn.closest(‘.space-pano’); si (!wrapper) regresa; const iframe = wrapper.querySelector(‘iframe’); const overlay = wrapper.querySelector(‘.space-pano__overlay’); if (iframe) iframe.style.pointerEvents = ‘automático’;si (superposición) { overlay.classList.add(‘está-oculto’); setTimeout(función() { superposición.remove(); }, 300); } }); // Si falta el póster o no se carga, elimina la imagen para que no bloquee la interfaz de usuario document.addEventListener(‘DOMContentLoaded’, función () { document.querySelectorAll(‘.space-pano__overlay-img’).forEach(function (img) { const src = img.getAttribute(‘src’); si (!src) { img.remove(); regresar; } img.addEventListener(‘error’, función () { img.remove(); }); }); });
Resumen
En esta etapa, ya sabes cómo:
integra un recorrido en cualquier sitio web en tan solo unos minutos;
organiza un recorrido de forma independiente sin suscripción;
- utiliza la incrustación de iframe en formatos básicos y avanzados.
- ✅ La guía está completa.
- Ahora comprende todo el flujo de trabajo, desde cargar panorámicas hasta publicar y utilizar su recorrido virtual.
