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 áreas de puntos de acceso, reflexiones, enlaces, colores y más. Es diferente de una imagen simple cargada en WordPress. Las imágenes interactivas son atractivas y atraen a los usuarios para ver los detalles de la imagen. Puede agregar una descripción a diferentes partes de una imagen, agregar enlaces a páginas, resaltar secciones y más.

Descripción de demostración para imágenes interactivas

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 los visitantes con imágenes interactivas.

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

Después de la activación, verá un nuevo tipo de publicación personalizada en su área de administración de WordPress. Necesitas ir a Llama la atención »Añadir nuevo página para crear una imagen interactiva.

Agregar nueva imagen

Comience agregando un título para esta nueva imagen interactiva, para que pueda recordarla fácilmente. En esta página, puede crear diseños interactivos en imágenes nuevas o cargadas previamente. Puede agregar una nueva imagen haciendo clic en el icono de carga de imágenes o puede seleccionar una imagen de su biblioteca de medios de WordPress.

Cargar o seleccionar imagen

Entonces necesitas hacer clic 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 mucho más. Puedes desplazarte hacia abajo Áreas de puntos de acceso sección y expanda el área en la que se puede hacer clic para ver la imagen.

Simplemente mueva el mouse y dibuje las áreas donde se puede hacer clic en la imagen. Puede seleccionar fácilmente áreas de puntos de acceso y expandirlas 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 desplegable y seleccione una acción para el área seleccionada en la imagen. Si elige Mostrar más información, simplemente agregue una descripción para explicar el área de zona activa en la imagen. También puede agregar un enlace en el área seleccionada utilizando la opción “Ir a URL”.

Agregar acción

También puede administrar la configuración general y resaltar el estilo de enlace de acción, el texto de acción, el fondo de información y más. Esta configuración puede ayudar a que su imagen sea más interactiva.

Configuración general

Entonces necesitas hacer clic en Actualizar y copie el código corto para agregarlo a su publicación o página de WordPress.

Copiar códigos de acceso

El complemento le permite crear tantas imágenes interactivas como sea necesario, utilizando imágenes cargadas previamente o nuevas.

Imagen interactiva en la que se puede hacer clic

Importa y exporta imágenes interactivas

Si está trabajando en varios sitios y desea importar / exportar imágenes interactivas, necesitará el mismo complemento de Draw Attention en ambos sitios.

En el primer sitio web, debe visitar Llama la atención »Importar / Exportar página y marque las imágenes que desea exportar. Luego haga clic en Generar código de exportación abotone y copie el código.

Código de exportación para imágenes interactivas

Después de eso, debe acceder al siguiente sitio web y verificar que el complemento Draw Attention esté activado. Entonces debes ir a Llama 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

Sigue adelante y haz clic en importar el botón y sus imágenes se importarán con todos los detalles interactivos agregados previamente.

Estas imágenes interactivas son buenas para el SEO de WordPress y atraen a más visitantes a su sitio. Sin embargo, se recomienda comprimir las imágenes antes de subirlas para mejorar el rendimiento del sitio.

Esperamos que este artículo te haya ayudado a aprender cómo crear imágenes interactivas de WordPress. También puede consultar nuestra guía sobre cómo cargar imágenes diferidas en WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para ver videos tutoriales de WordPress. También nos puede encontrar en Twitter y Facebook.

Publicaciones relacionadas

Botón volver arriba