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.