¡Hola amigos! Soy Carlos y en el vídeo de hoy les voy a enseñar cómo crear sus propias animaciones personalizadas en Elementor. Estas animaciones son aquellas que aplicamos a contenedores o widgets para añadir efectos de movimiento y darle vida a nuestros diseños. Para hacerlo más sencillo, me referiré específicamente a las animaciones de entrada al hacer scroll.
Preparación
Antes de comenzar, necesitaremos acceder a una biblioteca de animaciones CSS. Recomiendo usar Animista, una plataforma que ofrece una amplia gama de efectos animados predefinidos. Visita Animista para explorar las animaciones disponibles. Selecciona la animación que deseas utilizar y toma nota de su nombre y variaciones.Configuración en Elementor
Añadiendo las animaciones CSS Accede al panel de WordPress y ve a «Apariencia» > «Personalizar». Navega hasta «CSS Adicional». Borra cualquier código existente y pega la clase CSS de la animación que seleccionaste en Animista. Copia los «keyframes» proporcionados por Animista y pégalo también en la misma sección.Implementación en Elementor
Instalando el plugin Code Snippets Instala el plugin gratuito Code Snippets desde el repositorio de WordPress. Activa el plugin y navega hasta la sección «Fragmentos de Código» en el menú de WordPress. Creando funciones para aplicar animaciones Crea un nuevo fragmento de código y asigna un título descriptivo, como «Función para aplicar mis animaciones». Copia y pega el código PHP proporcionado en la descripción del vídeo o tutorial.Configuración de animaciones personalizadas
Dentro del fragmento de código, define el título para tu conjunto de animaciones personalizadas. Pega la clase de la animación CSS que copiaste de Animista. Define un título para la animación en el selector, por ejemplo, «Flip In».Aplicación en Elementor
Actualiza la página de Elementor para que se apliquen los cambios. Añade un elemento al diseño de Elementor, como una imagen o un widget de texto. Accede a las opciones avanzadas del elemento y selecciona la animación personalizada que creaste. Ajusta la duración y el retardo de la animación según tus preferencias. Publica la página y comprueba la animación al hacer scroll. ¡Y eso es todo! Ahora tienes la capacidad de añadir tus propias animaciones personalizadas a tus diseños de Elementor. Recuerda experimentar con diferentes efectos y variaciones para crear experiencias visuales únicas. Espero que este tutorial haya sido útil para ti. Si te gustó el vídeo, no olvides dejar un like, suscribirte al canal y activar las notificaciones para más contenido como este. ¡Nos vemos en próximos vídeos!
function my_entrance_animations() {
return array(
'Animaciones personalizadas' => [
'rotate-scale-up' => 'rotación y escalado izquierda',
],
);
}
add_filter( 'elementor/controls/animations/additional_animations', 'my_entrance_animations' );
