Saltar al contenido principal

Hotspots interactivos

Los hotspots son puntos clicables que puedes poner en las páginas de un flipbook o un álbum, en las obras de una galería y en las pantallas de un mockup. Sirven para guiar al espectador por tu material sin explicarle nada.

Los hotspots están disponibles para proyectos de Flipbook, Álbum, Tarjeta de presentación, Galería, Desktop Mockup y Mobile Mockup. Los proyectos de Credencial usan la barra de navegación para interactividad.

¿Qué son los hotspots?

Los hotspots son iconos visuales que aparecen en las páginas de tu flipbook, obras de galería o pantallas de mockup. Al hacer clic, realizan una acción como:

  • Saltar a otra página en el flipbook
  • Abrir un sitio web externo
  • Mostrar información emergente con datos
  • Abrir un modal con contenido enriquecido

Tipos de hotspots

Ir a página

Lleva al espectador a una página concreta de tu flipbook. Ideal para:

  • Enlaces de tabla de contenidos
  • Referencias "Aprende más en la página X"
  • Enlaces de volver a portada/inicio
  • Sugerencias de navegación secuencial

Abrir URL

Abre un sitio web externo en una nueva pestaña. Perfecto para:

  • Enlaces de compra de productos
  • Perfiles de redes sociales
  • Formularios de contacto
  • Recursos relacionados

Mostrar información emergente

Muestra texto cuando los espectadores pasan el cursor por encima del hotspot. Útil para:

  • Descripciones de productos
  • Información de precios
  • Datos rápidos
  • Sugerencias y consejos

Mostrar modal

Abre un popup con contenido de texto enriquecido. Ideal para:

  • Información detallada de productos
  • Términos y condiciones
  • Información de contacto
  • Contenido adicional que no cabe en la página

Agregando un hotspot

  1. Navega a la página u obra donde quieres agregar el hotspot. Usa la navegación para ir a la página correcta (flipbook) u obra (galería).
  2. Abre la pestaña de hotspots en la barra lateral derecha.
  3. Haz clic en "Agregar hotspot" para comenzar a crear un nuevo hotspot.
  4. Haz clic en la vista previa para establecer la posición del hotspot. Verás una vista previa de dónde aparecerá el hotspot.
  5. Configura el hotspot en el formulario que aparece:
    • Elige el tipo de acción (Página, URL, Tooltip, Modal)
    • Establece el objetivo de la acción (número de página, URL o contenido)
    • Selecciona un icono de la biblioteca
    • Elige un color
    • Establece el tamaño (extra pequeño, pequeño, mediano, grande)
    • Agrega una etiqueta opcional
    • Elige el estilo del marcador (Punto o Invisible)
  6. Guarda el hotspot haciendo clic en el botón de guardar.

Opciones de personalización

Iconos

Elige entre 50+ iconos incluyendo flechas, formas, símbolos e iconos de acción. Usa la búsqueda para encontrar el icono perfecto.

Colores

Selecciona de colores predeterminados o ingresa un código hex personalizado. Haz que los hotspots destaquen o se mezclen con tu diseño.

Tamaños

Cuatro tamaños disponibles: Extra pequeño (14px), pequeño (24px), mediano (32px) y grande (44px). Elige según la importancia y diseño de la página.

Posición

Posiciona hotspots con precisión haciendo clic en la página. Ajusta fino con coordenadas de porcentaje (X/Y).

Estilo del marcador

Elige entre Punto e Invisible. Un hotspot invisible no dibuja ningún marcador pero sigue respondiendo al clic, y el cursor cambia igual al pasar por encima. Úsalo para imágenes que ya muestran su propio botón. En el editor se ve como un anillo hueco para que puedas moverlo.

Gestionando hotspots

La pestaña de hotspots muestra todos los hotspots en la página u obra actual:

  • Editar: Haz clic en un hotspot en la lista para modificar su configuración
  • Eliminar: Remueve un hotspot haciendo clic en el botón de eliminar
  • Vista previa: Ve los hotspots en tiempo real en la vista previa
  • Agrupar: los hotspots se listan por página u obra, y cada grupo se pliega

Mejores prácticas

  • 1No sobrecargues las páginas, usa los hotspots donde de verdad hacen falta
  • 2Usa colores consistentes para acciones similares
  • 3Haz los hotspots lo suficientemente grandes para tocar en móvil
  • 4Evita cubrir contenido importante
  • 5Usa información emergente para info rápida, modales para contenido detallado
  • 6Prueba todos los enlaces de hotspots antes de compartir

Ejemplos de casos de uso

Catálogo de productos

Agrega hotspots "Comprar ahora" enlazando a tu tienda, iconos de información para especificaciones de productos y navegación a productos relacionados.

Revista interactiva

Enlaza referencias de artículos a sus páginas, agrega modales "Leer más" para contenido extendido y enlaces para compartir en redes sociales.

Manual de capacitación

Crea tabla de contenidos clicable, agrega sugerencias de información emergente para términos técnicos y enlaza a tutoriales en video.

Documentación relacionada