¿Cómo agregar animación de desplazamiento en un sitio web de WordPress?

Los efectos y animaciones ayudan a dar vida a los sitios web. No sólo hacen que se vean impresionantes, sino que también mejoran la experiencia del usuario, que es una de las señales de clasificación más importantes en los motores de búsqueda de Google.

Podrías haber pensado que era increíble, pero estaba fuera de tu alcance crearlo. Pero el hecho es que no sólo es posible sino que también puedes crear una animación de desplazamiento para tu sitio de WordPress con sólo unos pocos clics.

En este blog, le ayudaremos a aprender cómo agregar animación de desplazamiento en WordPress lo más fácilmente posible.

Así que estad atentos y leed el post hasta el final.

Pero antes de eso, comprendamos cuáles son los beneficios de agregar animación de desplazamiento en WordPress.

Beneficios de agregar animación de desplazamiento en WordPress

Si todavía te preguntas por qué deberías agregar animación de desplazamiento en WordPress, consulta las ventajas o beneficios que se mencionan a continuación:

1. Mayor participación del usuario

Las animaciones de desplazamiento captan la atención y mantienen a los visitantes interesados ​​mientras exploran su sitio. Los elementos dinámicos, como el texto que se desvanece o las imágenes en movimiento, crean una experiencia interactiva, lo que anima a los usuarios a desplazarse más y pasar más tiempo en sus páginas.

2. Experiencia de usuario mejorada (UX)

Las animaciones pueden guiar a los usuarios a través del contenido de una manera fluida e intuitiva. Al revelar información gradualmente o resaltar secciones clave, los efectos de desplazamiento hacen que la navegación sea más fácil y agradable, mejorando la satisfacción general del usuario.

3. Mayor atractivo visual

Agregar animaciones de desplazamiento le da a su sitio web un aspecto moderno y profesional. Las transiciones y animaciones sutiles pueden hacer que su diseño sea más dinámico, ayudando a que su sitio se destaque de la competencia.

4. Oportunidades para contar historias

Las animaciones de desplazamiento permiten una narración creativa. Puede presentar información en una secuencia lógica y visualmente convincente, lo que ayuda a comunicar su mensaje de manera más efectiva y mantiene a los visitantes interesados ​​en su contenido.

5. Interacciones optimizadas para dispositivos móviles

Las animaciones de desplazamiento mejoran las interacciones móviles, haciéndolas más fluidas y atractivas. Los usuarios de dispositivos móviles, en particular, se benefician de elementos de diseño intuitivos que responden a sus gestos, mejorando la experiencia móvil.

6. Beneficios del SEO

Dado que las animaciones pueden contribuir a una mejor participación del usuario y a una mayor permanencia en el sitio, apoyan indirectamente los esfuerzos de SEO. Una tasa de rebote más baja y una mayor interacción del usuario pueden indicar a los motores de búsqueda que su sitio ofrece contenido valioso, lo que ayuda a mejorar su clasificación.

7. Marca profesional

Las animaciones de desplazamiento reflejan un mayor nivel de profesionalismo y se alinean con las tendencias modernas del diseño web. Cuando se utilizan estratégicamente, pueden reforzar la identidad de su marca y hacer que su sitio web sea más memorable.

8. Orientación sutil para los usuarios

Las animaciones de desplazamiento pueden resaltar llamadas a la acción (CTA), dirigir la atención a secciones importantes o guiar a los usuarios a través de una ruta específica en su sitio. Esta sutil ayuda a la navegación puede ayudar a mejorar las conversiones.

Ahora veamos cómo puedes hacerlo.

Agregue animación de desplazamiento en WordPress usando el complemento de WordPress

Una de las formas más sencillas de agregar animación de desplazamiento en WordPress es mediante el uso de un complemento llamado Scrollsequence .

Si bien hay otros complementos de WordPress disponibles además de Scrollsequence, descubrimos que es el más estable y con más funciones.

Por lo tanto, para este blog lo hemos elegido para mostrarle cómo agregar animación de desplazamiento en WordPress.

Aquí tienes un método paso a paso que puedes seguir:

Paso 1: instale el complemento y actívelo

• Vaya a su panel de administración de WordPress:
  Primero, inicie sesión en su sitio de WordPress > busque “Scrollsequence” en la sección Complementos > instale la versión gratuita > Active el complemento después de la instalación.

Paso 2: acceda al menú de secuencia de desplazamiento

• Busque la opción Nueva secuencia de desplazamiento:
  Después de activar el complemento, mire nuevamente el lado izquierdo del tablero. Deberías ver una nueva opción denominada Scrollsequence .
• Haga clic en este menú:
  Haga clic en Secuencia de desplazamiento . Esto lo llevará a una nueva área donde podrá configurar y personalizar sus animaciones. También encontrará tutoriales útiles que explican cómo usarlo.

Paso 3: prepara tu animación

• Comprender cómo funciona la secuencia de desplazamiento:
  Scrollsequence crea animaciones utilizando una serie de imágenes fijas, como un libro animado, para que parezca un vídeo cuando los usuarios se desplazan hacia abajo en la página.
• Convierta su video en imágenes:
  Para crear su animación, primero necesita un video corto (de entre 5 y 10 segundos de duración). Utilice una herramienta gratuita como Ezgif para convertir este vídeo en fotogramas de imagen separados (formato JPEG). Esto significa que obtendrás varias imágenes de tu vídeo, que Scrollsequence utilizará para crear la animación.

Paso 4: crea una nueva animación de desplazamiento

• Iniciar una nueva secuencia de desplazamiento:
  En el menú Secuencia de desplazamiento, busque un botón que diga Agregar nueva secuencia de desplazamiento y haga clic en él.
• Agregar una escena:
  Haga clic en Agregar una escena . Aparecerá un menú desplegable, donde podrás elegir la secuencia de imágenes que deseas utilizar para tu animación.

• Sube tus imágenes:
  Ahora, sube las imágenes que obtuviste de tu video. Esto puede llevar un poco de tiempo, dependiendo de qué tan rápido sea tu Internet.

Paso 5: personaliza la animación

• Ajustar la configuración de animación:
  Una vez cargadas todas las imágenes, puede cambiar algunas configuraciones. Puede elegir cuándo comienza y termina la animación mientras se desplaza.
• Elija el tipo de animación:
  Decide si quieres que la animación permanezca en un lugar (fija) o se mueva a medida que el usuario se desplaza hacia abajo en la página (estática).

Paso 6: Vista previa y guardar

• Comprueba tu animación:
  Antes de finalizar todo, haz clic en el botón de vista previa para ver cómo se ve tu animación.
• Publica tu animación:
  Si le gusta lo que ve, haga clic en el botón Publicar para que su animación esté disponible en su sitio.

Paso 7: utilice la animación en su sitio web

• Obtenga el código corto:
  Después de publicar, regrese al menú Scrollsequence . Encontrarás un shortcode (un código especial) para tu nueva animación.

• Pegue el código corto:
  Copie este código corto y péguelo en cualquier página o publicación donde desee que aparezca la animación. Puedes agregar tantas animaciones como quieras en la misma página.

¡Ahora su sitio de WordPress tiene una animación de desplazamiento divertida e interactiva!

Agregue animación de desplazamiento en WordPress usando Elementor

En el método anterior, utilizamos un vídeo en lugar de imágenes, pero en este método de Elementor adoptaremos un enfoque diferente.

La imagen se moverá de un lado de la pantalla al otro a medida que los usuarios se desplacen hacia abajo en la página. Así es como puedes hacerlo usando imágenes fijas en lugar de videos con Elementor.

Paso 1: crea una nueva página

• Comience creando una nueva página en su sitio de WordPress.

Paso 2: editar con Elementor

• Haga clic en Editar con Elementor . Elementor es un creador de páginas que te ayuda a diseñar tus páginas fácilmente.

Paso 3: inserta una imagen

• Una vez en el editor de Elementor, busque la opción para insertar una imagen en la página.
• Consejo: la animación funciona mejor con una imagen transparente. Puede utilizar un archivo PNG (que admite transparencia) o SVG (que también es un formato vectorial).

Paso 4: establecer el tamaño de la imagen

• Ajusta el tamaño de tu imagen. Asegúrate de que sea lo suficientemente grande para que las personas puedan notar el movimiento cuando se desplazan. Por ejemplo, puedes configurarlo en tamaño Mediano , que ronda los 300 x 300 píxeles .

Paso 5: seleccione la imagen

• Haga clic en la imagen que acaba de agregar para seleccionarla.

Paso 6: acceda a la configuración avanzada

• Busque la pestaña Avanzado en la configuración en el lado izquierdo del editor Elementor.

Paso 7: habilite los efectos de movimiento

• Desplácese hacia abajo para encontrar Efectos de movimiento .
• Active los efectos de desplazamiento . Esto te permitirá agregar movimiento a tu imagen.

Paso 8: Establecer la dirección de desplazamiento horizontal

• Como desea que su imagen se mueva por la página, busque la opción denominada Desplazamiento horizontal .
• Cambie la configuración de Dirección a Hacia la derecha . Esto significa que la imagen se moverá de izquierda a derecha a medida que el usuario se desplaza hacia abajo en la página.

Paso 9: prueba el efecto

• Desplácese hacia abajo en la página para ver cómo se mueve su imagen. Este es un ejemplo simple, pero le muestra lo fácil que es crear un efecto atractivo.

Notas adicionales

• También puedes usar el complemento Scrollsequence para agregar animaciones de desplazamiento similares en Elementor.
• Si tiene Elementor Pro , incluye una función incorporada para efectos de desplazamiento fijo, pero esto puede ser más limitado en comparación con otras opciones.

Agregue animación de desplazamiento en WordPress usando Divi

En caso de que no seas usuario de Elementor pero uses Divi, aún puedes crear un efecto similar.

Así es como puedes hacerlo.

Por ejemplo, estamos considerando un sitio web de fútbol.

Paso 1: crea una nueva página

Lo primero que debe hacer es crear una página nueva y seleccionar Divi Page Builder. Esto le permitirá diseñar su página utilizando las funciones de Divi.

Paso 2: elija un diseño (opcional)

• Ahora, para hacer las cosas un poco más rápido, elija los diseños prediseñados de Divi. Por ejemplo, seleccione un diseño para un sitio de entrenamiento de tenis .

Paso 4: agrega tu imagen

• Para crear el efecto de desplazamiento, necesitarás una imagen. En este ejemplo, utilizará una imagen de partitura.
• Asegúrese de que la imagen de la partitura tenga un fondo transparente (el formato PNG funciona mejor). Sube esta imagen a tu página.

Paso 5: acceda a la configuración de imagen

• Haga clic en la imagen de partitura que acaba de agregar para abrir su configuración.
• Busque la pestaña Avanzado en el menú de configuración.

Paso 6: habilite los efectos de desplazamiento

• En la configuración avanzada, busque la sección Efectos de desplazamiento .
• Verás diferentes opciones para efectos de desplazamiento.

Paso 7: elige tus efectos

• Seleccione el efecto que prefiera tener.
• Además, habilite el efecto de movimiento horizontal para hacer que la imagen de la partitura se mueva de un lado a otro de la pantalla a medida que los usuarios se desplazan hacia abajo.

Paso 8: prueba tu movimiento de desplazamiento

• Después de configurar los efectos, desplácese hacia abajo en la página para ver cómo se mueve la imagen de la partitura.

Paso 9: guarde sus cambios

• Una vez que esté satisfecho con su apariencia, asegúrese de guardar los cambios.
• Luego, haga clic en Publicar para que su página esté activa con el nuevo efecto de desplazamiento.

Agregue animación de desplazamiento básica y suave en WordPress usando etiquetas Anchor y CSS

Este método no ofrece opciones sofisticadas para agregar animaciones de desplazamiento en WordPress, pero puede ayudarlo a agregar animaciones simples a su sitio de WordPress de la manera más fácil.

Para ello, debe utilizar etiquetas de anclaje, que generalmente se utilizan para ayudar a los visitantes a acceder a contenido específico en la misma página. Sin embargo, el problema es que, de forma predeterminada, la animación de desplazamiento parece torpe o abrupta.

Pero podemos hacer que este movimiento sea suave, dando a los lectores la sensación de un pergamino animado en lugar de un salto repentino.

Así es como puedes hacerlo.

Paso 1 : configure etiquetas de anclaje : primero debe crear una sección de su página a la que "saltar". Esto se hace agregando una palabra (etiqueta de anclaje) en el campo Ancla HTML, que actúa como destino para el enlace.

Paso 2 : cree el enlace : vincule la etiqueta de anclaje a algún texto o botón de la página. El enlace debe escribirse con un hashtag seguido del texto ancla (por ejemplo, #sección1).

Paso 3 : publique la página : cuando publique la página, al hacer clic en el enlace accederá a la etiqueta de anclaje, pero puede parecer abrupto.

Paso 4 : Solucionarlo con un desplazamiento suave : Para que el desplazamiento sea suave, agregue una pequeña porción de código CSS (comportamiento de desplazamiento: suave) a la sección "CSS adicional" en WordPress.

html{
scroll-behavior: smooth;
}

Este código hace que el movimiento de desplazamiento sea gradual y visualmente agradable, como si estuviera animado.

Una vez que publique la página nuevamente, al hacer clic en el enlace se producirá un desplazamiento suave y animado hasta el ancla en lugar de un salto abrupto.

Conclusión

Ahora ha aprendido que agregar animaciones de desplazamiento a un sitio de WordPress no requiere ninguna habilidad técnica especial ni asistencia del desarrollador. Un simple complemento o creador de páginas es suficiente para ayudarlo a crear páginas dinámicas y atractivas en cuestión de minutos.

Para obtener los mejores resultados, también puede combinar los métodos mencionados anteriormente para lograr resultados aún mejores, atrayendo y reteniendo más tráfico a su sitio web.

Si tiene alguna consulta o desea compartir su valiosa opinión, háganoslo saber en la sección de comentarios a continuación.

Raúl

Rahul Kumar es un entusiasta de la web y estratega de contenidos especializado en WordPress y alojamiento web. Con años de experiencia y el compromiso de mantenerse actualizado con las tendencias de la industria, crea estrategias en línea efectivas que generan tráfico, aumentan la participación y aumentan las conversiones. La atención de Rahul al detalle y su capacidad para crear contenido atractivo lo convierten en un activo valioso para cualquier marca que busque mejorar su presencia en línea.