¿Quieres crear una imagen interactiva para tu blog de WordPress? Una imagen interactiva le permite resaltar, enlazar y animar ciertas áreas de su imagen. En este artículo, le mostraremos cómo crear imágenes interactivas en WordPress.
¿Qué es una imagen interactiva?
Una imagen interactiva tiene zonas activas, resaltes, enlaces, colores y mucho más. Es diferente de una simple imagen que se sube en WordPress. Las imágenes interactivas son llamativas y atraen a los usuarios a ver los detalles de la imagen. Puede añadir descripciones en diferentes partes de una imagen, añadir enlaces a páginas, resaltar secciones y mucho más.
En esta imagen, puede ver la descripción de las frutas al pasar el ratón por encima de diferentes barras. Puede utilizar estas imágenes interactivas para aumentar el compromiso de los usuarios y el tiempo que pasan en el sitio.
Echemos un vistazo a cómo puede llamar la atención de sus visitantes con imágenes interactivas.
Creación de imágenes interactivas en WordPress
Lo primero que tienes que hacer es instalar y activar el plugin Draw Attention. Para más detalles, vea nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Después de la activación, verás un nuevo tipo de mensaje personalizado en tu área de administración de WordPress. Debe ir a la página Llamar la atención » Añadir nueva para crear una imagen interactiva.
Empieza por añadir un título para esta nueva imagen interactiva, para que puedas recordarla fácilmente. En esta página, puede crear un diseño interactivo sobre imágenes nuevas o previamente cargadas. Puede añadir una nueva imagen haciendo clic en el icono de cargar imagen, o puede seleccionar una imagen de su biblioteca multimedia de WordPress.
A continuación, debe hacer clic en el botón Publicar .
Después de la publicación, el plugin le permite editar la imagen y resaltar áreas específicas, añadir colores, enlaces, dibujar zonas activas, y más. Puede desplazarse hacia abajo hasta la sección Áreas activas y expandir el área en la que se puede hacer clic para obtener una vista previa de la imagen.
Simplemente mueva el ratón y dibuje áreas en las que pueda hacer clic en la imagen. Puede seleccionar fácilmente las zonas activas y ampliarlas para crear una selección.
Después de dibujar el área de la zona activa, debe desplazarse hacia abajo hasta el menú desplegable Acción y seleccionar una acción para el área seleccionada en la imagen. Si selecciona Mostrar más información, puede añadir una descripción para explicar el área de la zona activa de la imagen. También puede añadir un enlace en el área seleccionada utilizando la opciónIr a URL.
También puedes administrar la configuración general y resaltar el estilo para el enlace de acción, el texto de acción, el fondo de información y mucho más. Estos ajustes pueden ayudar a que su imagen sea más interactiva.
A continuación, debe hacer clic en el botón Actualizar y copiar el código abreviado para añadirlo en su entrada o página de WordPress.
El plugin le permite crear tantas imágenes interactivas como necesite utilizando sus imágenes previamente cargadas o nuevas.
Importar y exportar imágenes interactivas
Si está trabajando en múltiples sitios y desea importar / exportar imágenes interactivas, entonces requiere el mismo plugin de Atención de Dibujo en ambos sitios.
En el primer sitio, debe visitar Dibujar Atención » Importar / Exportar página y marcar las imágenes que desea exportar. A continuación, haga clic en el botón Generar código de exportación y copie el código.
Después de eso tienes que ir a la siguiente página web y asegurarte de que tienes activado el plugin de Atención al Cliente. A continuación, debe ir a la página Llamar la atención » Importar / Exportar desde el administrador de WordPress y pegar el código en el campo de importación.
Haga clic en el botón Importar y sus imágenes se importarán con todos los detalles interactivos que haya añadido anteriormente.
Estas imágenes interactivas son buenas para WordPress SEO y atraen a más visitantes en su sitio. Sin embargo, se recomienda comprimir las imágenes antes de subirlas para mejorar el rendimiento del sitio.
Esperamos que este artículo le haya ayudado a aprender a crear imágenes interactivas en WordPress. También puede consultar nuestra guía sobre cómo cargar imágenes de forma perezosa en WordPress.
Si te ha gustado este artículo, suscríbete a nuestros tutoriales de vídeo de YouTube Channel for WordPress. También puede encontrarnos en Twitter y Facebook.