Cómo añadir zonas activas de imagen en WordPress (de forma sencilla)

A veces, no basta con añadir imágenes y elementos visuales para captar la atención de los visitantes.

Ahí es donde las zonas activas de imágenes pueden venir al rescate. Estas áreas clicables pueden convertir una simple imagen en una experiencia atractiva e informativa para sus visitantes. Nosotros mismos hemos experimentado con ellas para mostrar puntos en un mapa, etiquetar a los miembros de un equipo en una fotografía y destacar las características de un producto.

Si te preguntas cómo hacer lo mismo, estás en el lugar correcto. Esta guía le mostrará 2 métodos simples para crear un hotspot de imagen para su sitio web WordPress sin ningún código.

Cuándo añadir zonas activas a sus imágenes en WordPress

Las zonas activas de imagen son puntos en los que se puede hacer clic y que pueden convertir simples imágenes en contenido interactivo que los visitantes pueden explorar. Pero, ¿cuándo debería pensar en añadir zonas activas a sus imágenes?

Un buen momento para utilizar las zonas activas es cuando se desea mostrar diferentes partes de la imagen de un producto.

Supongamos que vendes un teléfono nuevo. Puedes añadir zonas activas para destacar la cámara, la pantalla y otras características. Esto ayuda a los clientes a conocer el producto sin tener que leer largas descripciones.

Muchos sitios web de artículos para el hogar también utilizan zonas activas de imágenes para resaltar los detalles de los artículos que aparecen en las fotos.

Las zonas activas también son ideales para hacer más atractivas las infografías y las visualizaciones de datos. En lugar de concentrar toda la información en una sola imagen, puede ocultar detalles adicionales detrás de las zonas activas. Cuando la gente hace clic en distintas partes de la infografía, puede ver más datos y cifras.

Si tiene un sitio web de eLearning, las zonas activas pueden mejorar la experiencia del usuario y hacer que sus lecciones sean más interactivas. Por ejemplo, puedes añadir hotspots a un mapa para que los alumnos hagan clic y aprendan sobre distintos países o lugares emblemáticos.

Con esto en mente, veamos cómo añadir fácilmente zonas activas de imágenes a su sitio web WordPress. Hemos ideado 2 métodos, y puedes usar los enlaces rápidos de abajo para navegar por el artículo:

Método 1: Añadir puntos calientes de imagen con SeedProd (para páginas de destino/temas personalizados)

Este primer método utiliza SeedProd, un constructor de páginas de arrastrar y soltar, para añadir zonas activas de imágenes a tu sitio web WordPress. Recomendamos este método si estás creando una página de destino personalizada o un tema de WordPress personalizado y quieres utilizar una plataforma con un bloque de zonas activas de imágenes.

Lo que nos encanta de SeedProd es que ofrece más de 350 plantillas de páginas de aterrizaje y kits de temas para diferentes categorías de la industria, desde boutiques en línea y servicios de limpieza hasta empresas de SaaS. Así que hay una opción para cada tipo de sitio.

Una cosa que debe tener en cuenta es que si sólo desea una solución gratuita para crear zonas activas de imagen, entonces este método puede no ser para usted. Esto se debe a que el bloque de hotspot de SeedProd sólo está disponible en las versiones de pago de SeedProd. En ese caso, le recomendamos ir con el método 2.

Para obtener más información sobre las funciones y el precio del complemento, consulte nuestro análisis de SeedProd.

Una vez que haya adquirido un plan SeedProd, puede descargar e instalar el plugin de WordPress en su área de administración. Después de eso, vaya a SeedProd “ Configuración e introduzca su clave de licencia. Puede encontrar esta información en la página de su cuenta SeedProd.

Una vez hecho esto, haz clic en “Verificar clave”.

A continuación, vaya a SeedProd ” Páginas de destino.

A continuación, haga clic en “Añadir nueva página de destino”.

Ahora verá todas las plantillas que ofrece SeedProd. Hay opciones para una página de aterrizaje de lista de espera viral, una página de aterrizaje de anuncios de Google, una página próximamente disponible y mucho más.

Asegúrese de desplazarse por las opciones y previsualizarlas una a una para poder elegir la que mejor se adapte a sus necesidades.

Una vez que te hayas decidido por una plantilla, sólo tienes que pasar el ratón por encima de tu selección.

A continuación, haga clic en el botón naranja de verificación.

Ahora aparecerá una nueva ventana emergente en la que se le pedirá que asigne un nombre a la página y que introduzca su URL.

Una vez hecho esto, haz clic en “Guardar y empezar a editar la página”.

Se abrirá el editor de arrastrar y soltar de SeedProd.

Funciona de forma similar al editor de bloques de WordPress, donde puedes arrastrar y soltar bloques en la página y hacer clic en ellos para personalizarlos como quieras.

Para crear zonas activas de imágenes, puede encontrar el bloque “Zona activa” en la barra lateral izquierda.

A continuación, sólo tienes que arrastrarlo y soltarlo en tu página.

A continuación, debe cargar la imagen de WordPress a la que desea añadir zonas activas.

Para ello, haz clic en el bloque “Zona activa” y elige “Usar tu propia imagen” o “Usar una imagen de archivo” para seleccionar una imagen.

La primera opción abrirá la biblioteca multimedia, donde puede elegir una imagen existente o subir una nueva. Si el tamaño es bastante grande, puedes consultar nuestra guía sobre cómo subir imágenes grandes en WordPress.

Una vez que haya cargado una imagen, puede introducir un texto alternativo para describir la imagen para los motores de búsqueda y las herramientas de lectura de pantalla.

También puede personalizar el tamaño y la alineación de la imagen.

Después, puedes desplazarte hacia abajo para empezar a añadir tus puntos de acceso.

Para ello, haz clic en el botón “+ Añadir zona activa”.

Aparecerá un punto naranja en la imagen. Puede ajustar su posición arrastrando las barras de orientación horizontal y vertical.

Además, puede insertar el texto que debe aparecer cuando el cursor del usuario pase por encima de la zona activa.

Hacia abajo, puedes cambiar el color de la zona activa.

Sólo tiene que hacer clic en los ajustes de “Color” para elegir un color que se adapte a su marca y al diseño de su sitio web.

Si sigues desplazándote hacia abajo, podrás activar la opción “Configuración avanzada”.

Aquí puede añadir un enlace al texto de ayuda de su zona activa para redirigir a los usuarios a la página deseada.

Además, puedes elegir un icono personalizado para sustituir la forma circular predeterminada.

Para ello, basta con hacer clic en el botón “Elegir icono”.

Aparecerá una ventana emergente donde podrás elegir varios iconos de la biblioteca de SeedProd. También puede elegir iconos de Font Awesome si necesita más opciones.

Para utilizar un icono, basta con hacer clic sobre él.

Una vez elegido un icono, puedes arrastrar la barra “Tamaño del icono” para hacer la forma más pequeña o más grande, según tus preferencias.

A continuación, puede repetir los pasos para crear más zonas activas de imágenes interactivas.

A continuación, puede añadir un efecto animado a sus zonas activas de imagen. Hay 2 opciones: ‘Golpe suave’ y ‘Expandir’.

Ahora, vamos a la sección ‘Tooltip’.

Aquí puede cambiar la posición de la información sobre herramientas (derecha, izquierda, encima o debajo de la zona activa) y cambiar el activador.

Si selecciona “Clic”, la información sobre herramientas aparecerá cuando el usuario haga clic en la zona activa. Por otro lado, “Pasar por encima” significa que la información sobre herramientas aparecerá cuando el cursor pase por encima.

A continuación, puede cambiar la duración de la información sobre herramientas.

Se refiere al tiempo que tardará en aparecer la información sobre la herramienta después de que el usuario pase el ratón por encima o haga clic en la zona activa. Si quieres que el texto aparezca al instante, ponlo a 0.

También puede desactivar la flecha del tooltip, según sus preferencias.

Ahora, si cambia a la pestaña “Avanzado”, podrá personalizar aún más el aspecto de la imagen.

Por ejemplo, puede añadir una sombra de recuadro o ajustar el relleno y el margen.

Cuando hayas terminado, haz clic en el botón “Guardar” de la esquina superior derecha.

A continuación, haga clic en “Publicar” para activar la página.

Y ya está. Asegúrate de ver la página en móvil, escritorio y tableta para ver si se ve bien en todos los dispositivos.

Este es el aspecto de nuestra zona interactiva de imágenes:

Método 2: Añadir Image Hotspots con Image Hotspot Plugin (Gratis pero limitado)

Si usar un constructor de páginas y cambiar de tema te parece demasiado, puedes usar el plugin gratuito WordPress Image Hotspot. Este plugin es una gran alternativa al método 1, pero ten en cuenta que la versión gratuita sólo permite añadir hasta 6 zonas activas en una sola imagen.

Para utilizar Image Hotspot, puede instalar y activar el plugin de WordPress en su área de administración. A continuación, vaya a Image Map Hotspot ” All Image Map Hotspot y haga clic en el botón “Añadir nuevo”.

A continuación, asigne un nombre a su nueva zona activa de mapa de imagen. A continuación, seleccione uno de los tipos de información sobre herramientas. Puede hacer que la información sobre herramientas de la zona activa aparezca al pasar el ratón por encima o al hacer clic.

Una vez hecho esto, haz clic en “Guardar”.

Una vez hecho esto, añada su imagen.

Para ello, haga clic en el botón “Cargar imagen”.

Se abrirá la biblioteca multimedia, donde podrá cargar una nueva imagen o seleccionar una ya existente.

A continuación, puede añadir puntos calientes a su mapa de imagen. Para ello, basta con hacer clic en el botón “Añadir punto”.

Aparecerá una ventana emergente para que configure su zona interactiva de imágenes.

En primer lugar, ve a la pestaña “Marcador”. Aquí es donde puede personalizar el aspecto de la imagen de la zona activa. Para cambiar los iconos, haz clic en el signo “+” situado junto a los campos “Iconos” y/o “Iconos Hover”.

Iconos” se refiere al símbolo predeterminado de la zona activa cuando no se hace clic sobre ella ni se pasa el ratón por encima. Por su parte, “Iconos al pasar el ratón” es el símbolo que aparece cuando el usuario hace clic o pasa el ratón por encima de la zona activa.

Ahora, siga adelante y seleccione un icono para reemplazar la opción predeterminada actual. El plugin tiene un montón para elegir.

Una vez hecha tu elección, haz clic en ella y pulsa el botón “Cerrar”.

Una vez configuradas las imágenes, puedes cambiar los colores de los iconos.

El plugin te permite hacer que el color por defecto del icono de la zona activa sea diferente del color del icono al pasar el ratón por encima. De esta manera, los usuarios pueden saber fácilmente si un hotspot está activo cuando hacen clic o pasan el ratón sobre él.

Para cambiar el color, basta con hacer clic en el botón cuadrado de selección de color y seleccionar el color que desea utilizar.

A continuación, puede hacer clic en cualquier lugar de la página para pasar a otro ajuste.

También puedes personalizar el tamaño del icono del hotspot en el escritorio. Cuanto mayor sea el número, más grande será el icono.

Cuando estés satisfecho con el aspecto del icono, haz clic en “Guardar”.

Ahora, desplácese hacia arriba y vaya a la pestaña “Contenido”. Aquí es donde puede personalizar el texto y el aspecto de la información sobre herramientas.

El plugin te ofrece 4 plantillas entre las que elegir, para que puedas escoger la que mejor se adapte al diseño de tu sitio web.

Aparte de eso, asegúrese de sustituir el contenido del título predeterminado por su propio texto.

Y dependiendo del diseño de su sitio web, puede que desee aumentar el tamaño de la fuente y cambiar el color del texto para mejorar su legibilidad.

Cuando estés satisfecho con la configuración, haz clic en “Guardar”.

La última pestaña es ‘enlace’. Aquí tiene la opción de hacer que el texto de la información sobre herramientas tenga un hipervínculo, de modo que los usuarios puedan ser redirigidos a una página diferente.

Si desea hacerlo, seleccione “Sí” en la opción “¿Enlazar título?”.

A continuación, introduzca la URL del enlace del título en el campo correspondiente y elija si desea que el enlace se abra en una pestaña nueva o no.

Por último, haz clic en “Guardar”.

Ahora debería aparecer una nueva zona activa en su imagen, que puede arrastrar a la posición deseada.

También puede repetir los mismos pasos que antes para crear más zonas activas de imagen.

Una vez configurado el mapa de imágenes, puede volver a hacer clic en el botón “Guardar”.

Para añadir el hotspot de imagen a cualquiera de tus páginas, posts y/o widgets, puedes copiar el shortcode que aparece encima de la imagen.

Después de eso, sólo tienes que pegar el shortcode en un bloque de shortcode en tu widget, página o post en el editor de bloques. Puedes obtener más información sobre cómo hacerlo en nuestra guía paso a paso sobre cómo añadir y utilizar shortcodes en WordPress.

Este es el aspecto de nuestra zona interactiva de imágenes:

Descubra más funciones de diseño interesantes para su sitio web de WordPress

Además de crear zonas activas de imágenes interactivas, hay muchas más formas de hacer que el diseño de su sitio web resulte atractivo. Aquí tienes algunas guías que te ayudarán:

• Cómo añadir scroll infinito a su sitio WordPress (paso a paso)
• Cómo crear un sitemap visual en WordPress (paso a paso)
• Cómo crear una barra de pie de página flotante en WordPress
• Cómo añadir un redimensionador de fuentes en WordPress para mejorar la accesibilidad
• Cómo añadir un botón Click-to-Call en WordPress (paso a paso)
• Cómo añadir una barra de desplazamiento personalizada en WordPress
• Cómo añadir una barra de progreso en tus entradas de WordPress
• Cómo crear un divisor de forma personalizada en WordPress
• Cómo añadir un ticker de noticias desplazable en WordPress

Esperamos que este artículo te haya ayudado a aprender cómo añadir fácilmente zonas activas de imágenes en WordPress. También puedes echar un vistazo a nuestra guía definitiva de trucos de barra lateral de WordPress para obtener los máximos resultados y nuestras selecciones de expertos de los mejores creadores de temas de WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.