| daniel

Cómo agregar fácilmente animaciones CSS en WordPress

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

 

Tabla de precios animada con CSS

 

¿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 características del producto o un botón de llamada a la acción.

 

Muchos sitios web usan animaciones CSS a medida que los usuarios se desplazan hacia abajo en una página. Esto agrega 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 también son más rápidas que el flash o los 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 la hoja de estilo del tema secundario . Sin embargo, la mayoría de los principiantes no desean editar sus archivos de temas o dedicar tiempo a aprender CSS.

 

Habiendo dicho eso, veamos cómo puedes agregar fácilmente animaciones CSS a tu sitio de WordPress.

 

Configurando CSS Animate! Enchufar

 

Utilizaremos un complemento para este tutorial. Le permite crear animaciones CSS usando un editor WYSIWYG.

 

Lo primero que debe hacer es instalar y activar Animate it! enchufar. El complemento funciona de la caja y no hay configuraciones para que usted configure.

 

Simplemente crea una nueva publicación y verás un nuevo botón en tu editor visual de WordPress con la etiqueta “¡Anímalo!”.

 

Anítalo botón en el editor visual de WordPress

 

Al hacer clic en el botón se abrirá una ventana emergente donde puede diseñar su animación CSS. El complemento admite muchas animaciones CSS para que pueda elegir.

 

Editor de animación

 

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

 

El complemento ofrece tres opciones. Puede ejecutar la animación al hacer clic, desplazarse o desplazar desplazamiento.

 

Seleccione cuándo ejecutar la animación

 

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ás que el complemento agregará un shortcode con contenido ficticio dentro del editor de publicaciones.

 

CSS animateit! shortcode en el editor de la publicación

 

Debe eliminar el contenido ficticio dentro del shortcode y reemplazarlo con su propio contenido, imágenes o cualquier otra cosa que quiera animar.

 

Reemplace contenido ficticio dentro de shortcode con su propio contenido

 

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 bellamente animado.

 

Esperamos que este artículo lo ayude a aprender cómo agregar fácilmente animaciones CSS en WordPress.

[shared_counts]
Únete a 208,419 suscriptores

Obtenga acceso exclusivo a nuevos consejos, artículos, guías, actualizaciones y más.

Confidencialidad. Nunca SPAM. Puedes darte de baja cuando quiera.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *