Cómo agregar un efecto de retención de imagen en WordPress (paso a paso)

¿Quiere aprender cómo agregar efectos de retención de imagen a WordPress?

El efecto de retención de imagen puede hacer que su sitio web sea más interactivo y atractivo. Esto creará una mejor primera impresión y aumentará el tiempo dedicado a su sitio web.

En este artículo, le mostraremos paso a paso cómo agregar efectos de retención de imagen a WordPress.

¿Cuál es el efecto del desplazamiento de la imagen?

Los efectos de mantener el mouse le permiten agregar elementos interactivos a las imágenes fijas, como animación, efectos de zoom, ventanas emergentes y más.

Por ejemplo, puede voltear la imagen para mostrar su precio o un enlace a su cartera.

Las imágenes flotantes también le brindan una forma creativa de mostrar sus fotos, galerías y miniaturas.

Las imágenes interactivas y los elementos flotantes pueden ayudar a su sitio web de muchas maneras:

• Mejore el tiempo que los visitantes pasan en su sitio web
• Brindarle formas creativas de presentar contenido a sus visitantes.
• Dígales a sus usuarios que se puede hacer clic en un elemento del sitio web.

Cómo crear un efecto de retención de imagen en WordPress

La mejor manera de agregar efectos de retención de imagen a un sitio web de WordPress es utilizar el complemento de WordPress.

Con los complementos, no tiene que perder tiempo editando, formateando y agregando CSS para crear efectos de imagen. Simplemente funciona.

Puede usar varios complementos para crear efectos y animaciones únicos al sostener una imagen.

En este tutorial, le mostraremos cuatro formas diferentes de agregar el efecto de retención del mouse deseado.

• Agrega un efecto flipbox que rota una imagen en WordPress
• Agregue efectos de ampliación y escala de imagen a WordPress
• Agregue efectos de animación a las imágenes de WordPress
• Agregue un efecto de retención de imagen emergente a WordPress

1. Agregue un efecto flipbox que gire una imagen en WordPress

Una caja plegable es una caja que se voltea cuando el mouse pasa sobre ella.

Puede agregar esta animación a la imagen para mostrar texto e incluso cambiar la imagen mientras mantiene presionado el cursor del mouse.

Puede controlar cómo se gira la imagen y el diseño en ambos lados de la imagen.

Si eres fotógrafo, puedes usarlo para exhibir tu trabajo y separar tu portafolio.

La forma más fácil de agregar un efecto de cambio de marco es usar un complemento de WordPress. Los complementos le permiten crear y personalizar rápidamente estos efectos.

Recomendamos utilizar el complemento de superposición de imágenes Flipbox-Awesomes Flip Boxes. Este es el mejor complemento para desplazarse y voltear imágenes para WordPress.

Este complemento le permite simplemente agregar efectos de marco de volteo personalizados a sus imágenes de WordPress.

Viene con docenas de diferentes efectos de animación y plantillas prediseñadas. Incluso puede controlar los colores y agregar su propio CSS personalizado.

Para obtener más detalles, consulte nuestra guía sobre cómo crear superposiciones y compensaciones de un cuadro desplegable en WordPress.

2. Agregue efectos de ampliación y escala de imagen a WordPress

El efecto de ampliación de la imagen permite a los usuarios ver detalles que no pueden ver en una imagen de tamaño normal.

Este es un gran efecto para tutoriales de productos e imágenes con un alto nivel de detalle.

También puede usarlo en su tienda en línea para agregar efectos de zoom como Amazon.

La forma más fácil de agregar efectos de zoom y zoom es utilizar el complemento de WordPress.

Recomendamos utilizar el complemento WP Image Zoom. El complemento le permite simplemente agregar efectos de zoom y zoom a las imágenes.

También está equipado con funciones que le permiten seleccionar la forma de la lente de zoom, el nivel de zoom, etc.

Para obtener más detalles, consulte nuestra guía sobre cómo agregar zoom y zoom a las imágenes de WordPress.

3. Agregue efectos de animación a las imágenes en WordPress

Puede agregar varios otros efectos de desplazamiento a WordPress.

Por ejemplo, tiene una biblioteca de fotos animadas, fotos de caja de luz, fotos para comparación, superposiciones de texto, etc.

Para agregar tales efectos mientras sostiene el mouse, recomendamos usar el complemento Image Hover Effects Ultimate.

El complemento es muy liviano, por lo que no afectará el rendimiento y la velocidad de carga de su sitio web. También es muy fácil de usar. Puede agregar efectos de imagen únicos con solo unos pocos clics.

Lo primero que debe hacer es instalar y activar el complemento Image Hover Effects Ultimate. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar complementos de WordPress.

Después de instalar y activar el complemento, debe hacer clic en "Image Hover" en el administrador de WordPress. Esto le mostrará ocho efectos de cambio de imagen diferentes para elegir.

En este tutorial usaremos el efecto "efecto de subtítulos". Esto agregará texto animado a la imagen mientras mantiene presionado el cursor.

Primero, haga clic en el cuadro Efectos de subtítulos. Esto abrirá un menú con varias opciones de animación para elegir.

Una vez que encuentre el efecto de imagen que le gusta, haga clic en Crear estilo.

En el cuadro emergente, nombre el efecto de retención del mouse y elija un diseño. El número de patrón que seleccione corresponde a la secuencia ordenada de imágenes.

No olvide hacer clic en "Guardar".

En la siguiente pantalla tendrás muchas opciones para personalizar el efecto de desplazamiento.

Sin embargo, mantendremos las opciones de animación predeterminadas.

Si realiza cambios, los verá en el cuadro Vista previa.

Para cambiar la imagen predeterminada, coloque el cursor sobre la imagen y haga clic en la opción "Editar".

En esta ventana emergente, puede cambiar el título y la descripción que se muestran al mantener presionado el cursor.

Para cargar su foto, haga clic en el cuadro debajo del cuadro "Imagen" y cargue o seleccione una foto de su biblioteca de medios.

Si desea que su imagen lleve a los usuarios a otra página de su sitio web, también puede agregar texto de enlace y un botón.

Cuando haya terminado, haga clic en Enviar.

Para agregar una imagen a su sitio web, copie el código corto en el campo "Código corto".

Luego, abra cualquier página, publicación o widget donde desee que aparezca la imagen y pegue el código corto.

Asegúrese de hacer clic en "Publicar" o "Actualizar" para guardar los cambios y activar el efecto de mantener el mouse.

Los complementos anteriores lo ayudarán a agregar funciones como marcos giratorios, efectos de desplazamiento y animaciones.

¿Qué sucede si desea agregar varios efectos de retención del mouse que no están cubiertos por el complemento anterior?

La mejor manera es utilizar un complemento CSS personalizado de WordPress. Esto le permite realizar cambios visuales en la imagen sin editar el código.

Puede editar el archivo CSS manualmente o agregar CSS usando la herramienta de personalización de WordPress, pero usar un complemento es la opción más fácil.

Recomendamos utilizar el complemento CSS Hero. Este complemento le permite editar casi todos los estilos CSS en su sitio de WordPress sin escribir una línea de código.

Hay varios efectos CSS integrados dedicados a las imágenes.

Para obtener más detalles sobre la instalación de complementos, consulte la guía sobre cómo instalar complementos de WordPress.

Después de instalar el complemento, debe hacer clic en el botón "Continuar con la activación del producto".

Esto lo llevará a través del proceso de activación del complemento.

Después de activar el complemento, puede comenzar a personalizar la imagen.

Abra la página o publicación que contiene la imagen que desea animar y haga clic en CSS Hero en la parte superior de la página.

Esto abrirá el menú del editor donde puede agregar varios efectos CSS.

Agregaremos una imagen emergente al efecto de mantener el mouse. Primero, debe hacer clic en la imagen que desea editar y luego haga clic en Fragmento.

Luego haga clic en "Efecto de desplazamiento".

Esto abrirá un menú con varios efectos CSS. Luego seleccione el efecto ".hvr-pop" y haga clic en "Aplicar".

Haga clic en "Guardar y publicar" y el efecto CSS se aplicará automáticamente a su imagen.

Esperamos que este artículo le haya ayudado a comprender cómo agregar efectos de desplazamiento de imágenes a WordPress. También puede consultar nuestra guía de optimización de imágenes web y la guía para principiantes de SEO SEO.

Si le gusta este artículo, suscríbase a nuestro canal de tutoriales en vídeo de YouTube para WordPress. También puede encontrarnos en Twitter y Facebook.