Rara vez se lee una foto de producto con un párrafo de especificaciones debajo. Se ignora un plano de planta con una leyenda a un lado. El problema es siempre el mismo: la imagen y la información viven en dos lugares diferentes, y la mayoría de los visitantes nunca se desplazan lo suficiente para conectarlas.
Un punto de acceso de imagen soluciona eso. Colocas pequeños marcadores directamente en la foto y cada uno revela una etiqueta corta cuando alguien flota o toca. El Widget de hotspot de imagen desde Master Addons hace esto dentro del editor Elementor. Sube una imagen, suelta marcadores donde quieras, escribe una etiqueta para cada uno y listo. Sin CSS, sin código personalizado.
¿qué es un punto de acceso de imágenes en Elementor?
Un punto de acceso a imágenes es un pequeño marcador interactivo fijado en una posición específica de una imagen. Cada marcador tiene su propia etiqueta, icono o enlace. En el escritorio, al pasar el cursor sobre el marcador se muestra un panel flotante con el contenido. En el móvil, tocarlo hace lo mismo.
Una foto de producto puede tener un marcador en cada característica. Un plano de planta puede marcar habitaciones individuales. Una captura de pantalla puede señalar botones o configuraciones con una breve explicación. La imagen en sí no cambia. Los marcadores simplemente brindan a los visitantes una forma de explorarlo.
Elementor no tiene un widget de punto de acceso incorporado. La versión Master Addons maneja todo desde el panel de widgets: ubicación de marcadores, contenido de etiquetas, íconos, animaciones y estilo. Configuras cada punto de acceso individualmente a través del repetidor y el widget se encarga del posicionamiento y la capacidad de respuesta.
¿por qué utilizar puntos de acceso de imágenes en su sitio web?
Las imágenes estáticas crean una brecha entre lo que ve el visitante y lo que necesita saber. Los puntos de acceso cierran esa brecha.
En la foto de un producto, coloque un marcador en cada función para que los visitantes vean las especificaciones sin desplazarse a una lista separada. En un plano de planta, marque las habitaciones o stands para que cada ubicación se abra con su nombre y detalles. En una infografía, mantenga la imagen limpia y deje que los marcadores lleven el contexto adicional. En una captura de pantalla, indique botones o configuraciones específicos para un tutorial o flujo de incorporación. En una foto de equipo, etiquete personas o departamentos.
La estructura es siempre la misma: una imagen, múltiples marcadores, cada uno de los cuales revela contenido cuando interactúa con ellos. El visitante permanece en la imagen en lugar de rebotar entre la imagen y un bloque de texto debajo de ella.
Cómo agregar un punto de acceso a imágenes en Elementor (paso a paso)
Toda la configuración dura unos cinco minutos.
Paso 1: instale complementos maestros y active Pro
Vaya a Complementos, agregue nuevos en su panel de WordPress y busque “Complementos maestros”. Instale y active el complemento gratuito. Si tienes un Licencia profesional, ingréselo en Addons maestros, Licencia. El widget Image Hotspot solo aparece después de que Pro esté activo.
Paso 2: arrastre el widget Image Hotspot a su página
Abra cualquier página en el editor Elementor. En el panel Elementos de la izquierda, busque Image Hotspot o desplácese hasta la sección Addons maestros (los widgets llevan una insignia MA violeta). Arrástrelo a la página. Se carga con una imagen de muestra y algunos marcadores de marcador de posición que puede editar.
Paso 3: sube tu imagen
En la pestaña Contenido, abra la sección Imagen. Haga clic en Elegir imagen y elija una imagen de la biblioteca multimedia. Establezca la resolución de imagen en completa o grande para obtener una representación nítida. La opción Alineación posiciona la imagen dentro de su columna: izquierda, centro o derecha.
Paso 4: agregue puntos de acceso a la imagen
Abra la sección Puntos de acceso. Cada elemento del repetidor es un marcador. Haga clic en Agregar elemento para crear uno nuevo. Puede agregar tantos como necesite la imagen. Arrastre cada marcador en la imagen para posicionarla o establezca coordenadas horizontales y verticales exactas para una ubicación precisa.
Hay un interruptor Desactivar efecto de pulso si desea marcadores estáticos en lugar de la animación pulsante predeterminada.
Paso 5: establezca el tipo de marcador y el contenido de la etiqueta
Haga clic en un elemento de punto de acceso para abrir su configuración. En Tipo, elija lo que aparece dentro del marcador: nada (solo un punto), un ícono o una imagen pequeña. El campo Texto contiene la etiqueta corta que se muestra en el panel flotante. El campo Enlace agrega una URL para que el marcador también navegue a algún lugar al hacer clic.
El editor de contenido de información sobre herramientas es un cuadro WYSIWYG para el texto completo de la etiqueta. Puede utilizar formato, imágenes o códigos cortos allí.
Paso 6: configurar el comportamiento del marcador
De vuelta en la pestaña Contenido principal, la sección Información sobre herramientas controla cómo se comportan las etiquetas en todos los marcadores:
- Mostrar posición: en qué lado del marcador se abre la etiqueta (arriba, abajo, izquierda, derecha).
- Flecha: alterna un puntero entre el marcador y la etiqueta.
- Animación: el efecto revelador cuando aparece la etiqueta, como Shift-Toward.
- Activar en clic: cambia de flotar para revelar a hacer clic para revelar. Este es el que deseas para dispositivos móviles, ya que las pantallas táctiles no tienen desplazamiento.
Opciones de estilo de marcadores
Cada punto de acceso tiene su propia pestaña Estilo para la apariencia del marcador:
- Color predeterminado y Fondo predeterminado: el marcador en reposo.
- Color flotante y Antecedentes flotantes: cómo cambia al flotar.
- Opacidad: qué tan sólido se ve el marcador frente a la imagen. Los valores más bajos lo hacen más sutil.
Elija un color de marcador que se destaque de la imagen detrás de él. Una foto ocupada se tragará un marcador de bajo contraste y los visitantes no notarán los puntos críticos.
Estilismo de la imagen y etiquetas
La pestaña Estilo principal del widget tiene tres secciones.
Panel de imagen
Controla la imagen en sí: opacidad, radio del borde, sombra de caja y filtros CSS. Un radio o sombra del borde ayuda a que la imagen se encuentre dentro de un diseño estilo tarjeta. Los filtros CSS le permiten modificar el brillo, el contraste o la saturación sin volver a exportar la imagen.
Panel de marcadores
Configuración global para todos los marcadores: tamaño y color predeterminado. Los estilos de puntos de acceso individuales los anulan.
Panel de etiquetas
Controla el panel flotante que aparece cuando se interactúa con un marcador: color de fondo, color de texto, tipografía, relleno, radio del borde y sombra.
Comportamiento responsivo en dispositivos móviles
Los marcadores utilizan posicionamiento basado en porcentajes, por lo que permanecen fijados en el mismo lugar de la imagen sin importar el tamaño de la pantalla. Las etiquetas cambian de tamaño y se reposicionan para permanecer dentro de la ventana gráfica.
Los dispositivos táctiles no tienen desplazamiento, por lo que el interruptor Activador al hacer clic en la sección Información sobre herramientas cambia todo el widget a toque para revelar. Los visitantes tocan un marcador para abrir la etiqueta y tocan en otro lugar para cerrarla. Si su audiencia está principalmente en dispositivos móviles, active esto desde el principio.
En pantallas muy pequeñas donde las etiquetas comienzan a superponerse, puede desactivarlas por debajo de un determinado punto de interrupción y dejar que los enlaces de marcadores hagan el trabajo. Cada marcador aún navega a su URL al tocar.
Image Hotspot vs Tooltip Widget: ¿Cuál es la diferencia?
Master Addons tiene dos características que producen etiquetas flotantes y la gente las mezcla:
| Característica | Lo que hace | Mejor para |
|---|---|---|
| Widget de hotspot de imagen | Pines marcadores interactivos en posiciones x/y específicas en una imagen. Cada marcador abre una etiqueta al pasar el cursor o hacer clic. | Fotos comentadas, menciones de productos, planos de planta, mapas interactivos. |
| Widget de información sobre herramientas | Adjunta una etiqueta flotante a cualquier elemento Elementor: un botón, ícono, bloque de texto, sección o widget. | Pase el cursor sobre los botones, ayude al texto en los campos del formulario, contexto adicional en cualquier elemento de la página. |
Image Hotspot es específico de la imagen y está basado en la posición. La información sobre herramientas funciona en cualquier widget Elementor. Si necesita marcadores en una foto, use Image Hotspot. Si necesita una etiqueta flotante en un botón o bloque de texto, use Widget de información sobre herramientas.
Ambos vienen con Master Addons Pro. Funcionan en diferentes elementos y no comparten selectores ni controladores de eventos, por lo que puedes usarlos en la misma página sin problemas.
Consejos para trabajar con puntos de acceso de imágenes
- Marcadores espaciales afuera. Los marcadores superpuestos hacen que la imagen sea difícil de usar. Si dos puntos de acceso se encuentran muy juntos, empuje sus etiquetas hacia lados opuestos o suelte una de ellas.
- Mantenga las etiquetas cortas. Una o dos líneas se lee mejor que un párrafo dentro de un panel flotante. Utilice la etiqueta para obtener un resumen rápido y un enlace para obtener todos los detalles.
- Active el activador y haga clic para dispositivos móviles. Incluso si el desplazamiento funciona en el escritorio, los usuarios táctiles necesitan un objetivo de toque. El widget maneja ambos modos al mismo tiempo.
- Prueba en diferentes pantallas. Los marcadores que parecen bien espaciados en una computadora de escritorio pueden agruparse en un teléfono. Revise un teléfono, una tableta y un monitor ancho antes de publicar.
- Contraste los marcadores con la imagen. Funciona un marcador brillante en una foto oscura. Un marcador silenciado sobre un fondo ocupado desaparece. Utilice el estado Hover para agregar énfasis cuando alguien se concentra en un marcador.
- Utilice la pestaña Posición cuando la alineación importe. Arrastrar es rápido para una ubicación aproximada. La pestaña Posición con valores porcentuales exactos es mejor cuando necesita marcadores para alinearse con partes específicas de un diagrama o captura de pantalla.
Gratis vs Pro: lo que obtienes
| Plan | Punto de acceso de imagen | Otros widgets |
|---|---|---|
| Gratis | No incluido | Más de 40 widgets que incluyen encabezado, botón, cuadro de información, acordeón y más. |
| Pro | Incluido | Todos los widgets gratuitos, además de Image Hotspot, Tooltip, Mega Menu y más de 76 widgets y extensiones en total. |
El complemento base se puede instalar gratis desde Repositorio de WordPress. El widget Image Hotspot requiere específicamente a Licencia profesional.
¿qué es un punto de acceso de imágenes en Elementor?
Un punto de acceso a imágenes es un pequeño marcador interactivo colocado encima de una imagen. Cuando un visitante lo pasa por alto o lo toca, aparece una etiqueta con texto, una descripción o un enlace para esa área específica de la foto. Elementor no incluye un widget de punto de acceso integrado, por lo que necesita un complemento como Master Addons para agregar esta función.
¿cuántos puntos de acceso puedo agregar a una sola imagen?
No hay límite estricto. Prácticamente, de 5 a 7 puntos de acceso por imagen mantienen las cosas legibles. Más allá de eso, los marcadores comienzan a superponerse. Si necesita anotar más áreas, divida el contenido en varias imágenes.
¿funcionan los puntos de acceso de imágenes en dispositivos móviles?
Sí. En los dispositivos táctiles, el widget cambia de flotar a tocar para revelar. Puede habilitar Trigger en Click para que los visitantes móviles toquen un marcador para abrir su etiqueta. El posicionamiento basado en porcentajes mantiene los puntos de acceso fijados correctamente en todos los tamaños de pantalla.
¿Puedo vincular un punto de acceso a otra página?
Sí. Cada punto de acceso tiene un campo Enlace. El enlace se activa al hacer clic, por lo que un marcador puede mostrar información en su etiqueta y navegar por el visitante a la página de un producto, sección de documentación o URL externa.
¿el widget Image Hotspot es gratuito o profesional?
El widget Image Hotspot es una función profesional. El complemento básico Master Addons es gratuito e incluye más de 40 widgets, pero el widget del punto de acceso requiere un Licencia profesional.
¿cuál es la diferencia entre el widget Image Hotspot y el widget Tooltip?
El widget Image Hotspot fija marcadores interactivos en posiciones específicas de una imagen, cada una de las cuales muestra una etiqueta al pasar el cursor o hacer clic. El Widget de información sobre herramientas adjunta una etiqueta flotante a cualquier elemento Elementor (botones, texto, íconos). Utilice Image Hotspot para fotografías anotadas; utilice Tooltip para obtener sugerencias sobre el desplazamiento en otros elementos de la página.
Envolviendo
El widget Image Hotspot toma una imagen plana y agrega marcadores que revelan información al pasar el cursor o hacer clic. Cargue la imagen, coloque marcadores en las áreas que necesitan explicación, escriba una etiqueta corta para cada una y diseñe los marcadores para que coincidan con su diseño. Todo sucede dentro del editor Elementor.
Para obtener más información sobre las imágenes en Elementor, consulte Widget de comparación de imágenes y el Widget de efectos de desplazamiento de imagen. Si necesita colocar etiquetas en 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 vale la pena navegar si quieres ver qué más hay disponible.
Obtenga Master Addons Pro para desbloquear el widget Image Hotspot y más de 76 widgets y extensiones para Elementor.
