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.

Crear imágenes interactivas en WordPress

¿Qué es una imagen interactiva?

Una imagen interactiva tiene áreas de puntos de acceso, reflejos, enlaces, colores y más. Es diferente de una imagen simple que carga en WordPress. Las imágenes interactivas son llamativas y atraen a los usuarios para ver 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.

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

Crear 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. Necesitas ir al Llama la atención »Añadir nuevo página para crear una imagen interactiva.

Añadir 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 ícono de cargar imagen, o puede seleccionar una imagen de su biblioteca de medios de WordPress.

Subir o seleccionar imagen

A continuación, debe hacer clic en Publicar botón.

Después de publicar, el complemento le permite editar la imagen y resaltar áreas específicas, agregar colores, enlaces, dibujar áreas de puntos de acceso y 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 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 zona interactiva 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 puede agregar una descripción para explicar el área de zona activa en la imagen. También puede agregar un enlace en el área seleccionada mediante la opción “Ir a URL”.

Agregar acción

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. Esta configuración puede ayudar a hacer que su imagen sea más interactiva.

Configuración general

A continuación, debe hacer clic en el Actualizar botón y copie el shortcode para agregarlo en su publicación o página de WordPress.

Copiar códigos cortos

El complemento le permite crear tantas imágenes interactivas como necesite usando sus imágenes cargadas previamente o nuevas.

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, entonces requiere el mismo complemento de Draw Attention en ambos sitios.

En el primer sitio, debes 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 abotone y copie el código.

Exportar código de imágenes interactivas

Después de eso, debe ir al siguiente sitio web y asegurarse de que tiene activado el complemento Draw Attention. A continuación, debes 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.

Pegar imágenes interactivas de código

Siga adelante y haga clic en el Importar el botón y sus imágenes se importarán con todos los detalles interactivos que agregó anteriormente.

Estas imágenes interactivas son buenas para el SEO de WordPress 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 te haya ayudado a aprender cómo 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 gustó este artículo, suscríbete a nuestro canal de YouTube para ver videos tutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.