¿Quieres añadir animación a WordPress?
Hay unas cuantas buenas razones para hacerlo: las animaciones te ayudan a crear una historia de marca que sea atractiva, sobresalir entre la competencia y reducir los porcentajes de rebote. ¿Y lo mejor? No necesitas saber programar o diseñar. WordPress tiene muchísimas extensiones que puedes utilizar para añadir movimiento fácilmente a tus sitios.
Estas son las diez mejores extensiones de animación que puedes descargar ahora mismo:
1. LottieFiles - Bloque Lottie para Gutenberg
No es por echarnos flores, pero la extensión de LottieFiles para WordPress es una de las maneras más fáciles de añadir elementos de diseño en movimiento a tu sitio.
Esta extensión te permite buscar miles de animaciones Lottie gratis, las cuales están en formatos de archivo superligeros. Esto se traduce en tiempos de carga más rápidos para tu sitio. Luego, insertarlos en WordPress con unos cuantos clics. Configura eventos personalizados fácilmente (como el cursor, hacer clic o desplazarte) para activar su reproducción. Incluso puedes añadir tus propias clases CSS para personalizar la apariencia de un Lottie. Para más información, lee nuestra guía sobre añadir y personalizar las animaciones Lottie en WordPress.
Tipos de animaciones: Miles de animaciones gratuitas para cualquier uso concreto e industria, ya sea que estés buscando iconos animados, ilustraciones, animaciones de carga y más.
Usos concretos: Si necesitas añadir animaciones ligeras o animaciones que respondan a un clic, al pasar el cursor o deslizamiento. También puede utilizarse para añadir animaciones como fondo.
Precio: Gratis
2. SVG Support
Las animaciones SVG (Gráficos Vectoriales Redimensionables) pueden ser complicadas en WordPress, pero la extensión SVG Support tiene el objetivo de eliminarlo. Te permite cargar archivos SVG como imágenes en tu biblioteca de medios, después te deja diseñarlas o animarlas con CSS y JavaScript.
Si te estás preguntando cuándo utilizar una animación SVG o Lottie, echa un vistazo a nuestra guía para estos tipos de archivo aquí.
Tipos de animaciones: Cualquier animación SVG que quieras cargar y con el cual quieras trabajar.
Usos concretos: Si necesitas una manera simple de integrar los archivos SVG.
Precio: Gratis
3. Slider Hero
La extensión Slider Hero añade un aspecto de "cine" a tu sitio, ofreciendo más de 80 efectos de animación de fondo y audio que pueden añadir una dimensión nueva al texto o a páginas estáticas.
Tipos de animaciones: Deslizadores, carruseles de texto, fondos de video y animaciones de texto.
Usos concretos: Si quieres crear cabeceras animadas para tu sitio web, o atractivos anuncios en banners.
Precio: Versión gratis y tres actualizaciones de $29, $59 y $79
4. Superfly
Superfly te permite crear fácilmente menús de navegación animados mientras ofrece muchísimos estilos diferentes. Habitualmente, los menús animados exigen conocimientos de CSS y JavaScript para crearse, por lo que esta extensión puede ahorrarte mucho tiempo y esfuerzo.
Tipos de animación: Menús de navegación animados en diferentes estilos: pantalla completa, minimalista, siempre visible y más.
Usos concretos: Si quieres un menú animado para reemplazar o complementar tu menú estático.
Precio: $29
5. Transition Slider
¿Conseguiste un deslizador de imágenes o videos en tu sitio? La extensión Transition Slider ofrece 47 plantillas con efectos de transición personalizables para estos deslizadores. Los deslizadores suelen estar a merced de buenas imágenes o videos, pero estos efectos pueden añadir una nueva y atractiva dimensión a lo que ya tienes.
Tipos de animaciones: Los efectos incluyen deformación, hacer zoom, desvanecer, estiramiento, fundido cruzado y desenfoque.
Usos concretos: Si quieres añadir transiciones animadas a un deslizador de imagen o video.
Precio: Versión gratis y una actualización de $35
6. Animate It!
La extensión Animate It! permite que se utilicen más de 50 animaciones CSS en las páginas, publicaciones y widgets de tu sitio.
Tipos de animaciones: Estas son animaciones pequeñas y nítidas que añaden un movimiento dinámico a elementos estáticos.
Usos concretos: Si quieres añadir movimiento a elementos estáticos, como iconos o texto.
Precio: Gratis
7. Image Hover Effects Ultimate
La extensión Image Hover Effects Ultimate te permite incluir animaciones atractivas cuando un usuario pasa el cursor sobre las imágenes de tu sitio.
Tipos de animaciones: Esta incluye ocho efectos para el cursor, cada uno con sus propias variaciones, las cuales permiten que los cuadros se volteen, entren y salgan en espiral, que aparezcan textos y comparaciones de imágenes deslizantes.
Usos concretos: Esta es una excelente extensión si quieres crear imágenes en un portafolio o para que una galería destaque.
Precio: $19.99, $49.99, $199.99
8. Blocks Animation: CSS For Gutenberg Blocks
Como sabes, los bloques Gutenberg se utilizan para crear diseños de contenido para WordPress. La extensión Blocks Animation te permite añadir animaciones CSS a cualquiera de esos bloques de tu sitio. Pero no es necesario que escribas CSS desde cero, ya que la extensión ofrece una variedad de opciones que puedes añadir con unos cuantos clics.
Tipos de animación: Elige entre diferentes estilos de animación, como rebote, bamboleo, destello, desvanecimiento y banda elástica.
Usos concretos: Si quieres añadir animaciones simples a cualquier bloque Gutenberg.
Precio: Gratis
9. Advanced Typing
La extensión Advanced Typing hace una cosa y la hace muy bien: simula la imagen de alguien tecleando palabras en tu sitio. Incluso, puedes "humanizarla" haciendo que la animación se equivoque o retroceda para borrar, y puede utilizar la tipografía que quieras, y en cualquier tamaño.
Usos concretos: La animación es muy específica, pero perfecta para frases en el encabezado de tu sitio web.
Precio: $12
10. WebP Converter for Media
La extensión WebP Converter for Media en realidad no añade animación a tu sitio. Más bien, lo agiliza convirtiendo imágenes en formatos AVIF y WebP. Estos formatos de archivo son considerablemente más ligeros que formatos de animación estándar como los GIFs.
Por supuesto, si tu sitio web utiliza mucha animación, considera cambiarte a Lottie. Una animación Lottie es superligera, ¡y en promedio es 600% más pequeña que un GIF!
Usos concretos: Si tu sitio utiliza JPEG, PNG y GIF, y quieres optimizarlos para tener velocidades de carga rápidas.
Precio: Versión gratis y varias actualizaciones, desde $5 hasta $1500
Añade la magia del movimiento a WordPress
Espero que esta lista te haya dado unas cuantas ideas sobre cómo puedes animar tus sitios en WordPress. Estas extensiones hacen que añadir movimiento sea fácil, incluso si no puedes programar o diseñar. Y si estás buscando más inspiración, aquí están algunos impresionantes sitios en WordPress que utilizan animaciones Lottie.
Entonces, ¿qué estás esperando? ¡Construye con WordPress!
