¿Has visto esas hermosas animaciones CSS en sitios web populares? Efectos animados como contenido deslizante, cuadros de función de desvanecimiento, imágenes que rebotan y más. En este artículo, le mostraremos cómo agregar fácilmente animaciones CSS en WordPress sin escribir ningún código.

Tabla de precios usando animación CSS

¿Cuándo y por qué se deben usar animaciones CSS?

Las animaciones CSS te permiten captar la atención del usuario en diferentes partes de la página.

Puede usarlos para animar funciones de productos o botones de llamada a la acción.

Muchos sitios web usan animaciones CSS cuando el usuario se desplaza hacia abajo en la página. Esto agrega un elemento narrativo a la página y el proyecto continúa a medida que el usuario se desplaza hacia abajo.

Las animaciones CSS también son más rápidas que Flash o video. Se cargan rápidamente y son compatibles con la mayoría de los navegadores web modernos.

Puede agregar manualmente animaciones CSS 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 agregar fácilmente animaciones CSS a un sitio de WordPress.

¡Configura animaciones CSS!insertar

Usaremos complementos en este tutorial. Te permite crear animaciones CSS utilizando un editor WYSIWYG.

Lo primero que debe hacer es instalar y activar Animate it! insertar. El complemento funciona de forma inmediata y no es necesario configurar ningún ajuste.

Simplemente cree una nueva publicación y verá un nuevo botón en el editor visual de WordPress con la etiqueta “¡Animarlo!”.

Botones animados en el editor visual de WordPress

Al hacer clic en el botón, aparecerá una ventana emergente donde puede diseñar animaciones CSS. El complemento admite una variedad de animaciones CSS para que elijas.

editor de animación

Primero, debe elegir un estilo de animación. Después de eso, debe elegir el retraso y la duración de la animación. Finalmente, debe elegir cuándo desea que aparezca la animación.

El plugin ofrece tres opciones. Puede ejecutar animaciones al hacer clic, pasar el mouse o desplazar el desplazamiento.

Elija cuándo ejecutar la animación

Una vez que esté satisfecho con la configuración, puede hacer clic en el botón “Animarlo” 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ás que el complemento agregará un código abreviado con contenido ficticio al editor de publicaciones.

¡Animaciones CSS!Códigos cortos en el editor de publicaciones

Debe eliminar el contenido ficticio en el código abreviado y reemplazarlo con su propio contenido, una imagen o cualquier otra cosa que desee animar.

Reemplace contenido ficticio en códigos cortos con su propio contenido

Ahora que está cerrado, haga clic para guardar o publicar la publicación, luego haga clic en el botón Vista previa. Verás una bonita animación del contenido.

Esperamos que este artículo te haya ayudado a aprender cómo agregar fácilmente animaciones CSS en WordPress. También puede consultar nuestra comparación de los 5 mejores creadores de páginas de WordPress de arrastrar y soltar.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para videos tutoriales de WordPress.También puedes encontrarnos en Gorjeo y Facebook.

Los datos expuestos en este sitio web son de índole informativo, no necesariamente están actualizados. Esta información es una recopilación de información de internet.