Cómo añadir puntos interactivos a las imágenes en WordPress (la forma más fácil) 

Imagina una foto de un dormitorio decorado en la que cada elemento (la lámpara, el somier, el cojín) tenga una etiqueta en la que se puede hacer clic y que redirija a su página de producto. Eso es un «hotspot» de imagen, y puede sustituir toda una cuadrícula de productos por una sola imagen.

Yo mismo he utilizado el bloque «Hotspot» de SeedProd en las páginas de productos y he conseguido que las descripciones emergentes estuvieran listas en unos 10 minutos. En este tutorial, te mostraré paso a paso cómo añadir puntos interactivos a las imágenes en WordPress, sin necesidad de programar.

A continuación se muestran algunos ejemplos de uso en la vida real:

• Presentación de productos en el comercio electrónico: etiqueta cada elemento que aparezca en la foto de una habitación (soma de cama, lámpara, cojines) con un enlace a la página de cada producto. Una sola imagen sustituye a toda una cuadrícula de productos.
• Diagramas para el aprendizaje en línea: añade etiquetas a láminas anatómicas, mapas históricos o esquemas técnicos sin saturar la imagen con texto.
• Visitas virtuales de inmuebles: añade puntos de interés a las fotos de las habitaciones con indicaciones sobre las dimensiones, las características o los lugares de interés cercanos.
• Fotografía de eventos: identifica a las personas que aparecen en una foto de grupo etiquetando sus nombres o sus nombres de usuario en las redes sociales.

Añadir hotspots de imágenes a su sitio WordPress es una forma estupenda 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 de zonas activas puede mejorar la experiencia del usuario, lo que, a su vez, puede aumentar sus tasas de conversión.

Ahora que ya sabes qué son las zonas activas de imágenes, probablemente tengas algunas preguntas. Cómo se crean las imágenes hotspot y cuál es la forma más sencilla de añadirlas a tu sitio WordPress?

A continuación te explicamos cómo hacerlo.

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

Hay varias formas de añadir zonas activas de imágenes a tu sitio WordPress. Puedes utilizar un plugin de WordPress para zonas activas de imágenes, un tema de WordPress con funcionalidad de zonas activas como Divi, o codificar una tú mismo con HTML y CSS personalizado.

La forma más sencilla de añadir puntos interactivos a las imágenes de tu sitio web de WordPress es utilizando un creador de sitios web de arrastrar y soltar como SeedProd.

Nota: El bloque «Hotspot» requiere SeedProd Pro o una versión superior. Si tienes el plan gratuito, en WordPress.org hay plugins gratuitos de «hotspots» para imágenes que admiten hasta 6 «hotspots» por imagen sin coste alguno.

El bloque «Hotspot» de SeedProd permite controlar la posición, las descripciones emergentes y las animaciones mediante la función de arrastrar y soltar. No se necesitan códigos cortos ni CSS.

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

Paso 1. Instalar y activar SeedProd Instale y active SeedProd

En primer lugar, dirígete a la página web de SeedProd y descarga el plugin. Aunque SeedProd tiene una versión gratuita, utilizaremos SeedPod Pro para este tutorial porque incluye el bloque Hotspot Image.

Una vez que hayas elegido tu plan de precios y descargado el archivo zip del plugin, tendrás que instalarlo y activarlo en tu sitio web 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 su sitio WordPress, vaya a la página SeedProd " Configuración e introduzca la clave de licencia de su producto.

Encontrará la clave en la sección de descargas del panel de control de su cuenta SeedProd.

Una vez introducida la clave, haz clic en el botón Verificar clave para desbloquear las funciones Premium.

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

Ahora que ha confirmado la configuración de su licencia, está listo para comenzar a construir con SeedProd. Para ello, primero tendrá que decidir qué tipo de diseño que le gustaría hacer.

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

Para esta guía, vamos a hacer una página de destino independiente. Sin embargo, puede seguir esta guía sobre la creación de un tema personalizado de WordPress si prefiere este enfoque, y luego volver al paso 3 de este tutorial para aprender a añadir zonas activas de imagen.

Ya que estamos haciendo un diseño de página de destino, vamos a SeedProd " Páginas de destino, a continuación, desplácese más allá de la sección de modos de página de destino y haga clic en el botón Agregar nueva página de destino.

Eso te llevará a la biblioteca de plantillas de páginas de destino prediseñadas, donde podrás elegir el diseño que mejor se adapte a las necesidades de tu negocio. Cada plantilla es 100% responsive para móviles, con diseños para varios casos de uso, incluyendo fitness, inmobiliaria, 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, 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, puede dar a su página un nombre y una URL y, a continuación, hacer clic en el botón Guardar y empezar a editar la página para iniciarla en el editor visual de SeedProd.

Paso 3 Añadir el bloque Hotspot WordPress

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

Haga clic en cualquier parte de la vista previa para cambiar el contenido de cualquier elemento. Por ejemplo, si haces clic en el bloque de texto, se abre un panel en el que puedes escribir tu propio mensaje de bienvenida o descripción.

Y en el bloque del formulario de suscripción, puede personalizar los campos del formulario, cambiar el color de fondo del botón de envío, etc.

Antes de añadir el widget de zona activa de imágenes a tu página, vamos a encontrar el lugar perfecto, como la primera imagen de la página.

Primero tendrás que eliminar este bloque para dejar espacio a la imagen de la zona activa, así que pasa el ratón por encima hasta que veas un borde naranja y haz clic en el icono de la papelera para eliminarlo.

Ahora, puedes encontrar el bloque Hotspot en el panel 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 los iconos de la zona activa.

Puedes subir una foto desde tu ordenador o desde la biblioteca multimedia 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 primera zona activa.

Simplemente despliegue el marcador de zona activa e introduzca la descripción de su zona activa. Esto es lo que aparecerá cuando los usuarios hagan clic o pasen el ratón por encima del icono de la zona activa.

Puede cambiar la posición del icono circular de la zona activa arrastrando los controles deslizantes 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, si activas la configuración avanzada podrás elegir una etiqueta, introducir un enlace y seleccionar iconos y tamaños personalizados de la biblioteca Font Awesome.

Para que tus hotspots sean más vistosos, puedes abrir la sección Tooltips y elegir los ajustes de activación y animación.

A continuación, haz clic en la pestaña Avanzado para elegir más opciones de formato y estilo, como la tipografía, los colores del texto, el espaciado, etc.

Para añadir más zonas activas a tu imagen, repite este paso tantas veces como quieras. Recuerda hacer clic en el botón Guardar para conservar los cambios.

He configurado el bloque Hotspot en una página de producto y he conseguido que las descripciones emergentes funcionaran en unos 10 minutos. Los controles deslizantes de posicionamiento son más precisos de lo que esperaba.

Ahora, sigue personalizando tu página hasta que tenga exactamente el aspecto que deseas.

Por ejemplo, puede utilizar el bloque Acordeón para añadir una sección de preguntas frecuentes a su página, el bloque Vídeo para mostrar vídeos de YouTube o Vimeo, el bloque Google Maps para mostrar su ubicación, etc.

Paso 4. Configure sus ajustes

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

Paso 5. Publique su imagen Hotspot en WordPress

Una vez configurados los ajustes, ya puedes publicar tu página de destino y hacer que la imagen de tu zona activa aparezca en tu sitio web.

Para ello, haga clic en la flecha del botón Guardar y seleccione Publicar.

Ahora, puedes ver tu página para ver tus zonas activas de imagen en acción.

Y aquí puedes ver más de cerca la información sobre la zona activa:

Preguntas frecuentes sobre la adición de zonas activas de imágenes en WordPress

¿Para qué puedo utilizar las zonas activas de imágenes?

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 aprendizaje electrónico para etiquetar elementos sin recargar la imagen, en fotos inmobiliarias para destacar las características de las habitaciones, o en fotos de eventos para identificar a las personas que aparecen en una foto de grupo.

¿Funcionan los puntos interactivos de las imágenes en los dispositivos móviles?

Sí. El bloque «Hotspot» de SeedProd se adapta a los dispositivos móviles, y las descripciones emergentes se pueden activar tocando la pantalla táctil. Además, puedes mostrar u ocultar elementos específicos en el ordenador o en el móvil desde la pestaña «Avanzado» de la configuración del bloque.

¿Existe algún plugin gratuito para crear puntos interactivos en imágenes en WordPress?

Sí, en WordPress.org hay plugins gratuitos para crear puntos de acceso en imágenes. La mayoría admite hasta seis puntos de acceso por imagen en la versión gratuita, y algunos tienen limitaciones en cuanto a la compatibilidad con temas. Si necesitas puntos de acceso ilimitados o quieres disfrutar de la flexibilidad de posicionamiento y diseño que ofrece un editor visual completo, vale la pena considerar SeedProd Pro.

¿Puedo personalizar el diseño de mis zonas activas?

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

Ahora ya sabes cómo añadir imágenes hotspot a WordPress sin usar shortcodes, CSS personalizado o complementos innecesarios. Aún mejor, sólo se tarda unos minutos para crear zonas activas de imágenes interactivas con SeedProd.

¿A qué esperas?

Si te ha gustado este tutorial, puede que también te gusten las siguientes guías de WordPress:

• Cómo añadir un botón a la cabecera de WordPress
• Cómo crear contadores numéricos animados en WordPress
• Cómo añadir fotos de antes y después a WordPress

Gracias por leernos. Nos encantaría conocer tu opinión, así que no dudes en unirte a la conversación en YouTube, X y Facebook para obtener más consejos y contenidos útiles para hacer crecer tu negocio.