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 hover son especialmente útiles en el comercio electrónico. Permiten a los compradores previsualizar los productos más de cerca, animándolos a explorar más y proceder al pago.

Hay muchas formas de añadir efectos hover a imágenes en WordPress, desde simples desvanecimientos hasta animaciones de volteo llamativas. ¡A continuación, encontrarás varios métodos para comenzar! 

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ás un nuevo Image Hover menú en tu panel. 

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

• Elige cualquier efecto que te gustaría usar. Para este tutorial, estaremos experimentando con Image Magnifier.
• 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és satisfecho con la configuración, haz clic Edit para personalizar tu 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 +.

• Introduce tu contenido en el Cover bloque. Aquí añadiremos 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 Hover Animation menú desplegable, encontrarás una variedad de efectos listos para usar. 

• Aquí hemos elegido el Grow efecto como ejemplo. Puedes personalizar la duración de la transición, la opacidad y otras configuraciones para que coincidan con el diseño de tu 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.
• Elige cualquier animación que te guste. Una vez que la hayas encontrado, haz clic Create Style.

• 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 hayas terminado, haz clic Submit 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.

• Ve al Plugins menú y selecciona tu plugin de fragmentos 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.

Puedes reutilizar este efecto añadiendo la clase fade-hover-effect a cualquier bloque o imagen. Pero si estás manejando muchas imágenes, considera usar un plugin como WP Media Folder para organizar tu biblioteca de medios en carpetas. Esto facilita 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