Widget de punto de acceso de imágenes Elementor con información sobre herramientas (Pro)
Image Hotspot es un widget Master Addons Pro que coloca marcadores encima de una imagen. Un marcador puede ser un punto simple, una etiqueta de texto breve, un ícono de Font Awesome o una imagen pequeña, y cada uno abre la información sobre herramientas cuando un visitante lo pasa por alto o la toca una vez que enciende Trigger en Click. Se adapta a fotografías de tiendas, indicaciones de productos, planos de planta, mapas del campus y diagramas etiquetados. Si lo que desea es una pista flotante en un botón o encabezado, el Widget de información sobre herramientas (no se necesitan Master Addons Pro) o el Extensión de información sobre herramientas (Pro) ¿está más cerca.
Cómo agregar un punto de acceso a imágenes en Elementor
Para agregar un punto de acceso a imágenes en Elementor, active Master Addons Pro, edite la página con Elementor y busque en el panel de widgets Image Hotspot. Arrástrelo hacia adentro, elija su imagen en Imagen, luego abra Puntos de acceso y haga clic en Agregar elemento para cada marcador. Establezca el tipo, el contenido de información sobre herramientas y la posición de cada marcador, luego publique.
Busque en el panel “hotspot” y volverán dos resultados. El que lleva la insignia MA es este widget. El que está bloqueado al lado es el propio Hotspot de Elementor, que necesita una licencia Elementor Pro, por lo que vale la pena comprobar cuál ya posee antes de construir.
Introduzca el widget, elija su imagen y configúrelo Resolución de imagen al completo si la imagen tiene detalles finos. Los marcadores se encuentran en la imagen renderizada, por lo que una fuente reducida hace que cada pin parezca aproximado. Abierto Puntos críticos, presione Agregar elemento y repita una vez por marcador. Cada elemento tiene sus propias pestañas Contenido, Estilo y Posición.
Dos cosas hacen tropezar a la gente en la primera construcción. Los marcadores aterrizan en la esquina superior izquierda hasta que tocas los controles deslizantes de posición, por lo que tres elementos nuevos se acumulan en lo que parece uno. Y el cuadro Contenido de información sobre herramientas es un editor completo, lo que hace que sea tentador pegar un párrafo. Hay una razón para resistirse a eso, que se trata más abajo.
Ejemplos trabajados con fotografías de productos, mapas y diagramas en vivo cómo agregar puntos de acceso a imágenes en Elementor. Cada control aparece en el Guía de configuración del widget Image Hotspot.
Imagen de punto de acceso de un vistazo
Qué hace el widget, lea el código Master Addons Pro.
| Artículo | Widget de hotspot de imagen |
|---|---|
| Tipos de marcadores | Ninguno, Texto, Icono o Imagen |
| Marcadores por imagen | Tantos como agregues a la lista de puntos de acceso |
| Posicionamiento | Deslizadores horizontales y verticales en porcentaje de la imagen, una posición para cada tamaño de pantalla, sin arrastre |
| Configuración por marcador | Enlace, texto de información sobre herramientas, lado de información sobre herramientas, colores predeterminados y flotantes, opacidad |
| Contenido de información sobre herramientas | Texto sin formato (HTML se elimina en el renderizado) |
| Lado de la punta de la herramienta | Arriba, Abajo, Izquierda o Derecha |
| Animación de información sobre herramientas | Cambio hacia adelante, cambio hacia adelante, desvanecimiento, escala, perspectiva |
| Gatillo | Pase el cursor o haga clic con Trigger en Click |
| Flecha, desplazamiento y distancia | Sí |
| Efecto pulso | Activado de forma predeterminada, un interruptor lo apaga para el widget |
| Enlace marcador | Se sigue cuando se abren las información sobre herramientas al pasar el cursor |
| Estilo | Tamaño del marcador, relleno, radio, colores predeterminados y flotantes; relleno de información sobre herramientas, radio, colores, color de flecha, tipografía |
| Necesidades | Complementos de Elementor y Maestros Pro |
Construya una imagen interactiva en Elementor
Una imagen interactiva es una foto que responde preguntas cuando un visitante la señala. En Elementor, construye uno con Image Hotspot en tres pasos.
- Coloque Image Hotspot en un contenedor y elija la foto debajo de Imagen.
- Agregue un elemento por lugar en Hotspots. Elija Texto, Icono o Imagen como marcador, escriba una información sobre herramientas de una línea y establezca la posición horizontal y vertical en porcentaje.
- Abra Información sobre herramientas, elija el lado y la animación y active Activar Activador al hacer clic si la mayoría de los visitantes están en teléfonos.
Para obtener un tutorial completo con capturas de pantalla, lea cómo agregar puntos de acceso a imágenes en Elementor.
Cuatro marcadores numerados en una fotografía de oficina, con la información sobre herramientas para la mesa de reuniones abierta.
Utilice Image Hotspot como un mapa de imágenes simple
Un mapa de imágenes hace que se puedan hacer clic en partes de una imagen. Image Hotspot cubre el caso común: un marcador en cada lugar con un enlace a otra página, que funciona cuando la información sobre herramientas se abre al pasar el cursor. No dibuja formas o áreas en las que se puede hacer clic como lo hace un complemento de mapa de imágenes SVG como Image Map Pro, por lo que un plano de planta donde se debe hacer clic en cada contorno de habitación necesita un complemento de mapa de imágenes dedicado.
Para los pines en un mapa del campus, el diseño de una tienda o un diagrama de producto, los marcadores son suficientes y más rápidos de configurar. El demostración del mapa de la zona del gimnasio funciona de esta manera.
Cuatro tipos de marcadores en una imagen
El Tipo el control en la pestaña Contenido de un marcador le brinda cuatro formas y puede mezclar las cuatro dentro de una sola imagen.
Ninguno deja un punto de color desnudo. Es la opción más limpia para diagramas densos donde las etiquetas chocarían entre sí.
Texto imprime una cuerda corta dentro del marcador. Los números funcionan bien aquí, porque 01, 02 y 03 en una toma de producto se leen como una visita guiada sin leyenda que escribir. Las cuerdas más largas convierten el punto en una pastilla, que es el look que deseas para algo como “Colonia No. 5”.
Icono toma cualquier ícono de Font Awesome de la biblioteca, por lo que una hoja puede sustituir los ingredientes y una estrella para obtener una calificación.
Imagen cambia el marcador por una imagen de su biblioteca multimedia. Las miniaturas y avatares de productos se leen mejor; cualquier cosa ocupada se convierte en papilla al tamaño del marcador.
Cada marcador también acepta un Enlace. Ese enlace se activa cuando las información sobre herramientas se abren al pasar el cursor o en los puntos de interrupción donde ha desactivado la información sobre herramientas. No se activa mientras el activador al hacer clic está activado, porque el toque ya está tomado.
Coloque cada marcador por porcentaje
El Posición tab tiene dos controles deslizantes, posición horizontal y posición vertical, ambos medidos en porcentaje de la imagen. La configuración 50 y 24 coloca un marcador a un cuarto del camino por la mitad. No hay colocación de arrastre sobre lienzo, por lo que empujas los números y miras la vista previa.
El porcentaje es lo que mantiene honestos los marcadores en un teléfono. La imagen base escala con su contenedor y cada marcador mantiene su punto relativo, por lo que una etiqueta fijada a la tapa de una botella todavía está en la tapa de la botella a 390px de ancho, donde un desplazamiento de píxeles se habría desviado.
La misma pestaña lleva un marcador por Mostrar a, que anula el lado global de la información sobre herramientas para ese marcador. Eso ayuda cuando un marcador se encuentra cerca del borde derecho y su información sobre herramientas se escurre de la imagen: colóquelo a la izquierda y deje el resto en la parte superior.
Los marcadores pulsan de forma predeterminada. El Desactivar el efecto de pulso el interruptor en la parte inferior de la sección Puntos de acceso desactiva la animación para cada marcador a la vez, que suele ser lo que necesita un plano de planta con quince pines.
Posición de información sobre herramientas, animación y comportamiento móvil
El Información sobre herramientas la sección reúne cada información sobre herramientas del widget: Mostrar posición (arriba, abajo, izquierda o derecha), Animación (cambio hacia adelante, cambio hacia adelante, desvanecimiento, escala o perspectiva), un interruptor de flecha, además de desplazamiento y distancia para empujones finos.
Información sobre herramientas abierta al pasar el cursor. Los teléfonos no tienen flotación, así que enciéndelo Activar en clic y un toque abre la información sobre herramientas. Las posiciones de los marcadores se establecen una vez por ciento y se aplican a cada tamaño de pantalla, sin una posición separada para tableta o móvil. Los marcadores mantienen su tamaño en un teléfono, por lo que en una pantalla estrecha cubren más fotos. Mantenga el recuento bajo o baje el tamaño del marcador en estilo, puntos de acceso.
Una limitación para planificar. El contenido de información sobre herramientas es un cuadro WYSIWYG, pero el widget elimina el marcado antes de que se represente, por lo que los enlaces, imágenes y códigos cortos desaparecen y la información sobre herramientas muestra texto sin formato. Mantenga cada uno en una sola línea corta. Cuando necesite contenido de información sobre herramientas formateado, el widget Hotspot de Elementor Pro maneja texto enriquecido y este widget no.
El estilo de la información sobre herramientas en sí es el conjunto completo: alineación, relleno, radio, fondo, color del texto, borde, color de la flecha, tipografía y sombra del cuadro. La imagen base obtiene opacidad, borde, radio, sombra del cuadro y filtros CSS.
Marcadores de estilo predeterminados y flotantes
El estilo del marcador se encuentra en dos lugares, lo cual es más simple de lo que parece una vez que conoces la división.
Los widgets Estilo la pestaña cubre todos los marcadores a la vez: relleno de texto, radio de borde, tipografía, un grupo de transición y luego pestañas predeterminadas y flotantes que contienen opacidad, tamaño, color, color de fondo, tipo de borde y sombra de caja. El tamaño es un multiplicador de escala de 0,5 a 2, por lo que configurar Hover en 1,15 proporciona a los marcadores un ligero aumento debajo del cursor sin cambiar nada más en la página.
La pestaña Estilo dentro de un solo marcador anula el color, el fondo y la opacidad de ese marcador para el valor predeterminado y el desplazamiento. Así es como haces que un marcador sea rojo en una pared de color púrpura, para marcar un artículo agotado o marcar el punto de acceso que deseas que se note primero.
Border Radius en 100 te da círculos y pastillas. Déjalo caer a 6 y los marcadores de texto se convertirán en etiquetas cuadradas, que se leen mejor en un dibujo arquitectónico que en una hilera de burbujas.
Punto de acceso Elementor Pro frente a complementos maestros Punto de acceso de imagen
Elementor Pro envía su propio widget de punto de acceso. Si ya paga por Elementor Pro, compruébelo primero, porque es posible que no lo necesite en absoluto.
| Característica | Punto de acceso Elementor Pro | Punto de acceso a imágenes de complementos maestros |
|---|---|---|
| Precio | Necesita Elementor Pro | Necesita complementos maestros Pro |
| Tipos de marcadores | Texto de etiqueta y un icono, con tamaño personalizado | Ninguno, Texto, Icono o Imagen |
| Animación de marcadores | Soft Beat, Expandir o Superponer, con animación secuenciada | Activar o desactivar el pulso |
| Contenido de información sobre herramientas | Texto enriquecido con formato | Sólo texto sin formato |
| Activador de información sobre herramientas | Pase el cursor, haga clic o ninguno | Pase el cursor o haga clic con el activador al hacer clic |
| Animación de información sobre herramientas | Estilos de desvanecimiento y diapositivas con configuración de duración | Cambio hacia adelante, cambio hacia adelante, desvanecimiento, escala, perspectiva, además de flecha, desplazamiento y distancia |
| Posicionamiento | Por posiciones del dispositivo | Deslizadores porcentuales horizontales y verticales, una posición para cada pantalla, sin arrastre sobre el lienzo |
| Enlace marcador | Enlace por punto de acceso | Enlace por marcador, seguido cuando se abren las información sobre herramientas al pasar el cursor |
| Necesita Elementor Pro | Sí | prohibido |
Elementor Pro gana en animaciones ricas de marcadores y texto de información sobre herramientas. Master Addons es la elección si desea marcadores de imágenes o ya usa Master Addons Pro sin Elementor Pro. Relacionado: el Widget de información sobre herramientas, el Extensión de información sobre herramientas (Pro), Comparación de imágenes y Efectos de desplazamiento de imagen.
Donde un punto de acceso a imágenes gana su lugar
La fotografía de compra de look es la obvia. Una sola toma de estilo de vida, un marcador de imagen por producto, una información sobre herramientas que nombra cada artículo y un enlace a la página de su producto. Funciona mejor que una cuadrícula de miniaturas porque el visitante ve las piezas diseñadas juntas antes de verlas con un precio.
Las especificaciones sin tabla de especificaciones son el uso más silencioso. En cuerpos de cámaras, relojes y maquinaria, marcadores numerados guían al lector alrededor del objeto en el orden que elija, y nadie tiene que volver a asignar la fila 4 de una mesa a la foto.
Luego están los planos de planta, los mapas del campus y los diagramas etiquetados. Puntos con efecto de pulso deshabilitado, información sobre herramientas de una línea en cada uno y un enlace en cada marcador que apunta a la página completa, con información sobre herramientas dejada en el cursor para que el enlace aún se active. Quince pines siguen siendo legibles de esa manera; quince pastillas pulsantes no lo hacen.
Combina bien con: el Widget de información sobre herramientas, el Extensión de información sobre herramientas (Pro), Efectos de desplazamiento de imagen, Imagen avanzada y Comparación de imágenes.
Ejemplos de puntos de acceso de imágenes
Catorce demostraciones en vivo creadas con el widget, cada una de las cuales tiene un uso diferente para un punto de acceso de imagen.
- Compra el look: marcadores numerados en una sala de estar, cada información sobre herramientas nombra una pieza y su precio.
- Plato restaurante: marcadores de iconos que nombran al proveedor de cada parte de la placa.
- Listado de propiedades: marcadores de etiquetas en una villa para la azotea, suite y piscina.
- Listado de coches: marcadores de iconos en luces, ruedas y cámaras de estacionamiento.
- Lookbook de moda: marcadores en un bolso, un reloj y un abrigo con precios.
- Mapa de zona del gimnasio: un marcador por área de entrenamiento.
- Ver anatomía: pequeños marcadores de iconos en la esfera, el movimiento y la corona.
- Tour de coworking: puntos lisos en el suelo de una oficina.
- Hardware telefónico: marcadores en las cámaras, botón de encendido y puerto de carga.
- Funciones de auriculares: gritos en una foto de producto.
- Auriculares de realidad virtual: llamadas de funciones y garantía.
- Desglose del traje: chaqueta, gafas de sol y jeans.
- Promoción de producto: marcadores en una foto de bolso de mano.
- Llamadas a la página de destino: marcadores en una captura de pantalla de una página.
Preguntas frecuentes sobre Image Hotspot
¿qué sucede en los teléfonos móviles donde no hay vuelo estacionario?
Active el activador al hacer clic en la sección Información sobre herramientas para que los visitantes toquen un marcador para abrir su información sobre herramientas. Los marcadores mantienen la misma posición porcentual en cada pantalla, así que obtenga una vista previa de la página en el ancho del teléfono y baje el tamaño del marcador si abarrotan la imagen.
¿Puedo usar una imagen personalizada en lugar de un ícono para el marcador del punto de acceso?
Sí. Establezca el tipo de punto de acceso en Imagen y elija una imagen de la biblioteca multimedia. Una imagen pequeña y simple, como una miniatura de producto o un avatar, se lee mejor en el tamaño del marcador.
¿Puedo colocar marcadores en su lugar en el editor?
No. Cada marcador tiene controles deslizantes de posición horizontal y vertical en su pestaña Posición, medidos en porcentaje de la imagen. Mueva el control deslizante y mire la vista previa. El porcentaje mantiene el marcador en el mismo lugar cuando la imagen cambia de tamaño.
¿puedo utilizar Image Hotspot como mapa de imágenes?
Para enlaces de puntos, sí: coloque un marcador en cada lugar y proporciónele un enlace, dejando información sobre herramientas en el hover. No dibuja formas o áreas en las que se pueda hacer clic, por lo que para los contornos de habitaciones en un plano de planta, utilice un complemento de mapa de imágenes como Image Map Pro.
¿existe un widget de punto de acceso en Elementor gratuito?
El widget Hotspot de No. Elementor es parte de Elementor Pro e Image Hotspot necesita Master Addons Pro. Algunos otros paquetes complementarios incluyen un widget de punto de acceso en sus versiones gratuitas.
¿La imagen base en sí responde?
Sí. La imagen escala con su columna y las posiciones de los marcadores se establecen en porcentaje, por lo que cada marcador permanece en la misma parte de la imagen en todos los tamaños de pantalla. En los teléfonos, active el activador al hacer clic para que un toque abra la información sobre herramientas.
¿el widget Image Hotspot es gratuito?
No. Image Hotspot es parte de Complementos maestros Pro. Sin Pro puedes usar el Widget de información sobre herramientas, que agrega una pista flotante a un solo elemento pero no fija marcadores en una imagen. Los usuarios de Elementor Pro también pueden utilizar el widget Hotspot propio de Elementor.
¿Puedo desactivar la animación de pulso?
Sí. Desactivar efecto de pulso se encuentra en la parte inferior de la sección Puntos de acceso y desactiva el pulso para cada marcador en ese widget. No hay cambio de pulso por marcador, así que use un segundo widget Image Hotspot si necesita ambas miradas en una página.
¿por qué está desapareciendo el formato en mi información sobre herramientas?
El widget elimina HTML del contenido de información sobre herramientas antes de que se represente, por lo que se eliminan el texto en negrita, los enlaces, las imágenes y los códigos cortos y la información sobre herramientas muestra texto sin formato. Mantenga cada información sobre herramientas en una línea corta. Para obtener información sobre herramientas formateada, el widget Hotspot de Elementor Pro admite texto enriquecido.
Widgets y extensiones de Elementor de tendencia
Cree sitios web sofisticados en menos tiempo.
Vidriomorfismo
Extras de contenedores
Patrones
![Extensión de duplicador de páginas/publicaciones de complementos maestros para Elementor: enlace de fila de duplicador MA en la lista de páginas de WordPress que crea una página de inicio - borrador [duplicado #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicador de publicaciones/páginas
