¿Has visto esas hermosas animaciones CSS en sitios populares? Efectos animados como contenido deslizante, desvanecimiento en cuadros de funciones, imágenes que rebotan, etc. En este artículo, le mostraremos cómo agregar fácilmente animaciones CSS en WordPress sin escribir ningún código.
¿Cuándo y por qué debería usar animaciones CSS?
Las animaciones CSS le permiten captar la atención del usuario en diferentes partes de la página.
Puede usarlos para animar funciones de productos o un botón de llamada a la acción.
Muchos sitios web usan animaciones CSS cuando los usuarios se desplazan hacia abajo en una página. Esto agrega un elemento narrativo a la página con elementos que progresan a medida que los usuarios se desplazan hacia abajo.
Las animaciones CSS también son más rápidas que flash o videos. Se cargan rápidamente y son compatibles con la mayoría de los navegadores web modernos.
Puede agregar animaciones CSS manualmente a su tema de WordPress o a la hoja de estilo del tema secundario. Sin embargo, la mayoría de los principiantes no quieren editar sus archivos de temas ni dedicar tiempo a aprender CSS.
Habiendo dicho eso, veamos cómo puede agregar fácilmente animaciones CSS a su sitio de WordPress.
¡Configurando CSS Animate! Enchufar
Usaremos un complemento para este tutorial. Te permite crear animaciones CSS utilizando un editor WYSIWYG.
Lo primero que debe hacer es instalar y activar el ¡Animalo! enchufar. El complemento funciona de forma inmediata y no hay configuraciones para configurar.
Simplemente cree una nueva publicación y notará un nuevo botón en su editor visual de WordPress con la etiqueta ‘¡Animarlo!’.
Al hacer clic en el botón, aparecerá una ventana emergente donde puede diseñar su animación CSS. El complemento admite muchas animaciones CSS para que elijas.
Primero debe seleccionar un estilo de animación. Después de eso, debe elegir el retraso de la animación y el tiempo de duración. Finalmente, debe seleccionar cuándo desea que aparezca la animación.
El pluginofrece tres opciones. Puede ejecutar la animación al hacer clic, pasar el mouse o desplazar el desplazamiento.
Una vez que esté satisfecho con la configuración, puede hacer clic en el botón Animar para ver una vista previa de la animación.
A continuación, haga clic en el botón Insertar para agregar la animación a su publicación o página de WordPress. Notará que el complemento agregará un código abreviado con contenido ficticio dentro del editor de publicaciones.
Debe eliminar el contenido ficticio dentro del código abreviado y reemplazarlo con su propio contenido, imágenes o cualquier otra cosa que desee animar.
Ahora que está abajo, haga clic para guardar o publicar la publicación y luego haga clic en el botón de vista previa. Verás tu contenido maravillosamente animado.
Esperamos que este artículo te haya ayudado a aprender cómo agregar fácilmente animaciones CSS en WordPress. Es posible que también desee ver nuestra comparación de los 5 mejores creadores de páginas de WordPress de arrastrar y soltar.
.