Cómo crear imágenes interactivas en WordPress

Encontrar la imagen perfecta para tu publicación de WordPress es un gran comienzo, pero a menudo es una calle de sentido único. Tus visitantes ven una imagen estática y pueden perderse los detalles clave que deseas resaltar.

Esto puede ser frustrante, especialmente cuando intentas mostrar las características de un producto o guiar a los usuarios a través de un proceso. ¿Qué pasaría si tus imágenes pudieran hacer más y atraer activamente a tu audiencia?

Eso es exactamente lo que hacen las imágenes interactivas. Después de probar varios plugins aquí en WPBeginner, hemos encontrado un método sencillo que permite a cualquiera agregar áreas interactivas a sus imágenes sin necesidad de código.

En esta guía, te mostraremos cómo transformar fácilmente tus imágenes estáticas en experiencias atractivas e interactivas para tus visitantes.

En esta guía, te guiaremos a través de todo el proceso. Aquí tienes un resumen rápido de lo que aprenderás.

1. ¿Qué es una imagen interactiva?
2. Cómo agregar imágenes interactivas a tu contenido de WordPress
3. Cómo importar/exportar imágenes interactivas a otros sitios de WordPress
4. Preguntas frecuentes sobre imágenes interactivas

¿Qué es una imagen interactiva?

Una imagen interactiva puede tener áreas interactivas, resaltados, enlaces, botones clickeables, colores, contenido audiovisual y más.

Inmediatamente, esto es mucho más atractivo que una simple imagen estándar que subes a tu sitio web de WordPress.

Las imágenes interactivas pueden atraer la atención del visitante a características y contenido específicos y luego mostrar información adicional.

Por ejemplo, podrías mostrar una ventana emergente cuando el visitante pase el cursor sobre una barra en particular de un gráfico.

Esta interacción puede animar a los visitantes a explorar tus imágenes con más detalle, lo que los mantendrá en la página por más tiempo. También puede crear una experiencia más interactiva e interesante, lo que puede aumentar tus visitas a la página y reducir la tasa de rebote en WordPress.

Las imágenes interactivas también pueden mostrar a los visitantes los pasos que deben seguir a continuación. Por ejemplo, podrías agregar enlaces a otras partes de tu sitio o mostrar un botón de llamada a la acción.

Dicho esto, veamos cómo puedes crear imágenes interactivas para tu sitio de WordPress.

Nota: Si en su lugar deseas agregar imágenes animadas a tu sitio web, sigue nuestra guía paso a paso sobre cómo agregar GIFs animados en WordPress.

Cómo agregar imágenes interactivas a tu contenido de WordPress

La forma más fácil y amigable para principiantes de agregar áreas clickeables o puntos interactivos es usando Draw Attention. Este plugin te permite mostrar una ventana emergente de 'más información' o abrir una nueva URL cuando el usuario interactúa con una imagen.

Lo primero que necesitas hacer es instalar y activar el plugin Draw Attention. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, ve a Draw Attention » Edit Image en el panel de WordPress. Esto te llevará a una pantalla donde puedes crear diferentes interacciones y luego añadirlas a una imagen como áreas clicables.

Para empezar, escribe un título para la imagen interactiva.

Este aparecerá junto a la imagen en tu sitio web de WordPress. Por ejemplo, en la siguiente imagen, estamos usando el título 'Características de OptinMonster'.

Después de escribir un título, desplázate hasta la sección 'Imagen' y elige la imagen que deseas usar.

Puedes seleccionar una imagen de la biblioteca de medios o subir una nueva imagen.

Después de elegir una imagen, puedes agregar colores y enlaces, crear áreas interactivas y más, desplazándote hacia abajo hasta la sección 'Áreas de punto de acceso'.

El plugin crea un Área interactiva 1 por defecto, así que haz clic para expandir esta sección.

Para empezar, deberás resaltar el área que deseas hacer interactiva.

Draw Attention tiene algunas formas diferentes que puedes usar para el resaltado, así que simplemente haz clic en la forma que deseas usar. En la siguiente imagen, hemos seleccionado un rectángulo.

Ahora, simplemente haz clic y arrastra para resaltar el área que deseas usar como punto de acceso de la imagen.

Draw Attention ahora mostrará algunas configuraciones nuevas para esta área interactiva. Para empezar, escribe un nombre en el campo 'Título'.

Esto aparecerá como una información sobre herramientas cuando el visitante pase el mouse sobre el punto de acceso, por lo que es una buena idea usar algo descriptivo.

En la siguiente imagen, hemos convertido el área de cuenta regresiva en un punto de acceso y hemos agregado el título de la imagen 'Temporizador de cuenta regresiva'.

Una vez que hayas hecho eso, abre el menú desplegable 'Acción' y elige qué sucederá cuando un visitante haga clic en esta área. Draw Attention puede abrir un enlace o mostrar un cuadro de 'más información'.

Verás diferentes configuraciones dependiendo de las opciones que selecciones. Por ejemplo, si eliges ‘Ir a URL’, entonces necesitarás agregar un enlace y especificar si debe abrirse en una nueva pestaña.

Si seleccionas ‘Mostrar más información’, entonces deberás escribir la información que aparecerá cuando el visitante haga clic en el punto de acceso.

También puedes agregar una imagen o URL de detalle opcional, que se incluirá en el cuadro de información.

En la siguiente imagen, hemos agregado algo de texto al cuadro de más información.

También hemos agregado el logotipo de OptinMonster como imagen de detalle.

Cuando estés satisfecho con el aspecto del punto de acceso, haz clic en el botón ‘Agregar otra área’.

Ahora puedes configurar el área clicable siguiendo el mismo proceso descrito anteriormente.

Simplemente repite estos pasos para agregar todas las áreas clicables a la imagen.

Hecho eso, es posible que desees personalizar el aspecto de los resaltados y el cuadro de más información. Por ejemplo, puedes cambiar el color que muestra Draw Attention cuando los visitantes pasan el cursor sobre un área clicable usando la configuración de ‘Color de resaltado’.

También puedes cambiar la opacidad del resaltado y el ancho del borde, agregar un borde y más, usando las configuraciones en la sección ‘Estilo de resaltado’.

Después de eso, puedes desplazarte hasta ‘Estilo del cuadro de más información’ y ajustar cómo se ve el cuadro. Por ejemplo, puedes cambiar el color de fondo, el color del texto y más.

Draw Attention también viene con diferentes temas que puedes aplicar a tu imagen interactiva.

Para ver estos temas, simplemente desplázate hasta el cuadro ‘Aplicar esquema de color’ y abre el menú desplegable. Puedes elegir entre Claro, Oscuro y Llamar la atención.

Todas estas opciones son bastante sencillas, por lo que vale la pena probar diferentes configuraciones para ver cuál se ve mejor en tu sitio web.

A medida que pruebes las diversas opciones, puedes previsualizar cómo se verán en tu sitio web de WordPress haciendo clic en ‘Vista previa de los cambios’.

Cuando estés satisfecho con la apariencia y el funcionamiento de la imagen interactiva, asegúrate de hacer clic en ‘Actualizar’ para guardar tus cambios.

Ahora puedes agregar la imagen interactiva a cualquier página, publicación o área preparada para widgets usando el código corto en el bloque ‘Copiar código corto’.

Para obtener más información sobre cómo colocar el shortcode, consulta nuestra guía sobre cómo agregar un shortcode en WordPress.

Cómo importar/exportar imágenes interactivas a otros sitios de WordPress

A veces, es posible que desees reutilizar la misma imagen interactiva en varios sitios web.

Por ejemplo, si eres un afiliado de marketing, entonces podrías crear una imagen interactiva que promocione uno de tus productos. Luego puedes usar la misma imagen interactiva en todas tus tiendas de afiliados de Amazon y otros sitios web de marketing de afiliados.

Subir la misma imagen y luego recrear todas las interacciones manualmente puede llevar mucho tiempo y esfuerzo.

En lugar de eso, recomendamos crear la imagen interactiva una vez y luego usar la función de importar/exportar de Draw Attention. Esto te permite reutilizar la misma imagen en innumerables sitios web o tiendas en línea.

Para hacer esto, necesitarás instalar el plugin Draw Attention en el sitio original que tiene la imagen interactiva y en todos los demás sitios web donde quieras usar esa imagen.

En tu sitio original, ve a Draw Attention » Importar / Exportar y marca la casilla junto a cada imagen que quieras exportar.

Luego, haz clic en el botón ‘Generar Código de Exportación’. Después de unos momentos, Draw Attention generará un código.

En una pestaña diferente, inicia sesión en tu otro blog de WordPress o sitio web y ve a Draw Attention » Importar / Exportar.

Aquí, copia el código de exportación en el cuadro ‘Importar’ y haz clic en el botón ‘Importar’.

Draw Attention importará la imagen y todas sus interacciones, lista para que la uses.

Simplemente repite estos pasos en todos los sitios web donde quieras usar la imagen interactiva.

Preguntas frecuentes sobre imágenes interactivas

Aquí están las respuestas a algunas de las preguntas más comunes que recibimos sobre cómo agregar imágenes interactivas en WordPress.

¿Cuál es el mejor plugin para crear imágenes interactivas en WordPress?

Para principiantes, recomendamos el plugin Draw Attention porque es fácil de usar y tiene una interfaz sencilla. La versión gratuita proporciona todas las funciones básicas que necesitas, mientras que la versión pro desbloquea opciones más avanzadas como mapas de imágenes múltiples y estilos adicionales para las descripciones emergentes.

¿Son las imágenes interactivas amigables con los dispositivos móviles?

Sí, el plugin Draw Attention es totalmente adaptable. Esto significa que tus puntos interactivos y cuadros de información se ajustarán automáticamente para adaptarse a cualquier tamaño de pantalla, brindando una excelente experiencia de usuario en dispositivos móviles.

¿Puedo agregar videos o animaciones a los puntos interactivos?

Puedes usar la acción 'Ir a URL' para enlazar un punto interactivo a un video en una plataforma como YouTube o Vimeo. Si bien la incrustación directa de video en la ventana emergente puede requerir la versión pro, el enlace es una solución simple. Para imágenes animadas, recomendamos seguir nuestra guía sobre cómo agregar GIFs animados a WordPress.

¿Agregar imágenes interactivas ralentizará mi sitio web?

Como cualquier medio, las imágenes interactivas aumentan el peso de tu página. Sin embargo, el plugin Draw Attention es ligero y está bien codificado. El factor más importante es el tamaño del archivo de imagen original, por lo que recomendamos siempre optimizar tus imágenes para la web antes de subirlas.

Esperamos que este artículo te haya ayudado a aprender cómo crear imágenes interactivas en WordPress. También podrías querer ver nuestra guía sobre cómo crear superposiciones y efectos de volteo de imágenes en WordPress y nuestras selecciones expertas de los mejores plugins de slider para WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.