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 una 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, llamadas 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, la gratuita Widget de información sobre herramientas 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.
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 flotador, lo que deja dos opciones honestas. Encender Activar en clic y un toque abre la información sobre herramientas. O configurar Desactivar activado to Mobile, o Tablet & Mobile, que oculta información sobre herramientas en esas pantallas y entrega el trabajo al enlace de cada marcador.
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 |
| Móvil | Por posiciones del dispositivo | Deshabilite la información sobre herramientas en Tablet & Mobile o Mobile |
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 gratis 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 Deshabilitar el efecto de pulso, información sobre herramientas configurada en Activar al hacer clic y un enlace en cada marcador que apunta a la página completa. Quince pines siguen siendo legibles de esa manera; quince pastillas pulsantes no lo hacen.
Preguntas frecuentes sobre Image Hotspot
¿qué sucede en los teléfonos móviles donde no hay vuelo estacionario?
Active Activar Activador Haga clic en la sección Información sobre herramientas para que los visitantes toquen un marcador para abrir su información sobre herramientas. También puede configurar Desactivar en móvil o Tablet & Mobile, que oculta información sobre herramientas en esas pantallas y permite que el enlace del marcador lleve a los visitantes a más información.
¿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.
¿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. Es posible que Tooltips necesite Activar al hacer clic o Desactivar para pantallas pequeñas.
¿el widget Image Hotspot es gratuito?
No. Image Hotspot es parte de Complementos maestros Pro. El complemento gratuito tiene 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?
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
