Cómo agregar efectos de desplazamiento de imagen en WordPress (5 formas fáciles)

Agregar un efecto de desplazamiento a su sitio web puede parecer un pequeño detalle, pero puede mejorar la apariencia y la usabilidad del sitio. Cuando los visitantes pasan el mouse sobre una imagen o botón y ven que cambia ligeramente, indica que el elemento es interactivo. 

Este sutil movimiento mejorará la participación y ayudará a reducir las tasas de rebote. Los efectos de hover son especialmente útiles en el comercio electrónico. Permiten a los compradores previsualizar productos más de cerca, animándolos a explorar más y proceder al pago.

Hay muchas formas de agregar efectos de hover de imagen en WordPress, desde simples desvanecimientos hasta animaciones de giro llamativas. A continuación, encontrarás varios métodos para empezar.

Cómo agregar efectos de desplazamiento de imagen en WordPress

En este artículo, hemos recopilado cinco formas fáciles de agregar efectos de desplazamiento a su sitio. ¡Elija la que mejor se adapte a usted!

Método 1: Usar un complemento

Un plugin le ahorrará mucho tiempo y esfuerzo, especialmente si desea utilizar múltiples efectos hover en el mismo sitio.

Por ejemplo, si tiene varias galerías de imágenes, puede aplicar diferentes animaciones a cada una, como un simple zoom para las miniaturas de los blogs o un efecto de giro para las imágenes de los productos.

Usar un plugin como Image Hover Effects Ultimate hace que este proceso sea mucho más fácil. Este plugin es gratuito para todos y ofrece una amplia gama de efectos para cada elemento. Para empezar, simplemente instálelo siguiendo el tutorial a continuación: 

Instalando un Plugin

• Abra el área de administración de WordPress.
• Haga clic Agregar complemento desde el menú Complementos en la barra lateral.

• Escriba Efectos de desplazamiento de imagen definitivos en la barra de búsqueda.

• Seleccione el primer resultado y haga clic en Instalar ahora para iniciar la descarga.
• Una vez que la instalación esté completa, haga clic en el botón Activar para comenzar a usar el plugin.

Usar el complemento de efectos de desplazamiento de imagen de WordPress

• Una vez que el plugin esté instalado, verá un nuevo menú Hover de imagen en su panel de control.

• Haga clic en el menú para abrir la configuración del plugin. 

• Elija cualquier efecto que le gustaría usar. Para este tutorial, vamos a experimentar con Ampliador de imagen.
• Después de seleccionar el efecto, verá una variedad de estilos de animación.

Cuando encuentre uno que le guste, haga clic en Crear estilo.

• Aparecerá una ventana emergente. Ingrese un título en el campo Nombre y seleccione un efecto del diseño (1º, 2º o 3º). Luego haga clic en Guardar para continuar.
• Serás llevado a una nueva página donde podrás personalizar la configuración, como la altura, el ancho y la opacidad. Juega para ver qué se ve mejor.

• Una vez que esté satisfecho con las configuraciones, haga clic en Editar para personalizar su imagen.

• Aparecerá otra ventana emergente. Aquí puede personalizar la posición de magnificación. 

• También puede reemplazar la imagen haciendo clic en el botón Elegir Imagen.
• Después de configurar todo, haga clic en Enviar para guardar su efecto hover.

• Para aplicar el efecto a su sitio, copie y pegue el código corto en su entrada o página. 

• Ahora su efecto de desplazamiento de imagen simple está listo para ser utilizado en cualquier parte de su sitio. 

Método 2: Usando CSS

No necesita instalar ningún plugin para este método. Al usar CSS personalizado, puede agregar varios efectos de desplazamiento a su tema.

Comenzaremos con algo simple, como un efecto de subrayado al pasar el ratón. Si desea agregar este efecto a su tema, siga los sencillos pasos a continuación:

• Navegue hasta la publicación donde desea agregar un efecto de desplazamiento.
• Agregue una imagen haciendo clic en el bloque Portada desde el +.

• Ingrese su contenido en el bloque Cover. Aquí agregaremos un título y un botón.

• Establece la fuente y los estilos a tu gusto.
• Guarde la página como borrador.
• A continuación, vaya al menú Apariencia en su panel de control.

• Luego, haga clic en Personalizar y vaya a CSS adicional. Agregue el siguiente código:

cuerpo { mostrar: flex; justificar-contenido: centro; alinear-elementos: centro; altura: 100vh; fondo: #0f0f0f; margen: 0; familia-de-fuentes: Arial, sans-serif; } .subrayado-hover { tamaño-de-fuente: 2rem; color: #ffffff; posición: relativa; mostrar: bloque-en-linea; } .subrayado-hover::después, .subrayado-hover::antes { contenido: ''; posición: absoluta; ancho: 100%; altura: 2px; fondo: gradiente-lineal(a la derecha, #ff0000, #00ffff); parte-inferior: -5px; izquierda: 0; transformar: escalaX(0); origen-de-transformación: derecha; transición: transformar 0.4s salida-suave; } .subrayado-hover::antes { parte-superior: -5px; origen-de-transformación: izquierda; } .subrayado-hover:hover::después, .subrayado-hover:hover::antes { transformar: escalaX(1); }
 

• Haga clic en Publicar para guardar el código.

• Ahora vuelva a su publicación y seleccione el texto al que desea aplicar el efecto de subrayado.
• Abra la sección Avanzado en la barra lateral del bloque y escriba underline-hover en el campo Clase(s) CSS adicional(es).

• Guarde la página y prévia para ver el efecto. 

Hay tantos efectos hover para elegir, así que elija el que mejor se adapte a su estilo. Puede aprender a escribir el CSS usted mismo o encontrar ejemplos de la comunidad de WordPress. ¡Está todo ahí fuera!

Método 3: Usar constructores de páginas (por ejemplo, Elementor)

Un constructor de páginas como Elementor te permite construir tu sitio web con mucha creatividad. Tiene efectos de hover incorporados, todos listos para usar para animar tu sitio sin requerir codificación.

También puedes usarlo para crear efectos de desplazamiento de imagen en WordPress. En esta sección, experimentaremos con los efectos de desplazamiento incorporados dentro del propio constructor de páginas.

Para configurar los efectos:

• Abra el editor de Elementor desde el panel de administración.
• Agregue su imagen.

• Seleccione su imagen, luego vaya a la pestaña Estilo.
• Desplácese hacia abajo y haga clic en Desplazamiento.

• En el menú desplegable Animación al pasar el ratón, encontrará una variedad de efectos listos para usar.

• Aquí hemos elegido el efecto Crecimiento como ejemplo. Luego puede personalizar la duración de la transición, la opacidad y otras configuraciones para que coincidan con el diseño de su sitio.

• Después de terminar, podrás ver el efecto inmediatamente sin necesidad de previsualizarlo. 

Método 4: Usando plugins de Flipbox

Si está buscando un atajo, puede instalar el plugin flipbox. Un efecto flipbox es cuando una imagen se voltea para revelar contenido en el frente o en la parte trasera cuando se pasa el cursor sobre ella.

Este efecto es ideal para imágenes de fotografía, donde puede mostrar la foto en la parte delantera y los detalles de la cámara en la parte trasera. Pero las posibilidades son infinitas.

• Desde tu panel de WordPress, haz clic en el menú Plugins. Luego, selecciona Añadir plugin.
• Escribe Flipbox - Awesome Flip Boxes Image Overlay en la barra de búsqueda.

• Haga clic en Instalar ahora, luego Activar el plugin.

• Para crear un flipbox, vaya al menú Caja de volteo y haga clic en Crear nuevo.
• Elija cualquier animación que le guste. Una vez que haya encontrado una, haga clic en Crear estilo.

• Aparecerá una ventana emergente. Selecciona el diseño deseado (1º, 2º o 3º) e ingresa un título. 

• Haga clic en Guardar para continuar.
• A continuación, se le llevará al menú de personalización donde podrá establecer los efectos y agregar su contenido.

• Desplácese hacia abajo para encontrar la pestaña Vista previa. Haga clic en Editar para personalizar el contenido tanto del frente como del dorso del flipbox.

• Una vez que haya terminado, haga clic en Enviar para guardarlo.

• Para agregar este flipbox a su página, simplemente copie y pegue el shortcode generado en cualquier sección de su sitio. 

• ¡Y eso es todo, aquí está el producto terminado! 

Método 5: Usando Bloques de Gutenberg

Gutenberg es el editor de bloques predeterminado de WordPress que te permite agregar efectos de desplazamiento directamente dentro del editor.

Si bien puede que no ofrezca efectos de desplazamiento avanzados, puede mejorar las animaciones utilizando CSS personalizado.

Como ejemplo, hagamos un efecto de desvanecimiento simple al pasar el cursor. Aquí está el tutorial paso a paso:

• Navegue hasta la publicación o página donde desee agregar el efecto de desplazamiento.
• Haz clic en + para agregar un nuevo bloque, luego elige el bloque Cover.

• Dentro del bloque Cover, agrega un bloque Párrafo.

• Ingrese su título y una breve descripción.
• Personalice el tamaño de fuente, opacidad, alineación y color según sea necesario.

• Luego seleccione el bloque Portada para agregar una clase CSS personalizada.
• Abra la sección Avanzado en la barra lateral derecha.
• Ingrese fade-hover-effect en el campo Clase CSS adicional .

• Después de eso, guarde la página como borrador.

• Ir al menú Plugins y seleccione el plugin de fragmento de código. En este ejemplo, estamos usando WPCode.
• Cree un nuevo fragmento de CSS, luego pegue el siguiente código:

.fade-hover-effect { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; } .fade-hover-effect:hover { opacity: 1; transform: translateY(0); } 

• Guarde el fragmento y actívelo.
• Ahora, previsualice su página para ver el efecto de desvanecimiento al pasar el cursor en acción.

Puede reutilizar este efecto agregando la clase fade-hover-effect a cualquier bloque o imagen. Pero si está tratando con muchas imágenes, considere usar un plugin como WP Media Folder para organizar su biblioteca de medios en carpetas. Esto hace que sea más fácil encontrar y reutilizar contenido relacionado.

¿El uso excesivo de efectos afecta el rendimiento?

Sí, usar demasiados efectos hover en su sitio puede afectar potencialmente el rendimiento, especialmente si no se optimiza correctamente. Esto se debe a que algunos efectos hover requieren CSS adicional. El tamaño del CSS de su sitio puede sumar y ralentizar los tiempos de carga de la página.

Es mejor usar solo efectos de hover esenciales para mejorar la experiencia del usuario sin sobrecargar tu sitio.

Conclusión

Aprender a agregar efectos de desplazamiento de imagen en WordPress puede ayudar a impulsar su sitio al mejorar la interacción del usuario y mantenerlos comprometidos.

Con múltiples formas de agregar efectos de desplazamiento, ya sea a través de plugins, CSS personalizado o constructores de páginas, tienes la libertad de elegir lo que mejor funciona para ti. Experimenta con diferentes estilos para encontrar el que mejor se adapte a tu sitio