¿Quieres añadir animaciones CSS en WordPress?
Puede utilizar animaciones para captar la atención del visitante y destacar el contenido más importante de una página. También pueden animar a los clientes a hacer clic en sus botones y enlaces de llamada a la acción.
En este tutorial, le mostraremos cómo puede añadir fácilmente animaciones CSS en WordPress.
¿Por qué añadir animaciones CSS en WordPress?
Puedes utilizar animaciones CSS para llamar la atención del visitante sobre distintas partes de una página. Por ejemplo, si tienes una tienda online, las animaciones pueden resaltar las características más importantes de un producto o sus mayores puntos de venta. Esto puede mejorar la experiencia del usuario y conseguir más ofertas.
Las animaciones también harán que sus CTA destaquen, lo que puede ayudarle a alcanzar un objetivo específico, como conseguir que más personas se suscriban a su boletín de correo electrónico.
Puedes añadir animaciones CSS a la hoja de estilos de tu tema o tema hijo de WordPress. Sin embargo, esto requiere mucho tiempo y esfuerzo, y puede romper el diseño e incluso el funcionamiento de tu sitio web si cometes un error.
Dicho esto, veamos cómo puedes añadir fácilmente animaciones CSS a tu sitio WordPress. Si prefiere saltar directamente a un método en particular, entonces usted puede utilizar los siguientes enlaces:
Método 1: Cómo animar fácilmente cualquier bloque de WordPress (rápido y fácil)
La forma más sencilla de añadir una simple animación CSS es mediante el uso de Bloques de Animación.
Este plugin de animación gratuito te permite añadir una animación de entrada a cualquier bloque sin tener que escribir una sola línea de CSS. También tiene una animación de tecleo y un efecto estilo teletipo que puedes añadir a texto y números.
En primer lugar, tendrás que instalar y activar el plugin gratuito. Si necesitas ayuda, consulta nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.
Una vez activado, abre cualquier página o entrada en el editor de bloques de WordPress. A continuación, simplemente haga clic en el bloque que desea animar y seleccione la pestaña “Bloque” en el menú de la derecha.
Verás que este menú tiene una nueva sección de “Animaciones”.
Simplemente haga clic para expandir la sección ‘Animaciones’, y verá tres opciones diferentes: Animaciones, Animaciones de recuento y Animaciones de mecanografía.
Las ‘Animaciones’ son efectos cortos que se reproducen una vez al cargar la página. Para añadir este tipo de animación de entrada a su blog de WordPress, sólo tiene que hacer clic en el desplegable situado junto a ‘Animación.’
Se abre un menú en el que puede elegir la animación que desea utilizar.
El editor de WordPress mostrará una vista previa de la animación, para que pueda probar diferentes opciones y ver cuál queda mejor.
Por defecto, la animación de entrada se reproducirá en cuanto se cargue la página, pero puedes añadir un retardo si lo prefieres. Si utilizas varias animaciones en la misma página, puedes incluso utilizar retardos para escalonar las animaciones y que no resulten abrumadoras.
Sólo tiene que abrir el desplegable “Retraso” y elegir una hora de la lista.
También puedes acelerar o ralentizar la animación con el menú desplegable “Velocidad”.
Mientras vas probando diferentes ajustes, puedes ver previa la animación en cualquier momento al hacer clic en “Reproducir animación”.
El plugin también tiene ‘Animaciones de recuento’ y ‘Animaciones de mecanografía’.
Las animaciones de escritura permiten animar texto, mientras que las animaciones de recuento añaden un efecto de teletipo a los números. Estas animaciones funcionan con cualquier bloque de Gutenberg compatible con texto o números, por lo que puedes utilizarlas para animar botones, leyendas de imágenes, encabezados, etc.
Para añadir cualquiera de estos efectos, empieza por resaltar el texto o los números que quieras animar. A continuación, haz clic en la flecha hacia abajo de la pequeña barra de herramientas.
Ahora puede elegir “Animaciones de recuento” o “Animaciones de mecanografía” en el menú desplegable.
Si estas opciones aparecen en gris, asegúrese de que ha resaltado el contenido correcto. Por ejemplo, no podrás seleccionar “Contar animación” si solo has resaltado texto.
Después de añadir la animación, puede cambiar la velocidad y añadir un retardo opcional utilizando los menús desplegables de la pequeña ventana emergente.
Por ejemplo, en la siguiente imagen, estamos utilizando un retardo de un segundo.
Cuando esté listo para activar la animación CSS, haga clic en el botón “Publicar” o “Actualizar” para aplicar las animaciones en su sitio. Ahora, si visitas tu sitio web WordPress, verás la animación en vivo.
Método 2: Cómo añadir animaciones CSS a páginas personalizadas (Recomendado)
Si quieres añadir animaciones simples a los bloques incorporados en WordPress, entonces Blocks Animation es una buena opción. Sin embargo, si quieres realmente captar la atención del visitante, mantener a la gente en su sitio web, y obtener más conversiones, entonces le recomendamos que utilice SeedProd.
SeedProd es el mejor plugin maquetador de páginas que le permite crear hermosas páginas de destino, páginas de ventas, una página de inicio, y mucho más usando un simple editor de arrastrar y soltar.
También incluye un bloque “Titular animado” con el que puede crear titulares animados que giran y se resaltan.
A pesar de su nombre, puede utilizar el bloque Titular animado para animar cualquier texto, incluida una llamada a la acción, un subtítulo o cualquier otro texto que desee destacar.
SeedProd también viene con más de 40 animaciones de entrada que puede añadir a cualquier bloque, incluyendo imágenes, texto, botones, vídeos y mucho más.
Incluso puedes animar secciones y columnas enteras con sólo unos clics. De este modo, podrá crear atractivas páginas animadas en cuestión de minutos.
Si está utilizando animaciones para obtener más conversiones y ofertas, entonces SeedProd se integra con WooCommerce. También es compatible con muchos de los principales servicios de marketing por correo electrónico que ya puede estar utilizando para promover su sitio web.
Cómo configurar el maquetador de páginas SeedProd
Lo primero que tienes que hacer es instalar y activar SeedProd. Para más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Tras la activación, deberá introducir su clave de licencia.
Puede encontrar esta información en su cuenta del sitio web de SeedProd. Después de añadir la clave de licencia, simplemente haga clic en “Verificar clave”.
Crear un diseño de página personalizado
Para empezar, vaya a SeedProd ” Páginas de destino y haga clic en “Añadir nueva página de destino”.
En la pantalla siguiente, se le pedirá que elija una plantilla.
SeedProd viene con más de 180 hermosas plantillas que se organizan en diferentes categorías, tales como plantillas de páginas 404 y personalizadas WooCommerce ‘gracias’ páginas.
En esta guía, le mostraremos cómo crear una página de ventas con texto animado y animaciones de entrada, pero los pasos serán similares independientemente del tipo de página que cree.
Basta con hacer clic en cualquier pestaña para ver las distintas plantillas dentro de esa categoría.
Cuando encuentres una plantilla que quieras utilizar, sólo tienes que pasar el cursor por encima y hacer clic en el icono de la marca de verificación.
Estamos utilizando la plantilla ‘Zen Sales Page’ en todas nuestras imágenes, pero puede utilizar cualquier plantilla.
A continuación, debe dar un título a la página.
SeedProd creará automáticamente una URL basada en el título de la página, pero puede cambiarla por la que desee. Por ejemplo, añadir palabras clave relevantes a una URL a menudo puede mejorar el SEO de WordPress y ayudar a que la página aparezca en los resultados de búsqueda relevantes.
Para obtener más información, consulte nuestra guía sobre cómo realizar búsquedas de palabras clave para su blog de WordPress.
Cuando estés satisfecho con el título y la URL, haz clic en “Guardar y empezar a editar la página”.
Esto cargará el editor de páginas arrastrar y soltar de SeedProd.
A la derecha, verá una vista previa en directo del diseño de la página, con algunos ajustes a la izquierda.
SeedProd viene con un montón de bloques que puedes añadir a tu diseño, incluyendo bloques que te permiten añadir botones para compartir en redes sociales, vídeos, formularios de contacto y mucho más.
Para más información, consulte nuestra guía sobre cómo crear una página personalizada en WordPress.
Cómo añadir texto animado a WordPress
Para añadir texto animado a la página, busque el bloque Titular animado y arrástrelo al diseño de su página.
Hay dos formas de animar un titular. En primer lugar, el estilo “Resaltado” añade una animación de forma al texto, como un círculo o un zigzag subrayado.
Puede utilizar esta animación para llamar la atención sobre una palabra o frase concreta dentro del titular. Esto puede hacer que su titular sea más fácil de leer y entender al resaltar el contenido más importante. También es una buena forma de llamar la atención sobre una llamada a la acción.
El estilo Resaltado también tiene algunas formas de tachado.
Puede utilizar el tachado para crear efectos interesantes y llamativos, o simplemente puede añadir algo de diversión a su diseño.
Para crear una animación Resaltada, basta con abrir el desplegable ‘Estilo’ y seleccionar ‘Resaltada’.
A continuación, abra el menú desplegable “Forma” y elija una forma. Al hacer clic en una forma, SeedProd mostrará una vista previa de esa animación para que pueda probar diferentes formas para ver cuál le gusta más.
SeedProd también dispone de un estilo de animación “Giratorio”, que añade un efecto de transición al texto.
A menudo, el texto animado es lo primero que ven los visitantes cuando se carga una página, por lo que es una forma estupenda de resaltar el fragmento de texto más importante.
Para crear una animación de transición, basta con abrir el desplegable “Estilo” y hacer clic en “Girar”.
A continuación, puede abrir el menú desplegable “Animación” y elegir el tipo de transición que desea utilizar, como fundido, ampliar / acercar o rodar. Una vez más, SeedProd reproducirá la animación dentro del editor de páginas, por lo que puede probar diferentes efectos para ver cuál prefiere.
No importa si estás creando una animación ‘Resaltada’ o ‘Giratoria’, puedes añadir texto antes y después del texto animado.
Sólo tiene que escribir en los campos “Antes del titular” y “Después del titular”. En el campo “Texto”, añada la palabra o frase que desea animar.
Si desea animar todo el titular, deje vacíos los campos “Antes del titular” y “Después del titular”.
Por defecto, SeedProd reproducirá la animación en bucle, lo que puede resultar molesto para algunos visitantes.
Para reproducir la animación solo una vez, haz clic para desactivar el interruptor de “Bucle infinito”.
Por defecto, la animación se reproducirá durante 1200 milisegundos tras un retardo de 8000 milisegundos.
Para utilizar valores diferentes, escriba en los campos ‘Duración’ y ‘Retraso’. Por ejemplo, puede hacer que la animación sea más rápida utilizando una duración más corta.
También puede dar estilo al texto. Por ejemplo, puede cambiar el tamaño de la fuente y la alineación.
Cuando estés satisfecho con el aspecto del titular animado, sigue adelante y haz clic en el botón “Guardar” para guardar los cambios.
Añadir animaciones de entrada en WordPress
Las animaciones de entrada se reproducen cuando la página se carga por primera vez, por lo que son una excelente forma de captar la atención del visitante.
También puede utilizarlos para resaltar el contenido que los visitantes deben ver primero. Por ejemplo, si tiene un mercado online, puede animar la imagen completa del producto o el banner que anuncia su oferta del Black Friday.
Dentro del editor SeedProd, simplemente haga clic en el contenido que desea animar y luego seleccione la pestaña “Avanzado” en el menú de la izquierda.
A continuación, puede seguir adelante y hacer clic para ampliar la sección “Efectos de animación”.
A continuación, elija una animación en el menú desplegable “Animación de entrada”.
Ahora puede añadir animaciones de entrada a cualquier bloque, sección o columna simplemente siguiendo el mismo proceso descrito anteriormente.
Publique sus animaciones CSS en WordPress
Cuando esté satisfecho con cómo ha establecido la página, haga clic en el menú desplegable del botón “Guardar” y seleccione “Publicar”.
Ya puedes visitar esta página para ver las animaciones CSS en directo.
Esperamos que este artículo te haya ayudado a aprender cómo añadir animaciones CSS en WordPress. También puedes consultar nuestra guía definitiva para aumentar la velocidad y el rendimiento o nuestra lista de los errores más comunes de WordPress y cómo corregirlos.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Wissam Giroud says
Can we use animation on a free plan website in wordpress? I am unable to use plugin as it prompts me to upgrade to business plan
WPBeginner Support says
Our tutorials are for WordPress.org sites not WordPress.com sites, for a better understanding of the two, you would want to take a look at our article below:
https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
You would need the plan level that allows plugins to install plugins on WordPress.com
Administrador
vishnu says
How to add animation text on home page feature image
WPBeginner Support says
You would want to reach out to the plugin’s support and they should be able to assist
Administrador
amy says
does this only work for blog posts? i dont see the animate it icon for website pages.
WPBeginner Support says
It should work on pages as well. If it is not appearing you would want to reach out to the plugin’s support and they should be able to assist
Administrador
twinkle chandan says
how to add these in image block or any other block
WPBeginner Support says
You would want to reach out to the plugin’s support for their plans to support the block editor
Administrador
dimiter kirov says
Does it have Gutenberg integration?
WPBeginner Support says
It looks like the plugin is currently updated to work with Gutenberg
Administrador
Aditi says
Hello support team Recently I’m working on wordpress theme my theme already have animation box at staring of page loading I just want to change its color. what should I do…? suggest me any css trick
WPBeginner Support says
You could use inspect element to see what needs changed: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Or reach out to your theme’s support and they should be able to let you know
Administrador
Muneeb says
Thank You
WPBeginner Support says
You’re welcome
Administrador
Leo August says
Good article. I was looking for something just like this. One question, I’d like to use the animation used in the pricing table example at the top of the article, but I don’t see anything in Animate It that matches it. Which animation and settings does that example use?
WPBeginner Support says
Hi Leo,
We used fadeIn effect.
Administrador
Catherine says
Unfortunately, WP.org says Animate It has not been tested as to its compatability with my version of WP. I just installed WP.org a fee days ago. Disappointing. Will it be approved in future?
WPBeginner Support says
Hi Catherine,
You can safely install the plugin. Please see our guide on installing plugins not tested with your WordPress version for more details.
Administrador
Lesa says
I’m looking for a specific type of animation.
One of the services I offer is design and layout brochures.
To display a portfolio of brochures, I would like to have just the flat front on the page that tells about the service, and when the visitor clicks the link to see more, they are taken to a page where a tri-fold brochure slowly opens up to reveal the interior.
Do you know whether there are any animation plugins that do this?
Thanks for any guidance you may be able to offer.
Geraldine Ward says
Thank you WP Beginner Support for your answer and also thank you Mark and Hemang for your comments, both something to consider.
Geraldine Ward says
I am thinking of doing an animation for a wordpress website in Adobe Animate CC but I can’t seem to find any positive information about whether I will be able to use it in wordpress – can you shed any light on this?
Thank you
Geraldine
WPBeginner Support says
You can export animation as a movie and upload it to YouTube and then share the video. However if it is a shorter animation like few seconds, then you can convert into an animated GIF and add it to your WordPress site.
Administrador
Hemang Rindani says
WordPress is a great CMS that caters to many businesses with the rich functionalities it offers. The flexibility and ease of use makes it a popular CMS across the enterprises. The inbuilt framework, themes, modules and plugins make it easier for a developer to implement any complex scenario through an effortless dashboard.
It is important to have an engaging website that enhances the user experience. Make sure to identify proper tools like social media login and sharing, images and animations that trigger user interaction. Animate It! is very useful WordPress tool designed and developed to provide an efficient and user friendly solution to apply beautiful CSS3 animations on WordPress Posts and Widgets. It allows a developer to add animations effortlessly without compromising on website security. The dashboard for Animate It! is self explanatory and a CMS developer does not require to have any programming or animation knowledge to use it.
Mark Klinefelter says
Nice articles but too much animation can drastically slow down page load time. I have been through this and elimated a lot of “cute” animation stuff. Pingdom scores will go up after that.