Cómo Agregar AOS a Elementor: Un Tutorial Paso a Paso

Introducción

En este tutorial, te mostraremos cómo agregar AOS (Animate On Scroll) a Elementor para mejorar la interactividad y el atractivo visual de tu sitio web. AOS es una biblioteca de animaciones que permite que los elementos se animen mientras se desplazan por la página. Siguiendo estos pasos, podrás implementar AOS fácilmente en tu sitio construido con Elementor.

¿Qué es AOS?

AOS es una biblioteca de JavaScript que permite animar elementos cuando estos entran en la ventana de visualización mientras el usuario desplaza la página. Esto mejora la experiencia del usuario y hace que tu sitio sea más dinámico y atractivo.

Requisitos Previos

• Tener un sitio web construido con WordPress.
• Tener Elementor y Elementor Pro instalados y activos.
• Acceso al panel de administración de WordPress.

Paso 1: Descargar e Incluir AOS en tu Sitio

Descargar AOS

Primero, necesitas descargar la biblioteca de AOS. Ve a la página de AOS en GitHub y descarga los archivos necesarios.

Incluir AOS en tu Sitio

Sube los archivos de AOS a tu servidor. Puedes hacerlo a través de un cliente FTP o usando el administrador de archivos de tu panel de control de hosting.

1. Subir los archivos CSS y JS:
   • Sube aos.css a la carpeta wp-content/uploads/aos/ de tu sitio.
   • Sube aos.js a la misma carpeta.
2. Agregar el CSS y JS a tu Tema:
   • Ve al panel de administración de WordPress.
   • Navega a Apariencia > Editor de temas.
   • Abre el archivo functions.php de tu tema y agrega el siguiente código para incluir los archivos CSS y JS:

function enqueue_aos_scripts() {
    wp_enqueue_style('aos-css', get_stylesheet_directory_uri() . '/wp-content/uploads/aos/aos.css');
    wp_enqueue_script('aos-js', get_stylesheet_directory_uri() . '/wp-content/uploads/aos/aos.js', array(), false, true);
}
add_action('wp_enqueue_scripts', 'enqueue_aos_scripts');

Paso 2: Iniciar AOS en Elementor

Para que AOS funcione, necesitamos inicializar la biblioteca. Esto se hace con JavaScript. Podemos hacerlo utilizando un widget HTML en Elementor.

1. Abrir Elementor:
   • Ve a la página o publicación donde quieres agregar animaciones.
   • Haz clic en «Editar con Elementor».
2. Agregar un Widget HTML:
   • Arrastra un widget HTML desde el panel de Elementor a tu página.
   • En el campo del widget HTML, agrega el siguiente código:

<script>
  AOS.init();
</script>

Paso 3: Aplicar AOS a Elementos de Elementor

Ahora que AOS está incluido y activado en tu sitio, puedes comenzar a agregar animaciones a tus elementos.

1. Seleccionar un Elemento:
   • En Elementor, selecciona cualquier widget al que quieras agregar una animación.
2. Agregar Clases de AOS:
   • En la pestaña Avanzado del widget seleccionado, encontrarás un campo llamado «Clase CSS».
   • Agrega una clase de AOS, por ejemplo, aos-init y aos-animate, junto con la clase de animación específica, como aos-fade-up.

<div class="aos-init aos-animate" data-aos="fade-up">
  <!-- Contenido del widget -->
</div>

Ejemplos de Clases de AOS

• data-aos="fade-up"
• data-aos="fade-down"
• data-aos="fade-left"
• data-aos="fade-right"
• data-aos="zoom-in"

Personalización de Animaciones

Puedes personalizar las animaciones de AOS con atributos adicionales:

• Duración: data-aos-duration="1500"
• Retardo: data-aos-delay="500"
• Desplazamiento: data-aos-offset="200"

<div class="aos-init aos-animate" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="500">
  <!-- Contenido del widget -->
</div>

Conclusión

Agregar AOS a Elementor es una excelente manera de mejorar la interactividad y el atractivo visual de tu sitio web. Siguiendo estos sencillos pasos, puedes implementar fácilmente animaciones en tu sitio de WordPress utilizando Elementor. Si tienes alguna pregunta o necesitas más ayuda, no dudes en dejar un comentario abajo. ¡Feliz construcción de sitios!