Cómo añadir efectos de desplazamiento sobre imágenes en WordPress (5 formas sencillas)

Añadir un efecto de desplazamiento a tu sitio web puede parecer un detalle insignificante, pero puede mejorar su apariencia y usabilidad. Cuando los visitantes pasan el ratón sobre una imagen o un botón y ven que cambia ligeramente, indica que el elemento es interactivo. 

Este sutil movimiento mejorará la interacción y ayudará a reducir las tasas de rebote. Los efectos de desplazamiento son especialmente útiles en el comercio electrónico. Permiten a los compradores obtener una vista previa de los productos con mayor detalle, lo que les anima a explorar más a fondo y a finalizar la compra.

Hay muchas maneras de añadir efectos de desplazamiento de imágenes en WordPress, desde simples desvanecimientos hasta atractivas animaciones de giro. ¡A continuación, encontrarás varios métodos para empezar!

Cómo añadir efectos al pasar el cursor sobre las imágenes en WordPress

En este artículo, hemos recopilado cinco maneras sencillas de añadir efectos de desplazamiento a tu sitio web. ¡Elige la que mejor se adapte a ti!

Método 1: Usar un complemento

Un plugin te ahorrará mucho tiempo y esfuerzo, especialmente si quieres usar varios efectos de desplazamiento en el mismo sitio.

Por ejemplo, si tienes varias galerías de imágenes, puedes aplicar diferentes animaciones a cada una, como un simple zoom para las miniaturas del blog o un efecto de volteo para las imágenes de productos.

Usar un plugin como Image Hover Effects Ultimate simplifica mucho este proceso. Este plugin es gratuito y ofrece una amplia gama de efectos para cada elemento. Para empezar, simplemente instálalo siguiendo el tutorial a continuación: 

Instalación de un complemento

• Abra su área de administración de WordPress.
• Haga clic en Agregar complemento en el menú Complementos

• Escribe Image Hover Effects Ultimate en la barra de búsqueda.

• Seleccione el primer resultado y haga clic en Instalar ahora para iniciar la descarga.
• Una vez completada la instalación, haga clic en el Activar para comenzar a utilizar el complemento.

Uso del complemento de WordPress Efectos de desplazamiento de imágenes

• Una vez instalado el complemento, verás un nuevo flotante sobre imágenes en tu panel de control.

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

• Elige los efectos que quieras usar. En este tutorial, experimentaremos con la Lupa de Imagen .
• Después de seleccionar el efecto, verá una variedad de estilos de animación.

Cuando encuentres uno que te guste, haz clic en Crear estilo .

• Aparecerá una ventana emergente. Introduce un título en el "Nombre" y selecciona un efecto del diseño (1.º, 2.º o 3.º). Haz clic en "Guardar" para continuar.
• Accederás a una nueva página donde podrás personalizar la configuración, como la altura, el ancho y la opacidad. Prueba diferentes opciones para ver qué te queda mejor.

• Una vez que esté satisfecho con la configuración, haga clic en Editar para personalizar su imagen.

• Aparecerá otra ventana emergente. Aquí puedes personalizar la posición de ampliación. 

• También puedes reemplazar la imagen con el Elegir imagen .
• Después de configurar todo, haga clic en Enviar para guardar el efecto de desplazamiento.

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

• Ahora tu simple efecto de desplazamiento de imagen está listo para usarse en cualquier parte de tu sitio. 

Método 2: Uso de CSS

No necesitas instalar ningún plugin para este método. Con CSS personalizado, puedes añadir varios efectos al pasar el cursor por encima de tu tema.

Empezaremos con algo sencillo, como un efecto de subrayado al pasar el cursor. Si quieres añadir este efecto a tu tema, sigue estos sencillos pasos:

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

• Introduce tu contenido en el "Portada" . Aquí añadiremos un título y un botón.

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

• Luego, haz clic en "Personalizar" y ve a "CSS adicional" . Agrega el siguiente código:

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

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

• Ahora regresa a tu publicación y selecciona el texto al que deseas aplicar el efecto de subrayado.
• Abra la Avanzada en la barra lateral del bloque e ingrese underline-hover en el Clase(s) CSS adicionales .

• Guarde la página y obtenga una vista previa para ver el efecto. 

Hay muchísimos efectos de desplazamiento para elegir, así que elige el que mejor se adapte a tu estilo. Puedes aprender a escribir el CSS tú mismo o buscar ejemplos en la comunidad de WordPress. ¡Hay de todo!

Método 3: Uso de creadores de páginas (por ejemplo, Elementor)

Un creador de páginas como Elementor te permite crear tu sitio web con mucha creatividad. Cuenta con efectos de desplazamiento integrados, listos para usar y darle vida a tu sitio sin necesidad de programar.

También puedes usarlo para crear efectos de desplazamiento sobre imágenes en WordPress. En esta sección, experimentaremos con los efectos de desplazamiento integrados en el propio constructor de páginas.

Para configurar los efectos:

• Abra el de Elementor desde el panel de administración.
• Añade tu imagen.

• Seleccione su imagen y luego vaya a la Estilo .
• Desplácese hacia abajo y haga clic en Hover .

• En el Animación flotante , encontrará una variedad de efectos listos para usar.

• Aquí hemos elegido el Crecimiento como ejemplo. Puedes personalizar la duración de la transición, la opacidad y otros ajustes para que se adapten al diseño de tu sitio.

• Una vez que hayas terminado, podrás ver el efecto inmediatamente sin necesidad de obtener una vista previa. 

Método 4: Uso de complementos de Flipbox

Si buscas un atajo, puedes instalar el plugin Flipbox. Un efecto Flipbox consiste en voltear una imagen para mostrar contenido en la parte frontal o posterior al pasar el cursor sobre ella.

Este efecto es ideal para fotografías, ya que permite mostrar la foto en la parte frontal y los detalles de la cámara en la parte posterior. Pero las posibilidades son infinitas.

• Desde el panel de WordPress, haz clic en el Plugins . Luego, selecciona "Añadir plugin" .
• Escribe Flipbox - Impresionante superposición de imágenes de Flip Boxes en la barra de búsqueda.

• Haga clic en Instalar ahora y luego en Activar el complemento.

• Para crear un Flipbox, vaya al menú Flip Box Crear nuevo .
• Elige las animaciones que te gusten. Una vez que encuentres una, haz clic en "Crear estilo" .

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

• Haga clic en Guardar para continuar.
• A continuación, accederás al menú de personalización donde podrás configurar los efectos y agregar tu contenido.

• Desplázate hacia abajo para encontrar la pestaña Vista previa Editar para personalizar el contenido de la parte frontal y posterior 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 código corto generado en cualquier sección de su sitio. 

• ¡Y listo, aquí está el producto terminado! 

Método 5: Uso de bloques de Gutenberg

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

Si bien es posible que no ofrezca efectos de desplazamiento avanzados, puedes mejorar las animaciones usando CSS personalizado.

A modo de ejemplo, creemos un efecto de desvanecimiento sencillo al pasar el cursor. Aquí tienes el tutorial paso a paso:

• Navega hasta la publicación o página donde deseas agregar el efecto de desplazamiento.
• Haga clic en + para agregar un nuevo bloque, luego elija el Cubierta .

• Dentro del Portada , agregue un bloque Párrafo

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

• Luego, seleccione el Cubierta para agregar una clase CSS personalizada.
• Abra la sección Avanzada
• Ingrese fade-hover-effect en el campo Clase CSS adicional .

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

• Ve al Plugins y selecciona tu plugin de fragmentos de código. En este ejemplo, usamos WPCode .
• Crea un nuevo fragmento de CSS y luego pega el siguiente código:

.fade-hover-effect { opacidad: 0; transformación: translateY(10px); transición: opacidad 0,4 s facilidad, transformación 0,4 s facilidad; } .fade-hover-effect:hover { opacidad: 1; transformación: translateY(0); } 

• Guarde el fragmento y actívelo.
• Ahora, obtenga una vista previa de su página para ver el efecto de desvanecimiento al pasar el mouse en acción.

Puedes reutilizar este efecto añadiendo la clase fade-hover-effect a cualquier bloque o imagen. Si trabajas con muchas imágenes, considera usar un plugin como WP Media Folder para organizar tu biblioteca multimedia en carpetas. Esto facilita la búsqueda y reutilización de contenido relacionado.

¿El uso de demasiados efectos afecta el rendimiento?

Sí, usar demasiados efectos de desplazamiento en tu sitio web puede afectar el rendimiento, especialmente si no están optimizados correctamente. Esto se debe a que algunos efectos requieren CSS adicional. El tamaño del CSS de tu sitio web puede aumentar y ralentizar los tiempos de carga de la página.

Es mejor utilizar únicamente los efectos de desplazamiento esenciales para mejorar la experiencia del usuario sin sobrecargar su sitio.

Resumen

Aprender cómo agregar efectos de desplazamiento sobre imágenes en WordPress puede ayudar a mejorar su sitio al mejorar la interacción del usuario y mantenerlo interesado.

Con múltiples maneras de añadir efectos al pasar el cursor, ya sea mediante plugins, CSS personalizado o creadores de páginas, tienes la libertad de elegir lo que mejor se adapte a ti. ¡Experimenta con diferentes estilos para encontrar el que mejor se adapte a tu sitio!