Create Interactive Images in WordPress

Cómo crear imágenes interactivas en WordPress

¿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.

Crea imágenes interactivas en WordPress

¿Qué es una imagen interactiva?

Una imagen interactiva tiene puntos de acceso, aspectos destacados, enlaces, colores, etc. Es diferente a una simple imagen que subes a WordPress. Las imágenes interactivas son llamativas y atraen a los usuarios a ver los detalles de la imagen. Puede agregar descripciones en diferentes partes de una imagen, agregar enlaces a páginas, resaltar secciones, etc.
Descripción Demo para imágenes interactivas
En esta imagen puedes ver la descripción de las frutas pasando el mouse sobre diferentes barras. Puede utilizar estas imágenes interactivas para impulsar la participación del usuario y el tiempo que pasa en el sitio. Veamos cómo captar la atención de tus visitantes con imágenes interactivas.

Crea imágenes interactivas en WordPress

Lo primero que debe hacer es instalar y activar el plugin Draw Attention. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress. Tras la activación, verá un nuevo tipo de publicación personalizada en su área de administración de WordPress. Debes ir a Llamar la atención »Agregar nuevo página para crear una imagen interactiva.
Agregar nueva imagen
Comience agregando un título a esta nueva imagen interactiva para que la recuerde fácilmente. En esta página, puede crear un diseño interactivo en imágenes nuevas o cargadas anteriormente. Puede agregar una nueva imagen haciendo clic en el icono de carga de la imagen, o puede seleccionar una imagen de su biblioteca de medios de WordPress.
Sube o selecciona una imagen
Entonces tienes que hacer clic en Publicar botón. Después de la publicación, el plugin le permite editar la imagen y resaltar áreas específicas, agregar colores, enlaces, dibujar puntos de acceso, etc. Puedes desplazarte hacia abajo Zonas de hotspot y expanda el área donde se puede hacer clic para obtener una vista previa de la imagen. Simplemente mueva el mouse y dibuje áreas en las que se puede hacer clic en la imagen. Puede seleccionar fácilmente los puntos de acceso y expandirlos para crear una selección.
Dibujar áreas de puntos de acceso
Después de dibujar el área del punto de acceso, debe desplazarse hacia abajo acción lista desplegable y seleccione una acción para el área seleccionada en la imagen. Si elige Mostrar más información, puede simplemente agregar una descripción para explicar el punto de acceso en la imagen. También puede agregar un enlace en el área seleccionada usando la opción «Ir a URL».
Agregar acción
También puede administrar la configuración general y resaltar el estilo del enlace de la acción, el texto de la acción, el fondo de la información, etc. Esta configuración puede ayudarlo a hacer que su imagen sea más interactiva.
Configuración general
Entonces tienes que hacer clic en el Poner al día y copie el código corto para agregarlo a su publicación o página de WordPress.
Copiar códigos cortos
El plugin le permite crear tantas imágenes interactivas como necesite utilizando sus imágenes nuevas o cargadas anteriormente.
Imagen interactiva en la que se puede hacer clic

Importar y exportar imágenes interactivas

Si está trabajando en varios sitios y desea importar / exportar imágenes interactivas, se requiere el mismo plugin Draw Attention en ambos sitios. En el primer sitio que tienes que visitar Llamar la atención »Importar / Exportar página y verifique las imágenes que desea exportar. Luego haga clic en el Genera el código de exportación y copia el código.
Exportar imágenes de código interactivo
Después de eso, debe ir al siguiente sitio web y asegurarse de que el plugin Draw Attention esté habilitado. Entonces tienes que ir a Llamar la atención »Importar / Exportar Página de administración de WordPress y pegue el código en el campo de importación.
Pegar imágenes de código interactivo
Continúe y haga clic en el Importar y sus imágenes serán importadas con todos los detalles interactivos que agregó anteriormente. Estas imágenes interactivas son buenas para el SEO de WordPress 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 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 perezosas en WordPress. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.

Leave a Reply