Cómo agregar fácilmente animaciones CSS en WordPress

¿Has visto esas hermosas animaciones CSS en sitios populares? Efectos animados como contenido deslizante, fundidos en cajas de características, imágenes rebotadas, etc. En este artículo, le mostraremos cómo añadir fácilmente animaciones CSS en WordPress sin escribir ningún código.

¿Cuándo y por qué debería utilizar animaciones CSS?

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

Puede utilizarlos para animar las características del producto o un botón de llamada a la acción.

Muchos sitios web utilizan animaciones CSS a medida que los usuarios se desplazan por una página. Esto añade un elemento de narración a la página con elementos que progresan a medida que los usuarios se desplazan hacia abajo.

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

Puede agregar animaciones CSS manualmente al tema de WordPress o a la hoja de estilo del tema hijo. Sin embargo, la mayoría de los principiantes no quieren editar sus archivos de temas ni dedicar tiempo al aprendizaje de CSS.

Dicho esto, veamos cómo puedes añadir fácilmente animaciones CSS a tu sitio de WordPress.

Configurando CSS Animate! Plugin

Usaremos un plugin para este tutorial. Permite crear animaciones CSS utilizando un editor WYSIWYG.

Lo primero que tienes que hacer es instalar y activar el plugin Animate it! El plugin funciona desde el primer momento y no hay ajustes que puedas configurar.

Simplemente crea un nuevo mensaje, y notarás un nuevo botón en tu editor visual de WordPress que dice¡Anímalo!

Al hacer clic en el botón se abrirá una ventana emergente donde podrá diseñar su animación CSS. El plugin soporta muchas animaciones CSS para que usted elija.

Primero necesita seleccionar un estilo de animación. A continuación, debe elegir el tiempo de retardo de la animación y el tiempo de duración. Por último, debe seleccionar cuándo desea que aparezca la animación.

El plugin ofrece tres opciones. Puede ejecutar la animación haciendo clic, pasando el ratón por encima o desplazando el cursor.

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, haz clic en el botón Insertar para añadir la animación a tu post o página de WordPress. Notarás que el plugin agregará un código abreviado con algún contenido falso dentro de él en el editor de post.

Necesitas eliminar el contenido falso dentro del código abreviado y reemplazarlo con tu propio contenido, imágenes o cualquier otra cosa que quieras animar.

Ahora que estás abajo, haz clic para guardar o publicar el mensaje y luego haz clic en el botón de vista previa. Verá su contenido bellamente animado.

Esperamos que este artículo le haya ayudado a aprender a añadir fácilmente animaciones CSS en WordPress. También puede ver nuestra comparación de los 5 mejores creadores de páginas de WordPress.

Si te ha gustado este artículo, suscríbete a nuestros tutoriales de vídeo de YouTube Channel for WordPress. También puede encontrarnos en Twitter y Facebook.