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. Abra la pestaña Posición de cada marcador y configure los controles deslizantes de posición horizontal y vertical, en porcentaje, para colocarlos en la imagen.
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), texto corto (un signo más de forma predeterminada), un ícono o una imagen pequeña. El campo Texto es el texto que se muestra dentro del marcador. El campo Enlace agrega una URL, que funciona cuando las etiquetas se abren al pasar el cursor o se apagan para ese tamaño de pantalla.
El editor de contenido Tooltip es un cuadro WYSIWYG para el texto de la etiqueta, pero la etiqueta en sí muestra texto sin formato. Se eliminan el formato, las imágenes y los enlaces, así que escriba una línea corta.
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
Configuraciones globales para todos los marcadores: tamaño, relleno de texto, radio del borde, tipografía, transición y color, fondo, borde, opacidad y sombra de cuadro para valores predeterminados y flotantes. Los colores de los 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 configurar Desactivar en Móvil o Tableta y Móvil 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 y extensión de información sobre herramientas | El widget Tooltip es una pista independiente con su propio disparador. La extensión Tooltips adjunta una etiqueta flotante a un elemento Elementor existente, como un botón, ícono, bloque de texto o sección. | 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 está diseñado para imágenes y coloca marcadores por posición. Si necesita marcadores en una foto, utilice Image Hotspot. Para obtener una etiqueta flotante en un botón o bloque de texto que ya existe, utilice Extensión de información sobre herramientas. Si desea una pista independiente, el Widget de información sobre herramientas hace eso.
Image Hotspot y la extensión Tooltips necesitan Master Addons Pro, mientras que el widget Tooltip está en el complemento gratuito. No comparten selectores ni controladores de eventos, por lo que puedes usarlos en la misma página.
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 | Docenas de widgets gratuitos como Dual Heading, Creative Button, Infobox, Advanced Accordion y el widget Tooltip. |
| Pro | Incluido | Todos los widgets gratuitos más Image Hotspot, la extensión Tooltips, Display Conditions y el resto de los más de 80 widgets y extensiones. |
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 Pro tiene su propio widget de Hotspot y Master Addons Pro agrega un widget de 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. 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í. Las pantallas táctiles no flotan, así que habilite Trigger en Click y los visitantes móviles tocan 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 funciona cuando las etiquetas se abren al pasar el cursor o en pantallas donde las etiquetas están apagadas, por lo que un marcador puede mostrar su etiqueta al pasar el cursor y llevar al visitante a una página de producto o URL externa al hacer clic. Con Trigger al hacer clic, un clic abre la etiqueta.
¿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, pero el widget de 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 es una pista independiente con su propio disparador y la extensión Tooltips adjunta una etiqueta flotante a un elemento existente, como un botón, texto o ícono. Utilice Image Hotspot para fotografías anotadas y las opciones de información sobre herramientas para sugerencias de 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 el resto de los más de 80 widgets y extensiones de Elementor.
