Conclusiones clave
- Un punto de acceso de imagen Elementor es un marcador fijado en una foto que abre una etiqueta corta al pasar el cursor o tocar, y el widget Master Addons Image Hotspot agrega un marcador para cada elemento de su lista de puntos de acceso.
- El widget Image Hotspot necesita Elementor y Master Addons Pro, porque Elementor gratuito no tiene widget de punto de acceso y Elementor Pro envía su propio widget de punto de acceso independiente.
- Cada marcador de Image Hotspot se coloca con controles deslizantes de posición horizontal y vertical en porcentaje de la imagen, y esa posición se aplica en el escritorio, la tableta y el teléfono.
- Las información sobre herramientas de Image Hotspot muestran solo texto sin formato, ya que el texto en negrita, los enlaces, las imágenes y los códigos cortos escritos en el cuadro Contenido de información sobre herramientas se eliminan cuando se representa la página.
- Activar al hacer clic en la sección Información sobre herramientas de Image Hotspot hace que los marcadores funcionen en los teléfonos, pero el enlace de un marcador se sigue solo cuando la información sobre herramientas se abre al pasar el cursor.
- El widget Image Hotspot puede servir como un mapa de imágenes simple con marcadores de puntos vinculados, aunque no puede dibujar formas en las que se pueda hacer clic ni contornos de habitación como lo hace un complemento de mapa de imágenes SVG.
Un punto de acceso a imágenes de Elementor es un pequeño marcador fijado en una foto que muestra una etiqueta corta cuando un visitante la pasa por alto o la toca. Free Elementor no tiene widget para esto, por lo que esta guía utiliza Widget de punto de acceso de imagen de complementos maestros, que agrega marcadores a cualquier imagen del panel Elementor sin código personalizado. Necesitas Master Addons Pro para ello.
Los pasos a continuación lo llevan desde un contenedor vacío a una imagen interactiva publicada: colocar marcadores por porcentaje, escribir la etiqueta para cada uno y diseñar los marcadores para computadoras de escritorio y teléfonos. Las secciones posteriores cubren los límites que debe saber antes de crear, cómo usar los puntos de acceso como un mapa de imágenes simple y cómo se compara el widget con el widget Hotspot en Elementor Pro.
Tabla de contenidos
Qué punto de acceso de imágenes hay en Elementor
Un punto de acceso a una imagen es un marcador colocado en un punto de ajuste de una imagen. Cada marcador lleva su propia etiqueta corta y, si lo desea, un enlace. En un escritorio la etiqueta aparece flotando. En un teléfono el visitante toca el marcador.
Una foto de producto puede tener un marcador en cada característica. Un plano de planta puede marcar habitaciones o escritorios. Una captura de pantalla puede apuntar a los botones que un nuevo usuario necesita. La imagen sigue siendo la misma y los marcadores permiten a los visitantes explorarla sin desplazarse hacia abajo a una lista separada de especificaciones o una leyenda.
Elementor gratuito no tiene widget de punto de acceso. Elementor Pro tiene uno llamado Hotspot y Master Addons Pro agrega Image Hotspot, que también puede usar una imagen pequeña como marcador. Esta guía cubre el widget Master Addons.
Si solo desea una pista flotante en un botón o encabezado, un punto de acceso es la herramienta incorrecta. El Widget de información sobre herramientas maneja eso sin Master Addons Pro y el Extensión de información sobre herramientas (Pro) agrega una pista a un elemento que ya está en la página.
¿Quieres verlo funcionar antes de construir? El Página del widget del punto de acceso de imagen tiene demostraciones en vivo, la lista de configuraciones completa y una versión paralela de Elementor Pro Hotspot.
Cómo agregar un punto de acceso a imágenes en Elementor
La configuración tarda unos cinco minutos en una imagen con cuatro o cinco marcadores.
Paso 1: Instale complementos maestros y active Pro
En su panel de WordPress, vaya a Complementos, Agregar nuevo y busque “Complementos maestros”. Instálelo y actívelo, luego ingrese su Licencia profesional bajo licencia de complementos maestros. Image Hotspot solo aparece en el panel Elementor una vez que Pro está activo. Funciona con Elementor gratis.
Paso 2: arrastre el widget Image Hotspot a la página
Abra la página en el editor Elementor y busque en el panel Elementos “hotspot”. El resultado con la insignia MA es Image Hotspot. Si también ve un widget de Hotspot bloqueado junto a él, ese pertenece a Elementor Pro. Arrastre Image Hotspot a un contenedor.
Paso 3: elige tu imagen
En la pestaña Contenido, abra la sección Imagen y haga clic en Elegir imagen. Establezca la resolución de la imagen en completa o grande si la foto tiene detalles finos, porque los marcadores se encuentran en la imagen renderizada y una copia reducida hace que cada pin parezca aproximado. La alineación coloca la imagen a la izquierda, centro o derecha en su columna.
Paso 4: agregue puntos de acceso y establezca su posición
Abra la sección Puntos de acceso. Cada elemento de la lista es un marcador, así que haga clic en Agregar elemento una vez para cada punto que desee marcar. No hay límite en la cantidad de artículos.
Cada elemento tiene pestañas Contenido, Estilo y Posición. En la pestaña Posición, mueva los controles deslizantes Posición horizontal (%) y Posición vertical (%) para colocar el marcador. Los valores son un porcentaje de la imagen, por lo que 50 y 50 colocan el marcador en el centro. No puedes arrastrar marcadores en el lienzo y todos los elementos nuevos comienzan en la esquina superior izquierda hasta que los mueves, por lo que tres elementos nuevos pueden parecer uno.
Se aplica una posición en cada tamaño de pantalla. Un marcador con un 22% de ancho y un 52% de abajo se encuentra en la misma parte de la foto en una computadora portátil y en un teléfono.
En la lista, ¿Deshabilitar el efecto pulso? apaga el anillo pulsante alrededor de cada marcador del widget.
Paso 5: elija el tipo de marcador y escriba la etiqueta
En la pestaña Contenido de cada elemento, Tipo establece lo que aparece dentro del marcador: Ninguno (un punto simple), Texto (un signo más de forma predeterminada, o un número o una palabra que escribe), Icono (cualquier icono de Font Awesome) o Imagen (una imagen pequeña). La mezcla de tipos en una imagen funciona bien.
El campo Enlace envía al visitante a otra página cuando hace clic en el marcador. Se sigue cuando se abren las información sobre herramientas al pasar el cursor. Con Trigger on Click activado (paso 6), un clic abre la información sobre herramientas y se ignora el enlace.
El contenido de información sobre herramientas es la línea que aparece en la información sobre herramientas del punto de acceso. El cuadro parece un editor de texto completo, pero la información sobre herramientas muestra texto sin formato: negrita, cursiva, enlaces, imágenes y códigos cortos se eliminan cuando se representa la página. Escribe una línea corta.
Paso 6: Elija cómo se abren los marcadores
De vuelta en la pestaña Contenido, la sección Información sobre herramientas controla cada marcador en el widget a la vez.
- Mostrar posición selecciona el lado en el que se abre la información sobre herramientas: arriba, abajo, izquierda o derecha. Un marcador puede anularlo con la opción Mostrar a en su pestaña Posición.
- La animación establece el efecto de revelación: Mayús hacia adelante, Mayús hacia adelante, Fundido, Escala o Perspectiva.
- Arrow agrega un puntero de la información sobre herramientas al marcador.
- El desplazamiento y la distancia mueven la información sobre herramientas a lo largo del marcador y se alejan de él.
- Activar al hacer clic abre información sobre herramientas al hacer clic o tocar. Los teléfonos no tienen desplazamiento, así que enciéndalo si muchos visitantes usan un teléfono.
Paso 7: Obtenga una vista previa y publique
Haga clic en Publicar y abra la página en una nueva pestaña. Pase el cursor sobre cada marcador para verificar el texto y el lado de la información sobre herramientas, luego cambie el tamaño de la ventana al ancho del teléfono y verifique que los marcadores no se cubran entre sí.
Estilo los marcadores y la imagen
El estilo ocurre en dos lugares: la pestaña Estilo de cada marcador y la pestaña Estilo principal del widget.
Estilo por marcador
La pestaña Estilo dentro de un elemento de punto de acceso tiene configuraciones predeterminadas y de desplazamiento para color, fondo y opacidad. Úselo para darle a un marcador un color diferente, como un artículo en oferta en la foto de un producto.
Elija un color de marcador que contraste con la foto detrás. Un marcador silenciado en una foto ocupada se pierde y los visitantes no notarán que hay nada que flotar.
Imagen
La sección Imagen de la pestaña Estilo principal controla la foto: opacidad, borde, radio del borde, sombra de cuadro y filtros CSS. Un radio y una sombra suave ayudan a que la imagen se encuentre dentro del diseño de una tarjeta.
Puntos críticos
La sección Hotspots diseña cada marcador a la vez: tamaño, relleno, radio del borde, opacidad, color y fondo, cada uno con una versión flotante. La configuración en un marcador individual gana sobre estos.
Información sobre herramientas
La sección Información sobre herramientas diseña la información sobre herramientas del punto de acceso: alineación de texto, relleno, radio del borde, fondo, color del texto, color de la flecha y tipografía.
Construye una imagen interactiva en Elementor
Una imagen interactiva es una foto que responde preguntas cuando un visitante la señala. En Elementor, crea uno con Image Hotspot siguiendo los pasos anteriores: un marcador por punto, una información sobre herramientas de una línea en cada uno y activa el clic si su tráfico es principalmente móvil.
Emparejar la imagen con una lista corta al lado funciona bien. El visitante puede colocar un marcador o leer la lista y ambos apuntan a los mismos elementos. El compre esta demostración de sala utiliza marcadores numerados en una foto de sala de estar con una lista de precios al lado.
Otros diseños que se adaptan a una imagen interactiva incluyen un reloj o dispositivo con un marcador en cada parte, una lista de automóviles con marcadores en las luces y ruedas, una foto de la propiedad con etiquetas en cada característica y una foto del equipo con un nombre en cada persona.
Utilice puntos de acceso de imágenes 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 se sigue cuando se abren las información sobre herramientas al pasar el cursor. Coloca marcadores de puntos únicamente. No dibuja formas en las que se pueda hacer clic, por lo que un plano de planta en el que se debe hacer clic en el contorno de cada habitación necesita un complemento de mapa de imágenes dedicado, como por ejemplo Imagen Mapa Pro(que dibuja formas vectoriales en la imagen (a noviembre de 2026).
Para los pines en el mapa del campus, el diseño de una tienda o el piso de un gimnasio, los marcadores son suficientes y más rápidos de configurar. El demostración del mapa de la zona del gimnasio marca cinco zonas en una foto y cada marcador enlaza con la página de reservas de esa zona.
Puntos de acceso de imágenes en teléfonos y tabletas
Las posiciones de los marcadores son un porcentaje de la imagen, por lo que cada marcador permanece en la misma parte de la foto en cada tamaño de pantalla. No hay una posición separada para tableta o teléfono.
Los marcadores mantienen su tamaño a medida que la imagen se reduce, alrededor de 40 px de forma predeterminada. En un teléfono, una imagen con muchos marcadores se llena. Utilice menos marcadores, menor tamaño en Estilo, Puntos de acceso o brinde a los visitantes del teléfono una imagen más simple.
Los teléfonos no tienen desplazamiento, así que active el activador al hacer clic en la sección Información sobre herramientas. Los visitantes tocan un marcador para abrir su información sobre herramientas. Tenga en cuenta que con el modo de clic activado, un toque abre la información sobre herramientas y no se sigue el enlace del marcador, por lo que si los enlaces importan más que la información sobre herramientas, deje el activador al hacer clic desactivado.
Lo que necesitas para utilizar los puntos de acceso de imágenes
| Configuración | Widget de punto de acceso que obtienes |
|---|---|
| Elementor gratuito por sí solo | Ninguno. Core Elementor no tiene widget de punto de acceso. |
| Elemento Pro | El propio widget Hotspot de Elementor, con contenido formateado de información sobre herramientas y sus propias animaciones de marcadores. |
| Complementos maestros sin Pro | Sin punto de acceso a imágenes. Se incluyen muchos otros widgets. |
| Con complementos maestros Pro | Image Hotspot, la extensión Tooltips y el resto de los más de 80 widgets y extensiones. |
Master Addons se instala desde Directorio de complementos de WordPress. Image Hotspot necesita un Licencia Master Addons Pro encima de él. Cada control aparece en el Guía de configuración del punto de acceso de imagen.
Consejos para trabajar con puntos de acceso de imágenes
- Marcadores de espacio fuera. Si dos se sientan muy juntos, envíe sus información sobre herramientas a lados opuestos con la opción Mostrar a en la pestaña Posición de cada marcador, o suelte uno.
- Mantenga cada etiqueta en una línea. La información sobre herramientas se representa como texto sin formato, así que coloque detalles más largos en una página y use el enlace del marcador.
- Pruebe el ancho del teléfono antes de publicar. La misma posición porcentual se aplica en todas partes y los marcadores no se reducen, por lo que un marcador que se ve bien en un escritorio puede cubrir un pequeño detalle en un teléfono.
- Utilice un color Hover en los marcadores para que los visitantes puedan saber en cuál se encuentran.
- Alinee los marcadores con números exactos. Escribir valores en los campos porcentuales es más rápido que empujar los controles deslizantes cuando los marcadores deben ubicarse en pequeñas partes de un diagrama o captura de pantalla.
Preguntas frecuentes
¿qué es un punto de acceso de imágenes en Elementor?
Un punto de acceso a imágenes es un pequeño marcador colocado encima de una imagen. Cuando un visitante lo pasa por alto o lo toca, aparece una breve etiqueta para esa parte de la foto. Elementor Pro tiene su propio widget Hotspot y Master Addons Pro agrega un widget Image Hotspot que también puede usar imágenes pequeñas como marcadores.
¿cuántos puntos de acceso puedo agregar a una sola imagen?
No hay límite estricto. De cinco a siete marcadores por imagen mantienen las cosas legibles y menos en las imágenes que se verán en los teléfonos, porque los marcadores no se reducen con la imagen. Si necesitas más, divide el contenido en dos imágenes.
¿funcionan los puntos de acceso de imágenes en dispositivos móviles?
Sí. Los teléfonos no flotan, así que active Trigger al hacer clic y los visitantes toquen un marcador para abrir la información sobre herramientas. Las posiciones son un porcentaje de la imagen y lo mismo en cada pantalla, así que verifique que los marcadores no se amontonen entre sí a lo ancho del teléfono.
¿Puedo vincular un punto de acceso a otra página?
Sí. Cada marcador tiene un campo Enlace. El enlace se sigue cuando la información sobre herramientas se abre al pasar el cursor, por lo que un visitante lee la información sobre herramientas al pasar el cursor y va a la página al hacer clic. Con Trigger al hacer clic, un clic abre la información sobre herramientas y no se sigue el enlace.
¿puedo poner texto, enlaces o imágenes en negrita dentro de la información sobre herramientas de un punto de acceso?
No. El cuadro Contenido de información sobre herramientas es un editor enriquecido, pero el texto, los enlaces, las imágenes y los códigos cortos en negrita se eliminan cuando se representa la página, por lo que la información sobre herramientas muestra texto sin formato. Escriba una línea corta y use el enlace del marcador para contenido más largo.
¿necesito Master Addons Pro para Image Hotspot?
Sí. Image Hotspot es un widget Master Addons Pro y funciona con Elementor gratuito. Aparece en el panel Elementor una vez a Licencia profesional está activo.
¿en qué se diferencia Image Hotspot del widget Elementor Pro Hotspot?
Elementor Pro Hotspot permite contenido formateado de información sobre herramientas, tiene animaciones de marcadores Soft Beat, Expand y Overlay, y se abre al pasar el cursor, al hacer clic o no se abre en absoluto. Master Addons Image Hotspot utiliza información sobre herramientas de texto sin formato, un efecto de pulso en marcadores y cinco animaciones de información sobre herramientas, y puede usar una imagen pequeña como marcador.
Pensamientos finales
Image Hotspot convierte una foto plana en una imagen interactiva: cuatro tipos de marcadores, posiciones establecidas en porcentaje, una línea de texto sin formato por marcador y cinco animaciones reveladoras, todas desde el panel Elementor. Mantenga pocos marcadores en las imágenes que verán los teléfonos y active Activador al hacer clic cuando la mayor parte del tráfico sea móvil.
Para obtener más widgets de imágenes, consulte Comparación de imágenes y Efectos de desplazamiento de imagen. Si necesita sugerencias flotantes sobre botones o texto en lugar de imágenes, el Tutorial del widget de información sobre herramientas cubre eso y la lista completa de Widgets y extensiones de complementos maestros muestra qué más viene con el complemento.
Obtenga Master Addons Pro para agregar Image Hotspot y el resto de los más de 80 widgets y extensiones de Elementor.
