En este tutorial, aprenderás cómo agregar puntos de información a cualquier imagen utilizando la funcionalidad del complemento JetTricks.

• ¿Qué es un hotspots?
• 1 Paso: Elige la imagen
• 2 Paso: Elige la imagen
• 3 Paso: establecer la configuración de la información sobre herramientas
• 4 Paso: cambia los estilos a tu gusto

¿Qué es un hotspots?

Un hotspot es una marca que se coloca en la imagen para enfocar la atención del usuario en una parte específica de ella. Por lo general, se usan en las tiendas online para brindar al usuario enlaces a los productos que ve en una foto de promoción. Los puntos de información también suelen ser compatibles con información sobre herramientas que muestra información adicional. Esta guía le mostrará cómo colocar los puntos de información en las imágenes de tu sitio web utilizando los widgets de JetTricks.

1 Paso: Elige la imagen

Ve al escritorio y busca la página o publicación donde quieras agregar una imagen con puntos de información. Editala con Elementor. Busca el widget Hotspots en el menú de widgets del lado izquierdo. Arrástralo y suéltalo a la página.

Elije la imagen que quieras que sirva de base para sus puntos de información. Es mejor tomar fotos de alta resolución y buena calidad si deseas que esta parte de la página se vea realmente bien.

2 Paso: Elige la imagen

Como puedes ver, un punto de información se crea de forma predeterminada y se coloca en el centro de una imagen. Vayamos a la sección Hotspots y presionemos el Elemento#1.

En primer lugar, aquí puedes cambiar el contenido o la posición de un punto de acceso. Probablemente, deberías comenzar con el Contenido.

• Ícono: puedes elegir uno de la biblioteca de íconos, cargar un archivo SVG e incluso elegir no usar ningún ícono.
• Texto: los datos que ingreses aquí se mostrarán junto con el ícono en el punto de información.
• Descripción: el texto que insertes en esta área de texto se mostrará como Tooltip de este punto de acceso.
• Enlace: puedes elegir a dónde se dirigirá al usuario cuando haga clic en el punto de información (enlace a otra página, enlace a una imagen, popup o dejarlo vacío)

Para cambiar la posición, tienes dos controles deslizantes: Posición horizontal (%) y Posición vertical (%). Puede mover el punto de información arrastrando un control deslizante horizontalmente o escribir los valores en porcentaje.

Es posible agregar (o duplicar uno existente) tantos puntos de información como quieras, simplemente haz clic en el botón “Añadir elemento“. Además, puedes seleccionar uno de los efectos de animación, que se aplicará a todos los puntos de acceso. Hay 6 tipos de animación que se mostrarán en el “modo de espera”, cuando el usuario no pasa el puntero sobre la imagen.

3 Paso: establecer la configuración de la información sobre herramientas

Como se dijo anteriormente, el texto que se mostrará como información sobre herramientas debe ingresarse en el área de texto Descripción del elemento Hotspot. Y aquí hay otras configuraciones de personalización.

• Show on Init (Mostrar al inicializar): si esta opción está activada, los tooltip siempre estarán visibles, cuando está desactivada, solo aparecen al pasar el puntero del ratón.
• Placement (Ubicación): aquí puedes elegir dónde mostrar los tooltip: sobre el punto de información, debajo, a la izquierda o a la derecha.
• Animation (Animación): hay 5 tipos de animación para la aparición del tooltip entre las que puedes elegir.
• Animation Delay (Retraso): el valor que define el tiempo entre la activación del disparador y la aparición del tooltip.
• Appearance Duration (Duración de la aparición): es un valor que define la velocidad de la animación con la que aparece el tooltip después de que se desencadena el disparador.
• Disappearance Duration (Duración de la desaparición): este valor define la rapidez con la que se ocultará el tooltip después de que el puntero abandone el punto de información.
• Trigger (Desencadenador): esta opción define cuándo se mostrará el tooltip. “Mouse Enter” significa que se mostrará el tooltip cuando el puntero entre en los bordes del punto de información (hotspot). “Click” hará que el tooltip aparezca cuando el usuario haga clic en el punto de información. “None” hace que el tooltip no se muestre nunca.
• Use Arrow (Usar flecha): cuando esta opción está activada, la información sobre herramientas tiene una pequeña flecha que apunta al punto de información.
• Distance (Distancia): hay un espacio entre el tooltip y el borde del punto de acceso, y este valor define el tamaño de ese espacio.

4 Paso: cambia los estilos a tu gusto

Ve a la pestaña Estilo y cambia el diseño de los puntos de información (Hotspots) y los tooltip según tus gustos y necesidades.

Cuando se establezcas todos los ajustes, actualiza la página y observa la imagen en la interfaz. Coloca el cursor sobre el punto de información y el tooltip aparecerá de inmediato.