Si alguna vez peleaste con un plugin de image maps de los viejos, sabés el dolor: actualizás el theme y los hotspots se corren tres pixeles, el CSS del template pisa los estilos del mapa, y lo que en el editor se veía perfecto en producción queda hecho un desastre. PicPoints es un plugin de mapas interactivos WordPress que ataca ese problema de raíz: renderiza todo dentro de un Shadow DOM y trae un editor vectorial tipo Figma adentro del dashboard, con soporte testeado de hasta 1.000 elementos en un solo canvas.
PicPoints es un constructor de imágenes interactivas y planos para WordPress que permite dibujar áreas clicables (hotspots), popups y tooltips sobre cualquier imagen, aislando por completo su CSS y su JS del theme mediante Shadow DOM. Sirve para planos inmobiliarios multipiso, catálogos de productos clicables, mapas de eventos y blueprints arquitectónicos. Lo desarrolla el equipo que lo publica en el repositorio oficial de WordPress.org.
En 30 segundos
- Qué es: un constructor de mapas e imágenes interactivas con editor vectorial estilo Figma dentro del panel de WordPress.
- La gran diferencia: arquitectura Shadow DOM que garantiza 100% de aislamiento de CSS y JS, así el theme no rompe tus mapas ni al actualizarse.
- Rendimiento: probado con hasta 1.000 elementos vectoriales activos en un mismo canvas sin lag, según la ficha oficial.
- Formas: elipses, rectángulos, marcadores y polígonos personalizados con curvas Bezier, todo con precisión pixel-perfect.
- Casos de uso: inmobiliarias multipiso, e-commerce shoppable, anatomía de productos y mapas de eventos.
WordPress es un sistema de gestión de contenidos de código abierto creado en 2003 por Matt Mullenweg para crear y administrar sitios web, blogs y tiendas online. Es mantenido por Automattic y una comunidad global de desarrolladores.
¿Qué es un mapa interactivo en WordPress y por qué lo necesitás?
Ponele que tenés una foto de un edificio de tres pisos y querés que el visitante haga clic en cada departamento para ver metros, precio y disponibilidad. Eso es un mapa interactivo: una imagen con zonas clicables (hotspots) que disparan popups, tooltips o links. Nada nuevo en concepto. Los «image maps» existen desde el HTML de los 90.
El tema es que los plugins tradicionales armaban esas zonas con coordenadas fijas sobre la imagen. ¿Qué pasaba cuando cambiabas el theme o el ancho del contenedor? Exacto, todo se descalibraba.
Un mapa interactivo moderno trabaja con formas vectoriales (no coordenadas rígidas) y se adapta. PicPoints va más allá y mete cada mapa en una cápsula aislada, así los estilos de tu plantilla no tienen forma de meterse. Para sitios con muchos elementos, la ficha oficial habla de soporte testeado de hasta 1.000 elementos vectoriales en un solo lienzo. Eso no es poco para un plano grande.
¿Cuáles son las características principales del plugin de mapas interactivos WordPress PicPoints?
Acá viene lo bueno. PicPoints no es un widget pelado, es un editor con varias capas de funcionalidad. Sobre eso hablamos en comunidad y recursos de WordPress.
- Arquitectura Shadow DOM aislada: cero conflictos de CSS con tu theme y 100% de consistencia visual en cualquier sitio, según la documentación del plugin.
- Editor vectorial pro: dibujás elipses, rectángulos, marcadores y polígonos personalizados con curvas Bezier suaves, con precisión pixel-perfect.
- Gestión de capas tipo Figma: agrupás, renombrás y organizás elementos como en una herramienta de diseño de verdad.
- Multi-escena y multi-nivel: pensado para inmobiliarias (Piso 1, Piso 2, Piso 3) y blueprints arquitectónicos complejos.
- Popups y tooltips con contenido enriquecido: armás las ventanas de información en minutos, sin tocar código.
Lo interesante es la combinación. Un editor visual decente ya lo tenían algunos. Un editor visual con aislamiento total del theme y manejo de capas profesional, no tanto.
¿Cómo crear un mapa interactivo con el editor visual tipo Figma?
El flujo es directo. Entrás al editor desde el dashboard de WordPress, cargás tu imagen base (un plano, una foto de producto, un mapa de evento) y empezás a dibujar encima.
Dibujás las formas clicables con precisión pixel-perfect: una elipse para marcar un punto, un polígono para contornear un departamento completo, un marcador para señalar una ubicación. Como en cualquier herramienta vectorial seria, podés ajustar las curvas con Bezier para que el contorno calce justo con la imagen.
Después agrupás las capas, las renombrás para no perderte (acordate de eso cuando tengas 40 hotspots), y a cada forma le colgás su popup o tooltip con el contenido que quieras. La ficha oficial dice que se arma en minutos, y para un mapa simple es creíble. Para un plano de 1.000 elementos, obvio, tomalo con pinzas: ahí vas a invertir un rato largo.
¿Por qué la arquitectura Shadow DOM aísla el CSS y mejora el rendimiento?
El Shadow DOM es una feature nativa del navegador que crea un árbol DOM encapsulado, con sus propios estilos que no se filtran hacia afuera ni dejan entrar los de afuera. En criollo: una burbuja. Relacionado: crear landing pages más interactivas.
¿Por qué importa acá? Porque el problema crónico de los plugins de mapas era el choque de CSS. Tu theme define un z-index, un position o un overflow y, sin querer, rompe el render del mapa. Con la «magia» del Shadow DOM eso deja de pasar, porque el mapa vive en su propia burbuja. PicPoints promete 100% de aislamiento de CSS y JS, y que tu theme jamás te va a romper el mapa ni al actualizarse.
En rendimiento, el argumento es el mismo encapsulamiento más optimización propia. La ficha menciona pruebas con hasta 1.000 elementos vectoriales activos en un canvas sin lag. Eso sí: es un dato del propio fabricante, así que en tu caso real conviene probarlo con tu hosting y tu cantidad de tráfico antes de cantar victoria.
Casos de uso reales: dónde conviene usar mapas interactivos
Inmobiliarias y planos multipiso
El caso estrella. Subís el plano de cada piso como una escena, marcás cada unidad con un polígono y al clic mostrás precio, metros y estado. El visitante navega entre pisos sin recargar. Para una desarrolladora con un edificio entero, esto reemplaza un PDF muerto por algo navegable.
E-commerce y catálogos shoppables
Una foto de un living completo donde cada objeto es clicable y lleva a su producto. O un «lookbook» donde tocás la prenda y vas al carrito. PicPoints lo plantea como lookbook shoppable y anatomía de producto. Si tenés WooCommerce, cada hotspot puede apuntar a la ficha del producto.
Eventos y arquitectura
Mapas de un predio con stands, escenarios y baños señalizados. O blueprints arquitectónicos con cotas y referencias. La parte multi-nivel sirve para predios de varias plantas. Tema relacionado: probar el plugin en staging antes.
¿Qué ventajas tiene sobre los plugins de image maps tradicionales?
| Aspecto | PicPoints | Plugins de image maps legacy |
|---|---|---|
| Aislamiento de CSS | Shadow DOM, 100% aislado | Hereda estilos del theme, propenso a romperse |
| Editor | Vectorial tipo Figma, capas y grupos | UI básica de coordenadas |
| Formas | Elipses, rectángulos, marcadores, polígonos Bezier | Áreas rectangulares o poligonales simples |
| Escala | Hasta 1.000 elementos testeados | Suelen ralentizarse con muchos hotspots |
| Multi-nivel | Sí, multi-escena para pisos | Normalmente no |
La diferencia de fondo es de generación. Los plugins viejos resolvían el «qué» (zonas clicables) con tecnología de hace 15 años. PicPoints lo resuelve con Shadow DOM y un editor que se siente como una herramienta de diseño actual.
¿Cuáles son los requisitos técnicos y limitaciones?
El plugin se instala desde el repositorio oficial de WordPress.org como cualquier otro. La pieza clave es el soporte de Shadow DOM en el navegador del visitante, algo que ya tienen todas las versiones modernas de Chrome, Firefox, Safari y Edge. En navegadores muy viejos podrías tener comportamiento raro, aunque hoy es un escenario marginal.
El límite de rendimiento citado es de 1.000 elementos testeados. No quiere decir que se rompa en 1.001, sino que ese es el techo que el fabricante dice haber probado. Sobre planes free y pro: el plugin está publicado en WordPress.org (versión gratuita disponible), pero no tengo confirmados los precios ni el detalle exacto del tier pro, así que no te voy a tirar un número inventado. Eso verificalo en la página oficial antes de comprar.
Un punto de infra: si vas a manejar imágenes base de alta resolución para planos grandes, el peso de esos archivos pega en el tiempo de carga. Asegurate de tener un hosting que aguante bien las imágenes y el caché. Si estás armando el sitio desde cero, un hosting WordPress como el de Donweb te da la base para subir esos assets sin pelearte con límites de subida.
Errores comunes al armar mapas interactivos
- Cargar la imagen base en mala resolución. Si la foto del plano está pixelada, ningún editor la salva. Subí una imagen nítida y bien recortada antes de empezar a dibujar hotspots.
- No renombrar las capas. Con 5 hotspots zafás. Con 50 y todos llamados «Shape 1», «Shape 2», vas a perder media hora buscando cuál es cuál. Usá la gestión de capas desde el arranque.
- Meter 1.000 elementos porque se puede. Que esté testeado a ese tope no significa que tu usuario quiera 1.000 puntos clicables en pantalla. Priorizá legibilidad sobre cantidad.
- Ignorar el mobile. Un polígono chiquito que en desktop se clickea fácil, en un celu es imposible de tocar con el dedo. Probá el mapa en pantalla chica antes de publicar.
Preguntas Frecuentes
¿Qué es PicPoints?
PicPoints es un plugin de WordPress para crear mapas e imágenes interactivas y planos con áreas clicables, popups y tooltips. Trae un editor vectorial tipo Figma dentro del dashboard y renderiza cada mapa dentro de un Shadow DOM para aislar su CSS y JS del theme.
¿Cómo creo un plano interactivo con editor visual en WordPress?
Instalás PicPoints, entrás a su editor en el panel, cargás la imagen del plano y dibujás formas clicables (polígonos, elipses, marcadores) encima. A cada forma le asignás un popup o tooltip con su contenido. Para edificios usás el modo multi-escena, con una capa por piso. Más contexto en mantener los enlaces dentro funcionales.
¿Por qué importa la arquitectura Shadow DOM en un plugin de mapas?
El Shadow DOM encapsula los estilos del mapa en una burbuja, así el CSS del theme no puede romper el render ni siquiera tras una actualización. PicPoints promete 100% de aislamiento de CSS y JS, que es la falla histórica de los plugins de image maps tradicionales.
¿Cuántos elementos clicables soporta?
La ficha oficial declara pruebas con hasta 1.000 elementos vectoriales activos en un solo canvas sin lag. Es un dato del fabricante, así que conviene validarlo con tu hosting y tráfico reales antes de cargar planos enormes en producción.
¿Sirve para una tienda WooCommerce?
Sí. PicPoints plantea casos de uso de e-commerce shoppable y anatomía de producto, donde cada hotspot puede apuntar a la ficha de un producto. Es útil para lookbooks o catálogos visuales donde el cliente clickea sobre la imagen para llegar al producto.
Conclusión
Los image maps no son un invento nuevo, pero estaban estancados en tecnología vieja que se rompía con cualquier cambio de theme. PicPoints mueve el tema a 2026 con dos apuestas concretas: aislamiento total vía Shadow DOM y un editor vectorial que se siente como Figma, con soporte testeado de hasta 1.000 elementos.
¿Para quién tiene sentido? Si manejás inmobiliarias con planos multipiso, catálogos visuales o mapas de eventos, vale la pena probarlo desde la versión gratuita en WordPress.org. Empezá con un mapa chico, fijate cómo carga en mobile y en tu hosting, y recién ahí escalá. Y antes de pagar el plan pro, confirmá los precios en la página oficial, que esos números cambian y no conviene asumirlos.
![[FREE] Privacy-first: A lightweight WordPress plugin to remove Gemini watermarks locally in the browser. - ilustracion](https://wordpress.donweb.com/wp-content/uploads/2026/06/como-quitar-marca-agua-gemini-local-navegador-hero.jpg)
