Draw Attention Pro

Tu plano ya es un índice, solo que nadie puede hacer clic en él

Publicas el plano de un apartamento, el esquema de una máquina o el mapa de una ruta, y debajo repites en una lista larga lo que cada parte significa. El visitante mira la imagen, localiza lo que le interesa y luego tiene que bajar a buscarlo entre los párrafos.

La imagen ya ordena tu contenido de la forma en que el visitante lo busca: por el lugar que ocupa. Lo que le falta es responder cuando alguien la señala. Draw Attention Pro convierte cualquier imagen PNG, JPG o GIF en un mapa de zonas: dibujas la habitación, la pieza o el tramo, y cada zona se ilumina y muestra su información o lleva a otra página.

Qué se dibuja y qué aparece al tocarlo

• Tres herramientas de dibujo: polígono para formas complejas, rectángulo y círculo. Cada punto se ajusta después arrastrándolo.
• Contenido por zona: título, imagen destacada y texto con formato, con shortcodes para video, audio y galerías.
• Dos acciones: mostrar más información o ir a una URL, que puede ser una página, una entrada, un producto, un documento o un archivo, en la misma ventana o en otra.
• Clic o paso del cursor: la información se revela con uno u otro, y en pantallas táctiles al tocar.
• Estilo: color, opacidad, color de borde, grosor y opacidad del borde. Tipografía y tamaños se heredan del tema.
• Publicación: shortcode, bloque Draw Attention Image o módulo de Beaver Builder. En Elementor se coloca con su elemento de shortcode.

Lo que Pro suma a la edición gratuita

Las zonas clicables son ilimitadas en todas las ediciones, así que ese no es el motivo para subir. Pro añade esto:

• Varias imágenes interactivas en el mismo sitio, tantas como quieras.
• Seis disposiciones para la información: izquierda, derecha, arriba, abajo, lightbox y tooltip.
• 20 combinaciones de color predefinidas, además de esquemas propios.
• Varios estilos de resaltado en una misma imagen, útil para distinguir estados o categorías.
• Zonas siempre visibles, para que se vea dónde hacer clic antes de pasar el cursor.

Una acción por zona, y otros límites del plugin

• Una acción por zona. Abre una URL o muestra información, no las dos cosas. El rodeo es usar lightbox o tooltip y poner el enlace dentro de la descripción.
• Sin medición de clics. No hay una vía directa para contar qué zonas se pulsan. Hace falta JavaScript propio con Google Tag Manager o Analytics.
• Sin reproducción automática. Video y audio se insertan, pero no arrancan solos.
• Sin imágenes anidadas. Una imagen interactiva no va dentro de otra. Sí se puede enlazar una zona con otra mediante anclas.
• Sin tamaño fijo al ampliar. En móvil el zoom lo gestiona el navegador, y zonas y tooltips escalan con la imagen.

Primera imagen y tamaño mínimo de una zona

Es un plugin de WordPress, y Beaver Builder es opcional. La creación sigue este orden:

1. En el escritorio, entra en Draw Attention y pulsa Add New.
2. Sube la imagen y guarda o publica: las herramientas de zonas se activan en ese momento.
3. Elige polígono, rectángulo o círculo y dibuja la primera zona.
4. Escribe el título, elige la acción y redacta la descripción.
5. Actualiza y revisa el resultado en el enlace permanente.

Para que funcione en un teléfono, dibuja zonas amplias. La referencia del W3C es un objetivo de 44 por 44 píxeles. Y si la descripción lleva enlaces, evita combinar paso del cursor con tooltip, porque nadie podrá pulsarlos.

Si tu mapa habla de territorios o de datos

MapSVG también convierte imágenes JPEG o PNG en mapas con zonas clicables, y además trata cada región como un registro con sus propios campos.

Interactive Geo Maps parte de mapas vectoriales por regiones. Es el camino para colorear países o provincias, no para dibujar sobre una foto propia.

Cuando la imagen llega a otros usuarios e idiomas

¿Funciona con teclado y lectores de pantalla?

Sí, todas las zonas se alcanzan con el teclado. Para lectores de pantalla, tooltip y lightbox son las disposiciones adecuadas; izquierda, derecha, arriba y abajo no son las ideales.

¿Se puede traducir el contenido de cada zona?

Sí, con un plugin que traduzca cadenas de contenido. Polylang y WPML lo hacen; TranslatePress y Loco Translate son incompatibles.

¿Pueden editar las imágenes otros usuarios?

De entrada solo los administradores. Un plugin de roles puede dar acceso, pero ese permiso también abre la edición de otras entradas del sitio.

¿Se puede ocultar el área de más información?

Sí. Si todas las zonas usan la acción de ir a una URL, esa área desaparece, sin tocar código.