Algunas imágenes necesitan un poco de explicación, como una toma del producto, un plano de planta o un mapa. El Punto de acceso de imagen widget adentro Complementos maestros para Elementor coloca marcadores en los que se puede hacer clic en cualquier lugar de una imagen, y cada uno muestra una información sobre herramientas con texto o un enlace 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 Elementor instalado y activo.
- Complementos maestros para Elementor instalado y activo. ¿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 arrastrarlos a su lugar en la imagen.
- Agregar artículo: agregue tantos puntos de acceso como necesite la imagen.
- Deshabilitar efecto de pulso: apague la animación pulsante en los marcadores.
- Arrastrar a la posición: mueva cada marcador en la imagen o establezca coordenadas exactas.
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, un icono o una imagen dentro del marcador.
- Text și link: una etiqueta corta y una URL para el marcador.
- Contenido de información sobre herramientas: el texto completo que se muestra en hover, editado en un cuadro WYSIWYG.
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.
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 la pestaña Posición para una colocación precisa en lugar de mirar fijamente el arrastre.
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 de Elementor que fija marcadores interactivos en una imagen. Cada punto de acceso tiene su propia posición, icono e información sobre herramientas con texto o un enlace, 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 puede arrastrarlo a su lugar en la imagen o establecer coordenadas exactas en la 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. 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 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.
