Cómo Añadir un Tour Virtual en WordPress: Guía Completa 2026 | Travvir
TÉCNICATUTORIAL

Cómo Añadir un Tour Virtual en WordPress: Guía Completa 2026 | Travvir

Integra un tour virtual 360° en tu sitio WordPress en minutos: método iFrame, plugin, shortcode. Guía paso a paso sin código.

Añadir un tour virtual a tu sitio WordPress es más sencillo de lo que parece. Seas agente inmobiliario, dueño de hotel o empresario, integrar un tour interactivo 360° lleva solo unos minutos y no requiere conocimientos de programación. Aquí tienes la guía completa paso a paso.

Método 1 — Integración por iFrame (recomendado)

Este método funciona en cualquier sitio WordPress sin ningún plugin. Cuando publicas un tour en Travvir, obtienes un código de integración — un fragmento HTML iFrame estándar. Para añadirlo a tu página WordPress:

  1. Abre el editor WordPress (Gutenberg) en la página que deseas.
  2. Añade un bloque "HTML personalizado".
  3. Pega el código iFrame de Travvir en el bloque.
  4. Previsualiza la página para confirmar que el tour se muestra correctamente.
  5. Publica.

La integración iFrame es compatible con el editor clásico de WordPress, Gutenberg, Elementor, Divi y todos los constructores de páginas principales — en cualquier lugar donde puedas añadir un bloque o widget HTML personalizado.

Método 2 — Plugin de tour virtual para WordPress

Varios plugins de WordPress admiten la integración de tours virtuales 360°. Las opciones populares incluyen WP VR (para alojar imágenes equirectangulares de forma local) y Virtual Tour Easy (gestor de iFrames). Estos plugins añaden una interfaz amigable para gestionar múltiples tours integrados en tu sitio.

Cuándo usar un plugin

Usa un plugin si tienes muchos tours en varias páginas y necesitas gestión centralizada, si quieres alojar las imágenes del tour localmente en tu servidor, o si necesitas gestionar los permisos de visualización por rol de usuario.

Método 3 — Shortcode

Si tu tema WordPress admite shortcodes en áreas de contenido, puedes crear un wrapper de shortcode: añade el código iFrame mediante functions.php o un plugin de snippets. Útil para sitios inmobiliarios donde los tours aparecen en plantillas de fichas automatizadas.

Mejores prácticas para tours virtuales en WordPress

  • Define una altura de iFrame de al menos 500 px para escritorio.
  • Usa CSS responsive para que el tour se adapte a móviles.
  • Añade un mensaje alternativo dentro de las etiquetas iFrame para navegadores que los bloqueen.
  • Coloca el tour encima del pliegue en páginas inmobiliarias — es lo primero que verá el visitante.

Preguntas frecuentes

¿El iFrame funciona con Elementor y Divi?

Sí — usa el widget o módulo "HTML" en esos constructores y pega el código iFrame directamente. Elementor y Divi renderizan los iFrames sin modificaciones.

¿El tour virtual se muestra correctamente en móvil?

Sí, usando un wrapper responsive. El código de integración de Travvir incluye los atributos necesarios para la navegación giroscópica en móvil.

Seguir Leyendo

Descarga Travvir y empieza a crear

Disponible en Google PlayDescargar en App Store

Consulta nuestra tabla de precios para comparar planes y funcionalidades.