Algunas imágenes necesitan un poco de explicación, como una toma del producto, un plano de planta o un mapa. El Widget de hotspot de imagen en Complementos maestros para Elementor es un widget profesional que fija marcadores en los que se puede hacer clic en cualquier lugar de una imagen. Cada uno muestra una breve información sobre herramientas de texto y puede vincularse a otra página cuando un visitante la pasa por alto o la toca.
Cargas una imagen, sueltas puntos de acceso donde los deseas, agregas el texto de la información sobre herramientas, luego diseñas los marcadores y estableces cómo se comportan las información sobre herramientas. Esta guía cubre todas las configuraciones del widget.
Qué hace el widget Image Hotspot #
El widget coloca marcadores encima de una sola imagen. Cada punto de acceso tiene su propia posición, ícono e información sobre herramientas, por lo que puede etiquetar partes de una foto o vincularlas a otras páginas. Pase el cursor o haga clic en un marcador y su información sobre herramientas aparecerá junto a él.
Tres pestañas lo ejecutan. Contenido contiene la imagen, los puntos de acceso y el comportamiento de la información sobre herramientas. Estilo maneja la imagen, los colores de los marcadores y la apariencia de la información sobre herramientas. Avanzado es el espaciado y la visibilidad habituales de Elementor.
Antes de empezar #
- wordpress con elemento instalado y activo.
- Complementos maestros Pro instalado con una licencia activa, ya que Image Hotspot es un widget Pro. ¿Nuevo en el complemento? Ver el guía de instalación.
- Una imagen y las etiquetas o enlaces que desea que muestre cada punto de acceso.
Cómo agregar el widget Image Hotspot #
En el editor Elementor, abra el Elementos panel y búsqueda Punto de acceso de imagen, o desplácese hasta la sección Complementos maestros (los widgets llevan una insignia MA violeta). Arrástrelo a la página y se cargará con una imagen de muestra y marcadores que puede editar.
Elige la imagen #
Abre el Contenido pestaña. El Imagen la sección es donde se carga la imagen base en la que se encuentran los puntos de acceso.
- Elige Imagen: elija la imagen de la biblioteca multimedia.
- Resolución de imagen: el tamaño servido, como Grande o Completo.
- Alineación: izquierda, centro o derecha dentro de su columna.
Agregar puntos de acceso #
Abre el Puntos críticos sección. Es un repetidor, por lo que cada marcador es su propio elemento. Utilice Agregar elemento para agregar marcadores y luego coloque cada uno con los controles deslizantes en su pestaña Posición.
- Agregar artículo: agregue tantos puntos de acceso como necesite la imagen.
- Deshabilitar efecto de pulso: apague la animación pulsante en los marcadores.
- Pestaña de posición: Posición horizontal y vertical en porcentaje para cada marcador.
Configure cada punto de acceso #
Haga clic en un punto de acceso para abrir su configuración. El Contenido tab establece el tipo de marcador, el texto de información sobre herramientas y un enlace opcional.
- Tipo: no mostrar nada, texto corto, un icono o una imagen dentro del marcador.
- Text și link: el texto dentro del marcador y una URL, que funciona cuando la información sobre herramientas se abre al pasar el cursor o se desactiva en esa pantalla.
- Contenido de información sobre herramientas: el texto de información sobre herramientas. Está editado en un cuadro WYSIWYG, pero la información sobre herramientas solo muestra texto sin formato.
Estilo cada punto de acceso #
El Estilo la pestaña de un punto de acceso establece sus colores. Obtienes un color y un fondo para el estado normal y un conjunto separado para flotar, además de un control deslizante de opacidad.
- Color y fondo predeterminados: el marcador en reposo.
- Color y fondo flotantes: cómo cambia al flotar.
- Opacitate: qué sólido se ve el marcador.
Controla la información sobre herramientas #
De vuelta en la pestaña Contenido principal, el Información sobre herramientas la sección controla cómo se comporta cada información sobre herramientas: dónde se ubica, cómo se anima y si se abre al pasar el cursor o al hacer clic.
- Mostrar posición y flecha: en qué lado se abre la información sobre herramientas y si tiene un puntero.
- Animación: el efecto revelador, como Shift-Toward.
- Activar al hacer clic: abra información sobre herramientas al hacer clic en lugar de pasar el cursor, mejor al tacto. Desactivar activado oculta información sobre herramientas en Tablet & Mobile o Mobile.
Diseñe la imagen y la información sobre herramientas #
Abre el Estilo pestaña del widget. El Imagen la sección establece la opacidad, el borde y los filtros de la imagen, y los separa Puntos críticos y Información sobre herramientas las secciones diseñan los marcadores y las cajas de información sobre herramientas.
- Imagen: opacidad, radio de borde, sombra de caja y filtros CSS.
- Puntos críticos: tamaño y color global de los marcadores.
- Información sobre herramientas: el fondo de la información sobre herramientas, el color del texto y la tipografía.
Casos de uso comunes #
- Imágenes del producto fijar características o especificaciones a partes de la foto.
- Mapas y planos de planta marcar salas, stands o ubicaciones.
- Infografías agregar detalles sin saturar la imagen.
- Fotos del equipo o de la oficina etiquetado de personas o zonas.
- Tutoriales señalar pasos o partes en una captura de pantalla.
Consejos para trabajar con el widget Image Hotspot #
- Mantenga los puntos de acceso legibles. Espacielos para que los marcadores y la información sobre herramientas no se superpongan en pantallas más pequeñas.
- Utilice clic en el móvil. Active Trigger en Click para que los usuarios táctiles puedan abrir información sobre herramientas, ya que no hay desplazamiento en un teléfono.
- Contraste los marcadores. Elija un color de marcador que se destaque de la imagen detrás de él, o una foto ocupada se lo tragará.
- Mantenga breve el texto de información sobre herramientas. Una o dos líneas se leen mejor que un párrafo metido en un cuadro flotante.
- Establezca posiciones exactas. Utilice los controles deslizantes de la pestaña Posición y luego obtenga una vista previa en un teléfono para verificar cada marcador.
Mira el vídeo tutorial #
¿prefieres seguirlo en la pantalla? El video tutorial a continuación recorre el elemento Image Hotspot de principio a fin y muestra cómo funcionan la imagen, los puntos de acceso, la información sobre herramientas y el estilo en el editor Elementor.
Preguntas frecuentes #
¿qué es el widget Image Hotspot en los complementos maestros?
Es un widget Master Addons Pro para Elementor que fija marcadores interactivos en una imagen. Cada punto de acceso tiene su propia posición, tipo de marcador, información sobre herramientas de texto sin formato y enlace opcional, que se muestra al pasar el cursor o hacer clic. Todo se configura desde el panel Elementor sin código.
¿cómo agrego más puntos de acceso a una imagen?
Abra la sección Puntos de acceso en la pestaña Contenido y use Agregar elemento para crear otro marcador. Cada nuevo punto de acceso obtiene su propio contenido, estilo y posición, y lo coloca con los controles deslizantes en su pestaña Posición.
¿Puedo agregar un enlace a un punto de acceso?
Sí. Cada punto de acceso tiene un campo Enlace en su pestaña Contenido, por lo que un marcador puede apuntar a cualquier URL. El enlace funciona cuando la información sobre herramientas se abre al pasar el cursor o se desactiva en esa pantalla. Eso permite que una imagen actúe como un mapa en el que se puede hacer clic, enviando visitantes a una página de producto, una sección o un sitio externo desde un pin en la foto.
¿funcionan los puntos de acceso de imágenes en dispositivos móviles?
Sí, pero el desplazamiento no existe al tocarlo. Active el activador al hacer clic en la sección Información sobre herramientas para que los usuarios móviles puedan tocar un marcador para abrir su información sobre herramientas. También puede ocultar información sobre herramientas debajo de un punto de interrupción y utilizar el enlace del marcador en su lugar.
¿Puedo utilizar un icono o imagen personalizada como marcador?
Sí. Cada punto de acceso tiene una opción Tipo en su pestaña Contenido donde puede mostrar un ícono o una imagen dentro del marcador en lugar del valor predeterminado. De esa manera los marcadores pueden coincidir con su marca o el tema de la imagen.
Envolviendo #
El widget Image Hotspot convierte una imagen plana en interactiva: cargue la imagen, fije los marcadores, agregue información sobre herramientas, luego diseñe los marcadores y establezca el comportamiento de la información sobre herramientas. Para ver ejemplos y una comparación con el Hotspot de Elementor Pro, consulte Widget de punto de acceso de imagen Elementor página. Para widgets relacionados, consulte el Widget de comparación de imágenes y el Widget de efectos de desplazamiento de imagen, navega por completo Widgets y extensiones de complementos maestros, y comprueba el página de precios por lo que incluye cada plan.
