¿Quieres crear una imagen interactiva para tu blog de WordPress? Una imagen interactiva le permite resaltar, vincular 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 áreas de puntos de acceso, resaltados, enlaces, colores y más. Es diferente a una simple imagen que subes en WordPress. Las imágenes interactivas son llamativas y atraen a los usuarios para que vean los detalles de la imagen. Puede agregar una descripción en diferentes partes de una imagen, agregar enlaces a páginas, resaltar secciones y más.
En esta imagen, puede ver la descripción de las frutas al pasar el mouse sobre diferentes barras. Puede usar estas imágenes interactivas para aumentar la participación del usuario y el tiempo que pasa 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 debe hacer es instalar y activar el complemento Draw Attention. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.
Tras la activación, verá un nuevo tipo de publicación personalizada en su área de administración de WordPress. Tienes que ir a la Llamar la atención » Añadir nuevo página para crear una imagen interactiva.
Comience agregando un título para esta nueva imagen interactiva, para que pueda recordarla fácilmente. En esta página, puede crear un diseño interactivo en imágenes nuevas o cargadas previamente. Puede agregar una nueva imagen haciendo clic en el ícono de carga de imagen, o puede seleccionar una imagen de su biblioteca de medios de WordPress.
A continuación, debe hacer clic en Publicar botón.
Después de la publicación, el complemento le permite editar la imagen y resaltar áreas específicas, agregar colores, enlaces, dibujar áreas de puntos de acceso y más. Puede desplazarse hacia abajo hasta la Áreas de puntos de acceso sección y expanda el área en la que se puede hacer clic para obtener una vista previa de la imagen.
Simplemente mueva el mouse y dibuje áreas en las que se pueda hacer clic en la imagen. Puede seleccionar fácilmente las áreas de puntos de acceso y expandirlas para crear una selección.
Después de dibujar el área del punto de acceso, debe desplazarse hacia abajo hasta el Acción menú desplegable y seleccione una acción para el área seleccionada en la imagen. Si elige Mostrar más información, simplemente puede agregar una descripción para explicar el área del punto de acceso en la imagen. También puede agregar un enlace en el área seleccionada utilizando la opción ‘Ir a URL’.
También puede 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 más. Estos ajustes pueden ayudar a que su imagen sea más interactiva.
A continuación, debe hacer clic en el Actualizar y copie el código abreviado para agregarlo en su publicación o página de WordPress.
El complemento le permite crear tantas imágenes interactivas como necesite utilizando sus imágenes cargadas previamente o nuevas.
Importar y exportar imágenes interactivas
Si está trabajando en varios sitios y desea importar/exportar imágenes interactivas, entonces requiere el mismo complemento Draw Attention en ambos sitios.
En el primer sitio, debe visitar Llamar la atención » Importar / Exportar página y marque las imágenes que desea exportar. A continuación, haga clic en el Generar código de exportación y copia el código.
Después de eso, debe ir al siguiente sitio web y asegurarse de que tiene activado el complemento Llamar la atención. A continuación, debe ir a Llamar la atención » Importar / Exportar página del administrador de WordPress y pegue el código en el campo de importación.
Continúe y haga clic en el Importar y sus imágenes se importarán con todos los detalles interactivos que agregó anteriormente.
Estas imágenes interactivas son buenas para WordPress SEO y atraen más visitantes a su sitio. Sin embargo, se recomienda comprimir las imágenes antes de cargarlas para mejorar el rendimiento del sitio.
Esperamos que este artículo te 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 diferida en WordPress.
Si te ha gustado este artículo, suscríbete a nuestro Canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Gorjeo y Facebook.