Configurar el visor de un tour

La pestaña Configuración del editor decide cómo ve el cliente el tour: el tema de la cinta de escenas, qué botones aparecen, cómo se comporta la panorámica y si el plano empieza abierto. Los cambios afectan a todo el tour.

Abrir la configuración

1. En el menú lateral, abre Herramientas → Estudio de Tours → Tours Virtuales.
2. Haz clic en el nombre del tour.
3. En el panel derecho, pulsa la pestaña Configuración.

El visor de la izquierda pasa a Vista previa, así que ves cada cambio en el momento.

Elegir el tema

El tema cambia la forma de la cinta de escenas, la tira con las miniaturas de las escenas.

Tema	Cómo es
Moderno	Cinta redondeada con botones oscuros, abajo.
Flujo	Cinta redondeada con flechas en línea.
Cascada	Barra lateral con las escenas en cascada, a la izquierda.
Clásico	Escenas cuadradas con flechas flotantes.

1. Haz clic en la tarjeta del tema. Queda marcada con un círculo blanco.
2. Mira la vista previa para comprobar el resultado.

Colores del vehículo

Esta sección solo aparece en los tours de tipo Automotriz. Está justo debajo del tema, con dos listas: Exterior (la carrocería) e Interior (la tapicería). Cada color que agregues queda en su lista.

Si no la ves, el tour todavía no es Automotriz. Cámbialo así:

1. Pulsa la pestaña Vista previa del panel.
2. Despliega Tipo de tour y elige Automotriz.
3. Vuelve a la pestaña Configuración. La sección Colores ya aparece, con el aviso Sin colores configurados en cada lista.

Para agregar un color:

1. En Exterior o en Interior, pulsa Agregar color. Se abre el cuadro Nuevo color.
2. Escribe el Nombre del color (por ejemplo, Rojo pasión).
3. Elige cómo se define: Color sólido o Imagen o textura.
4. En Color sólido, pulsa uno de los círculos de la paleta. El color elegido queda marcado con una palomita.
5. Pulsa Guardar en el cuadro.

El color aparece en su lista con una muestra, el nombre y un código (por ejemplo, DOC-TOUR-ROSA · #F32A73). A la derecha de cada fila hay flechas para subirlo o bajarlo de lugar, un lápiz para editarlo y una papelera para quitarlo.

Los colores y el cambio de tipo no se guardan al instante: quedan en el borrador hasta que pulses Guardar, abajo a la derecha del panel. Si cierras antes, Prolibu avisa con Cambios sin guardar.

Interfaz

Debajo del tema está la sección Interfaz. Cada opción es un interruptor; las sangradas forman un grupo propio que se pliega con la flecha de su título.

• Pantalla completa.
• Mostrar cinta de escenas: viene encendido. Apágalo si no quieres que se vean las miniaturas de las escenas.
• Ocultar la cinta al inicio.
• Pantalla de inicio: una pantalla que se ve al abrir el tour. Se explica en Pantalla de inicio.
• Ocultar botón de compartir: oculta el botón de compartir del visor.
• Botón en vivo: agrega un botón que lleva a una dirección web. Se explica en Botón en vivo.
• Marca de agua: pone tu logo sobre el visor. Se explica en Marca de agua.

Pantalla de inicio

Es una portada con un título y un subtítulo que el cliente ve unos segundos antes de entrar al tour.

1. En Interfaz → Pantalla de inicio, enciende Activado. Debajo aparecen los campos de la portada.
2. En Imagen, pulsa Cargar archivo (o Pegar del portapapeles o Cloud Drive) si quieres usar una imagen.
3. Escribe el Título y el Subtítulo.
4. Mueve el control Duración para decidir cuánto dura la pantalla. Se mide en milisegundos y viene en 3000 (3 segundos). Con 0, la pantalla se queda hasta que el cliente hace clic.
5. Pulsa Guardar.

Para comprobarlo, abre el tour desde la lista con el icono de abrir. Con el título DOC-TOUR Bienvenida y el subtítulo Recorrido de prueba, el visor muestra primero esos dos textos sobre fondo negro y luego pasa a la escena.

Botón en vivo

Pone un botón fijo en el visor que abre la dirección que tú elijas.

1. En Interfaz → Botón en vivo, enciende Activado.
2. En Tipo de botón, deja Botón o elige Ícono.
3. En URL, escribe la dirección completa, con https://.
4. Pulsa Guardar.

En el visor, el botón aparece arriba a la derecha, en rojo y con el texto En vivo. Al pulsarlo, la dirección se abre en una pestaña nueva.

Marca de agua

Muestra una imagen, por ejemplo tu logo, encima del visor.

1. En Interfaz → Marca de agua, pulsa Cargar archivo (o Pegar del portapapeles o Cloud Drive) y elige la imagen.
2. Cuando la imagen termina de subir, aparecen tres controles nuevos:
   • Posición: la esquina donde se ve. Puedes elegir Arriba a la izquierda, Arriba a la derecha, Abajo a la izquierda o Abajo a la derecha, que es la que viene elegida.
   • Opacidad: qué tan visible es la imagen. Viene en 0.5 y el máximo es 1.
   • Tamaño: el ancho máximo de la imagen, en píxeles. Viene en 120 y puedes moverlo entre 50 y 500.
3. Pulsa Guardar.

Planos y puntos de interés

En Planos en el visor:

• Mostrar el plano abierto: viene encendido; con él, el recuadro del plano se ve abierto en el visor.
• Texto del ícono del plano: un campo de texto para el ícono del plano.

En Puntos de interés:

• Activar audio: viene encendido.
• Permitir ocultarlos.
• Mostrar el título del punto: muestra el título de cada punto debajo de su ícono.

Panorama 360 y cámara

Estas opciones afectan a las escenas Panorama 360.

En Panorama 360:

• Efecto planeta.
• Rotación automática: viene encendida y hace girar la panorámica sola. Con Velocidad de rotación ajustas lo rápido que gira (por defecto, 1). En el visor, el cliente la detiene con el botón Detener el giro.

En Cámara:

• Fijar el campo de visión horizontal.
• Limitar la inclinación: viene encendido. Límite inferior (50 por defecto) y Límite superior (180 por defecto) marcan cuánto puede mirar el cliente hacia abajo y hacia arriba.
• Sin zoom cuando está insertado: viene encendido. Se aplica cuando el tour está insertado en otra web.

Secuencia

Estas opciones afectan a las escenas Secuencia.

Arrastre, cómo responde la secuencia cuando el cliente la arrastra:

• Activado y Deslizable: vienen encendidos.
• Velocidad: en milisegundos; menos es más rápido. Por defecto, 100.
• Invertir sentido.

Reproducción automática, para que la secuencia gire sola:

• Activado: viene apagado.
• Velocidad: milisegundos por cuadro. Por defecto, 300.
• Una sola vuelta e Invertir sentido.
• Espera para reanudar: milisegundos de espera después de que el usuario interactúa. Por defecto, 2000.

Zoom:

• Zoom con el puntero, con su Escala (1.5 por defecto).
• Lupa, con su Tamaño de la lupa en píxeles (150 por defecto).

Interfaz:

• Mostrar insignia.
• Mostrar indicador de cuadro: viene encendido.

Código personalizado

Para cambios que las opciones no cubren, la sección Código personalizado admite JavaScript y CSS. Es para quien sabe programar.

• JavaScript corre aislado en el visor público con window.tour, sin acceso a la página ni a la sesión. Trae ejemplos para empezar: onSceneChange (hacer algo al cambiar de escena), fetch (enviar analítica a un webhook), goToScene (saltar a una escena) y openUrl (abrir un enlace en una escena).
• CSS se aplica solo al visor del tour. Sus ejemplos: .vtr (ocultar la cinta de escenas), .vtb (barra de herramientas más cuadrada) y font-family (tipografía propia).

Para usar un ejemplo:

1. Pulsa el ejemplo en la lista. El código aparece en el editor y la vista previa cambia.
2. Ajusta el código si hace falta. Si prefieres empezar con el editor vacío, pulsa Escribir desde cero.

Guardar la configuración

1. Pulsa Guardar, abajo a la derecha del panel.

Prolibu guarda la configuración y cierra el editor. Si pulsas Cancelar con cambios sin guardar, Prolibu avisa con Cambios sin guardar: Cancelar te devuelve al editor y Cerrar sin guardar descarta los cambios.

Para ver el resultado como lo verá el cliente, abre el tour con Ver tour, como se explica en Ver y compartir un tour.