Cómo añadir puntos interactivos en imágenes en WordPress (La forma fácil) 

Imagine una foto de un dormitorio decorado donde cada elemento (la lámpara, el marco de la cama, el cojín) tiene una etiqueta clicable que enlaza a su página de producto. Eso es un punto interactivo en una imagen, y puede reemplazar una cuadrícula de productos completa con una sola imagen.

He utilizado el bloque Hotspot de SeedProd en páginas de productos y he tenido las ventanas emergentes listas en unos 10 minutos. En este tutorial, le mostraré cómo añadir puntos interactivos en imágenes en WordPress paso a paso, sin necesidad de código.

Aquí hay algunos usos en el mundo real:

• Presentación de productos de comercio electrónico: Etiquete cada artículo en una foto de una habitación (marco de cama, lámpara, cojines) con un enlace a cada página de producto. Una imagen reemplaza una cuadrícula de productos completa.
• Diagramas de e-learning: Etiquete gráficos de anatomía, mapas históricos o esquemas técnicos sin saturar la imagen con texto.
• Visitas virtuales de bienes raíces: Añada puntos interactivos a las fotos de las habitaciones con dimensiones, características o atracciones cercanas etiquetadas.
• Fotografía de eventos: Identifique a las personas en una foto de grupo etiquetando nombres o identificadores de redes sociales.

Añadir puntos interactivos en imágenes a su sitio de WordPress es una excelente manera de hacerlo más interactivo. Cuando los visitantes interactúan con sus mapas de imágenes, pasan más tiempo en su sitio web, lo que ayuda a reducir su tasa de rebote.

Además, la creación de imágenes interactivas con puntos interactivos puede mejorar la experiencia del usuario, lo que, a su vez, puede aumentar sus tasas de conversión.

Ahora que sabe qué son los puntos interactivos en imágenes, probablemente tenga algunas preguntas. ¿Cómo se crean imágenes con puntos interactivos y cuál es la forma más fácil de añadirlas a su sitio de WordPress?

Le mostraremos cómo hacerlo a continuación.

Cómo añadir puntos interactivos en imágenes en WordPress

Hay varias formas de añadir puntos interactivos en imágenes a su sitio de WordPress. Puede usar un plugin de puntos interactivos para WordPress, un tema de WordPress con funcionalidad de puntos interactivos como Divi, o codificarlo usted mismo con HTML y CSS personalizado.

La forma más fácil de añadir puntos interactivos en imágenes a su sitio de WordPress es con un constructor de sitios web de arrastrar y soltar como SeedProd.

Nota: El bloque de Hotspot requiere SeedProd Pro o superior. Si estás en el plan gratuito, existen plugins gratuitos de hotspots de imágenes en WordPress.org que admiten hasta 6 hotspots por imagen sin coste.

El bloque Hotspot de SeedProd se encarga del posicionamiento, las tooltips y la animación mediante arrastrar y soltar. No se necesitan shortcodes ni CSS.

En esta guía, usaré SeedProd para añadir hotspots de imágenes a WordPress. Sigue los pasos a continuación para empezar.

Paso 1. Instalar y Activar SeedProd

Primero, dirígete al sitio web de SeedProd y descarga el plugin. Aunque SeedProd tiene una versión gratuita, usaremos SeedPod Pro para este tutorial porque incluye el bloque de Hotspot de Imágenes.

Una vez que hayas elegido tu plan de precios y descargado el archivo zip del plugin, deberás instalarlo y activarlo en tu sitio web de WordPress. Puedes consultar esta guía sobre cómo instalar un plugin de WordPress si necesitas ayuda con este paso.

Después de añadir SeedProd a tu sitio de WordPress, navega a la página SeedProd » Ajustes e introduce tu clave de licencia de producto.

Puedes encontrar la clave en la sección de descargas de tu panel de cuenta de SeedProd.

Una vez que hayas introducido tu clave, haz clic en el botón Verificar Clave para desbloquear tus funciones premium.

Paso 2. Elige un tema de WordPress o una plantilla de página de destino

Ahora que has confirmado la configuración de tu licencia, estás listo para empezar a construir con SeedProd. Para ello, primero deberás decidir qué tipo de diseño te gustaría crear.

En SeedProd, puedes crear páginas de destino individuales o sitios web completos de WordPress con su constructor de temas. A partir de ahí, puedes personalizarlos con el mismo editor de arrastrar y soltar.

Para esta guía, crearemos una página de destino independiente. Sin embargo, puedes seguir esta guía sobre cómo crear un tema personalizado de WordPress si prefieres este enfoque, y luego volver al paso 3 de este tutorial para aprender a añadir hotspots de imágenes.

Dado que vamos a crear un diseño de página de destino, vamos a SeedProd » Páginas de destino, luego desplazamos la sección de modos de página de destino y hacemos clic en el botón Añadir Nueva Página de Destino.

Eso te llevará a la biblioteca de plantillas de páginas de destino prediseñadas, donde puedes elegir un diseño que se adapte mejor a las necesidades de tu negocio. Cada plantilla es 100% adaptable a móviles, con diseños para diversos casos de uso, incluyendo fitness, bienes raíces, marketing digital y más.

No te preocupes si no encuentras algo adecuado. Puedes personalizar cada centímetro de la plantilla hasta que tenga el aspecto que deseas. Así que adelante y elige una plantilla pasando el ratón por encima de una y haciendo clic en el icono de la marca de verificación.

En la siguiente pantalla, puedes darle un nombre y una URL a tu página, luego haz clic en el botón Guardar y Empezar a Editar la Página para lanzarla en el editor visual de SeedProd.

Paso 3. Añade el bloque Hotspot de WordPress

El maquetador de páginas de SeedProd es súper fácil de navegar. Verás diferentes secciones y bloques en el panel izquierdo y una vista previa de la página en vivo a la derecha.

Haz clic en cualquier lugar de la vista previa para cambiar el contenido de cualquier elemento. Por ejemplo, al hacer clic en el bloque de texto se abre un panel donde puedes escribir tu propio mensaje de bienvenida o descripción.

Y en el bloque de formulario de suscripción, puedes personalizar los campos de tu formulario, cambiar el color de fondo del botón de envío y más.

Antes de añadir el widget de punto de acceso de imagen a tu página, encontremos el lugar perfecto, como la primera imagen de la página.

Tendrás que eliminar este bloque primero para dejar espacio para la imagen del punto de acceso, así que pasa el ratón por encima hasta que veas un borde naranja, y luego haz clic en el icono de la papelera para eliminarlo.

Ahora, puedes encontrar el bloque Punto de acceso en el panel de bloques avanzados y arrastrarlo al espacio de tu página.

A continuación, abre la configuración del bloque y añade una imagen donde quieras añadir iconos de punto de acceso.

Puedes subir una foto desde tu ordenador o la biblioteca de medios de WordPress o elegir entre miles de imágenes de stock (disponibles en los planes SeedProd plus y superiores).

Después de añadir una imagen, puedes crear tu primer punto de acceso.

Simplemente expande el marcador de posición del punto de acceso e introduce la descripción de tu punto de acceso. Esto es lo que aparecerá cuando los usuarios hagan clic o pasen el ratón por encima del icono del punto de acceso.

Puedes cambiar la posición del icono circular del punto de acceso arrastrando los deslizadores de orientación vertical y horizontal. Además, puedes cambiar el color y la animación del icono para que destaque más.

Además, al activar la opción Configuración avanzada, puedes elegir una etiqueta, introducir un enlace y seleccionar iconos personalizados y tamaños de la biblioteca de Font Awesome.

Para hacer que tus puntos de acceso sean más llamativos, puedes abrir la sección Tooltips y elegir la configuración de activación y animación.

Luego, al hacer clic en la pestaña Avanzado, puedes elegir más opciones de formato y estilo, incluyendo tipografía, colores de texto, espaciado y más.

Para añadir más puntos de acceso a tu imagen, repite este paso tantas veces como quieras. Solo recuerda hacer clic en el botón Guardar para conservar tus cambios.

He configurado el bloque de Puntos de acceso en una página de producto y he tenido los tooltips funcionando en unos 10 minutos. Los deslizadores de posicionamiento son más precisos de lo que esperaba.

Ahora, continúa personalizando tu página hasta que tenga exactamente el aspecto que deseas.

Por ejemplo, puedes usar el bloque Acordeón para añadir una sección de preguntas frecuentes a tu página, el bloque Vídeo para mostrar vídeos de YouTube o Vimeo, el bloque Google Maps para mostrar tu ubicación, y más.

Paso 4. Configura tus ajustes

Haz clic en la pestaña Conectar en la parte superior para integrarte con tu servicio de marketing por correo electrónico, o en la pestaña Configuración de la página para configurar opciones de SEO, análisis y dominio personalizado. Estas son opcionales pero vale la pena configurarlas antes de publicar.

Paso 5. Publica tu imagen de Hotspot en WordPress

Después de configurar tus ajustes, estarás listo para publicar tu página de destino y hacer que tu imagen de puntos de acceso esté activa en tu sitio web.

Para hacer eso, haz clic en la flecha del botón Guardar y selecciona Publicar.

¡Ahora puedes ver tu página para ver tus puntos de acceso de imagen en acción!

Y aquí tienes un vistazo más de cerca a la información sobre herramientas del punto de acceso:

Preguntas frecuentes sobre cómo añadir hotspots de imágenes en WordPress

¿Para qué puedo usar los puntos de acceso de imagen?

Las tiendas de comercio electrónico los utilizan para etiquetar productos en fotos de estilo de vida, vinculando cada artículo directamente a su página de producto. También puedes usar puntos de acceso en diagramas de eLearning para etiquetar partes sin saturar la imagen, en fotos de bienes raíces para destacar las características de la habitación o en fotos de eventos para identificar personas en una foto grupal.

¿Funcionan los puntos de acceso de imagen en dispositivos móviles?

Sí. El bloque Hotspot de SeedProd es responsive para móviles, y las informaciones sobre herramientas se pueden activar con un toque en pantallas táctiles. También puedes mostrar u ocultar elementos específicos en escritorio frente a móviles desde la pestaña Avanzado en la configuración del bloque.

¿Existe un plugin gratuito para puntos de acceso de imagen en WordPress?

Sí, hay plugins gratuitos de puntos de acceso de imagen en WordPress.org. La mayoría admite hasta 6 puntos de acceso por imagen en el nivel gratuito, y algunos tienen limitaciones de compatibilidad con temas. Si necesitas puntos de acceso ilimitados o deseas la flexibilidad de posicionamiento y estilo de un editor visual completo, vale la pena considerar SeedProd Pro.

¿Puedo personalizar el diseño de mis puntos de acceso?

Sí. En SeedProd, puedes cambiar el color del icono, el estilo de animación, la posición y la apariencia de la información sobre herramientas. La configuración avanzada te permite elegir iconos personalizados de la biblioteca de Font Awesome y agregar enlaces a cada marcador.

Ahora sabes cómo agregar imágenes con puntos de acceso a WordPress sin usar shortcodes, CSS personalizado o complementos innecesarios. Aún mejor, solo toma unos minutos crear puntos de acceso de imagen interactivos con SeedProd.

¿A qué esperas?

Si disfrutaste de este tutorial, también te pueden interesar las siguientes guías de WordPress:

• Cómo agregar un botón a tu encabezado de WordPress
• Cómo crear contadores de números animados en WordPress
• Cómo agregar deslizadores de fotos de antes y después a WordPress

¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.