Los tours 360 son una excelente manera de aumentar la interacción en tu sitio web, especialmente cuando se trata de listados inmobiliarios, blogs de viajes o servicios de agencias de fotografía o visualización 3D.
Y con Webflow habiendo conquistado el mundo, muchas empresas están invirtiendo en nuevos sitios para renovar su marca y experiencia en línea.
Nos encanta Webflow (estás leyendo esto en un sitio Webflow) y queremos compartir cómo crear, incrustar y estilizar un tour en menos de 5 minutos - el único requisito es que ya tengas las imágenes.
Esta publicación describe los pasos por escrito, pero si prefieres ver el video también lo tenemos para ti.
Aquí tienes un resumen rápido de los pasos:
Muy bien, comencemos.
El primer paso es preparar tus imágenes 360 - pueden ser fotos de cámaras 360 o drones, o renderizados 3D de Blender, Unity u otro software 3D popular.
Podrás saber si la imagen es 360 si se ve así👇
Asegúrate de que las imágenes tengan una proporción 2:1 y hasta 25 MB cada una. Cuanto menor sea el tamaño del archivo, más rápido cargará tu tour.
Si eres completamente nuevo en el mundo de las imágenes 360 puedes consultar esta guía para una descripción completa de diferentes configuraciones. Si tienes un teléfono Android puedes usar el modo fotosfera en la cámara.
Ahora necesitas un lugar para subir tus imágenes 360° y crear un tour. Usaremos Koala360. Si ya tienes una cuenta puedes ir al panel de control y si no, puedes crear una cuenta gratis. Una vez en el panel de control puedes completar el formulario "CREAR UN TOUR" para crear el tour.
Con el tour creado y las imágenes preparadas, simplemente arrastra y suelta todas tus imágenes en el constructor de tours. Las imágenes se subirán y podrás editar los nombres de cada imagen dentro del constructor.
Crea el recorrido de tu tour enlazando cada imagen entre sí. Simplemente arrastra una miniatura de la imagen que quieras enlazar hacia la imagen 360 actual. ¡Listo, se ha creado un hotspot! Ahora puedes navegar a través de las imágenes haciendo clic en los hotspots. Añade tantos hotspots como necesites.
Dale un poco de personalidad a tu tour haciendo clic en el botón ⚙️ y activa las funciones que desees. Puedes añadir rotación automática, modo de pantalla completa, ocultar las miniaturas o usar muchas más funciones PRO, con más que se añaden cada semana. ¡Ajusta a tu gusto y luego prepárate para publicar!
Una vez que hayas creado tu tour, es hora de publicarlo. Solo presiona el botón "PUBLICAR" en la esquina superior derecha cuando estés en modo de edición y listo, tu tour está en línea y se puede acceder directamente a través del enlace o el código de incrustación.
Haz clic en el botón 🚀 para abrir el código de incrustación que contiene un iFrame. Haz clic en él para copiarlo y pega el código directamente en un elemento de incrustación en tu sitio web Webflow.
Por defecto, el ancho y alto están configurados en píxeles, pero sugerimos configurar el iFrame del tour a width=100% y height=100% y estilizar el elemento de incrustación para controlar el tamaño del tour.
Siguiendo estos pasos habrás creado e incrustado exitosamente tu tour 360 en tu sitio web Webflow. Tus usuarios ahora pueden explorar tu experiencia 360 en todos sus dispositivos.
Algunos consejos generales:
Como puedes ver, incrustar un tour 360 en tu sitio web Webflow nunca ha sido tan fácil. Koala360 es una herramienta poderosa que puede ayudarte a mejorar tu sitio web y brindar a tu audiencia una experiencia memorable e inmersiva.
Aquí hay un elemento de incrustación de Webflow con el código de incrustación del tour Koala360.
Sube tus imágenes 360°, añade hotspots y comparte.Miles de agentes, arquitectos, fotógrafos y estudios ya usan Koala.