Cómo agregar fácilmente animaciones CSS en WordPress

A lo largo de los años, hemos experimentado con diferentes formas de hacer que los sitios web de WordPress sean más interactivos. Si buscas captar la atención de tus visitantes, las animaciones pueden ser muy efectivas.

Puedes usar animaciones para captar la atención de un visitante y resaltar el contenido más importante de una página. Esto también puede animar a los clientes a hacer clic en tus botones y enlaces de llamada a la acción.

Afortunadamente, también es fácil configurar animaciones en WordPress, incluso si no sabes escribir código.

En este tutorial, te mostraremos cómo puedes agregar fácilmente animaciones CSS en WordPress.

¿Por qué agregar animaciones CSS en WordPress?

Puedes usar animaciones CSS para atraer la atención del visitante a diferentes partes de una página. Por ejemplo, si tienes una tienda en línea, las animaciones pueden resaltar las características más importantes o los puntos de venta más fuertes de un producto. Esto puede mejorar la experiencia del usuario e incrementar las ventas.

Las animaciones también harán que tus CTAs destaquen, lo que puede ayudarte a alcanzar un objetivo específico, como conseguir que más personas se suscriban a tu boletín de correo electrónico.

Puedes agregar animaciones CSS a la hoja de estilos de tu tema de WordPress o tema hijo. Sin embargo, esto requiere mucho tiempo y esfuerzo, y si cometes un error, puede dañar el diseño e incluso la funcionalidad de tu sitio web.

Dicho esto, veamos cómo puedes agregar fácilmente animaciones CSS a tu sitio de WordPress. Si prefieres saltar directamente a un método en particular, puedes usar los enlaces a continuación:

Método 1: Cómo animar fácilmente cualquier bloque de WordPress (rápido y fácil)

La forma más fácil de agregar una animación CSS simple es usando Blocks Animation.

Este plugin de animación gratuito te permite agregar 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 escritura y un efecto de estilo de cinta de correr que puedes agregar a texto y números.

Primero, necesitarás instalar y activar el plugin gratuito Blocks Animation. Si necesitas ayuda, consulta nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.

Después de la activación, abre cualquier página o publicación en el editor de bloques de WordPress. Luego, simplemente haz clic en el bloque que deseas animar y selecciona la pestaña 'Bloque' en el menú del lado derecho.

Verás que este menú tiene una nueva sección 'Animaciones'.

Simplemente haz clic para expandir la sección 'Animaciones', y verás tres opciones diferentes: Animaciones, Animaciones de conteo y Animaciones de escritura.

Las 'Animaciones' son efectos cortos que se reproducen una vez cuando la página se carga. Para agregar este tipo de animación de entrada a tu blog de WordPress, simplemente haz clic en el menú desplegable junto a 'Animación'.

Esto abre un menú donde puedes elegir la animación que deseas usar.

El editor de WordPress mostrará una vista previa de la animación, para que puedas probar diferentes opciones y ver cuál se ve mejor.

Por defecto, la animación de entrada se reproducirá tan pronto como cargue la página, pero puedes agregar un retraso si lo prefieres. Si usas múltiples animaciones en la misma página, incluso puedes usar retrasos para escalonarlas y que no sean abrumadoras.

Simplemente abre el menú desplegable 'Retraso' y elige un tiempo de la lista.

También puedes hacer que la animación sea más rápida o más lenta usando el menú desplegable 'Velocidad'.

Mientras pruebas diferentes configuraciones, puedes previsualizar la animación en cualquier momento haciendo clic en 'Volver a reproducir animación'.

El plugin también tiene 'Animaciones de conteo' y 'Animaciones de escritura'.

Las animaciones de escritura te permiten animar texto, mientras que las animaciones de conteo agregan un efecto de contador a los números. Estas animaciones funcionan con cualquier bloque de Gutenberg que admita texto o números, por lo que puedes usarlas para animar botones, subtítulos de imágenes, encabezados y más.

Para agregar cualquiera de estos efectos, comienza resaltando el texto o los números que deseas animar. Luego, haz clic en la flecha hacia abajo en la pequeña barra de herramientas.

Ahora puedes elegir 'Animaciones de conteo' o 'Animaciones de escritura' en el menú desplegable.

Si estas opciones aparecen atenuadas, asegúrate de haber resaltado el contenido correcto. Por ejemplo, no podrás seleccionar 'Animación de conteo' si solo has resaltado texto.

Después de agregar la animación, puedes usar los menús desplegables en la pequeña ventana emergente para cambiar la velocidad y agregar un retraso opcional.

Por ejemplo, en la siguiente imagen, estamos usando un retraso de un segundo.

Cuando estés listo para que la animación CSS esté activa, haz clic en el botón 'Publicar' o 'Actualizar' para aplicar las animaciones en tu sitio. Ahora, si visitas tu sitio web de WordPress, verás la animación en vivo.

Método 2: Cómo agregar animaciones CSS a páginas personalizadas (recomendado)

Si deseas agregar animaciones simples a los bloques integrados de WordPress, entonces Animaciones de bloques es una buena opción. Sin embargo, si realmente quieres captar la atención del visitante, mantener a la gente en tu sitio web y obtener más conversiones, te recomendamos usar SeedProd.

SeedProd es el mejor plugin constructor de páginas que te permite crear hermosas páginas de destino, páginas de ventas, una página de inicio y más, utilizando un simple editor de arrastrar y soltar.

También viene con un bloque de 'Titular Animado' que puedes usar para crear titulares animados rotatorios y resaltados.

A pesar del nombre, puedes usar el bloque de Titular Animado para animar cualquier texto, incluyendo una llamada a la acción, un subtítulo o cualquier otro texto que quieras enfatizar.

SeedProd también viene con más de 40 animaciones de entrada que puedes agregar a cualquier bloque, incluyendo imágenes, texto, botones, videos y más.

Incluso puedes animar secciones y columnas completas con solo unos pocos clics. De esta manera, puedes crear páginas animadas atractivas en minutos.

Si estás utilizando animaciones para obtener más conversiones y ventas, entonces SeedProd se integra con WooCommerce. También soporta muchos de los principales servicios de marketing por correo electrónico que podrías estar utilizando para promocionar tu sitio web.

Cómo configurar el constructor de páginas SeedProd

Lo primero que necesitas hacer es instalar y activar SeedProd. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, necesitas ingresar tu clave de licencia.

Puedes encontrar esta información en tu cuenta en el sitio web de SeedProd. Después de agregar la clave de licencia, simplemente haz clic en ‘Verificar clave’.

Crea un diseño de página personalizado

Para empezar, ve a SeedProd » Landing Pages y haz clic en ‘Agregar nueva landing page’.

En la siguiente pantalla, se te pedirá que elijas una plantilla.

SeedProd viene con más de 350 plantillas hermosas que están organizadas en diferentes categorías, como plantillas de página 404 y páginas de agradecimiento personalizadas de WooCommerce.

Para esta guía, te mostraremos cómo crear una página de ventas con texto animado y animaciones de entrada, pero los pasos serán similares sin importar qué tipo de página crees.

Simplemente haz clic en cualquier pestaña para ver las diferentes plantillas dentro de esa categoría.

Cuando encuentres una plantilla que quieras usar, simplemente pasa el cursor del mouse sobre ella y luego haz clic en el ícono de la marca de verificación.

Estamos usando la plantilla 'Zen Sales Page' en todas nuestras imágenes, pero puedes usar cualquier plantilla.

A continuación, necesitas darle un título a la página.

SeedProd creará automáticamente una URL basada en el título de la página, pero puedes cambiarla a lo que quieras. Por ejemplo, agregar palabras clave relevantes a una URL a menudo puede mejorar tu SEO de WordPress y ayudar a que la página aparezca en los resultados de búsqueda relevantes.

Para obtener más información, consulta nuestra guía sobre cómo investigar palabras clave para tu 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 de arrastrar y soltar de SeedProd.

A la derecha, verás una vista previa en vivo del diseño de la página, con algunas configuraciones a la izquierda.

SeedProd viene con muchos bloques que puedes agregar a tu diseño, incluidos bloques que te permiten agregar botones para compartir en redes sociales, videos, formularios de contacto y más.

Para más información, consulta nuestra guía sobre cómo crear una página personalizada en WordPress.

Cómo agregar texto animado a WordPress

Para agregar texto animado a la página, busca el bloque de Título Animado y arrástralo al diseño de tu página.

Hay dos formas de animar tu título. Primero, el estilo 'Resaltado' agrega una animación de forma a tu texto, como un círculo o un zigzag subrayado.

Puedes usar esta animación para llamar la atención sobre una palabra o frase en particular dentro del título. Esto puede hacer que tu título sea más fácil de leer y entender al resaltar el contenido más importante. También es una excelente manera de llamar la atención sobre una llamada a la acción.

El estilo Resaltado también tiene algunas formas de tachado.

Puedes usar tachados para crear efectos interesantes y llamativos, o simplemente puede agregar algo de diversión a tu diseño.

Para crear una animación Resaltada, simplemente abre el menú desplegable 'Estilo' y selecciona 'Resaltado'.

A continuación, abre el menú desplegable 'Forma' y elige una forma. Cuando hagas clic en una forma, SeedProd mostrará una vista previa de esa animación para que puedas probar diferentes formas y ver cuál te gusta más.

SeedProd también tiene un estilo de animación 'Rotatorio', que agrega un efecto de transición al texto.

A menudo, el texto animado es lo primero que ven los visitantes cuando una página se carga, por lo que es una excelente manera de resaltar la parte más importante del texto.

Para crear una animación de transición, simplemente abre el menú desplegable 'Estilo' y haz clic en 'Rotatorio'.

Luego puedes abrir el menú desplegable 'Animación' y elegir el tipo de transición que deseas usar, como fundido, zoom o giro. De nuevo, SeedProd reproducirá la animación dentro del editor de páginas, para que puedas probar diferentes efectos y ver cuál prefieres.

No importa si estás creando una animación 'Destacada' o 'Rotatoria', puedes agregar texto antes y después del texto animado.

Simplemente escribe en los campos 'Antes del titular' y 'Después del titular'. En el campo 'Texto', agrega la palabra o frase que deseas animar.

Si deseas animar todo el titular, simplemente deja los campos 'Antes del titular' y 'Después del titular' vacíos.

Por defecto, SeedProd reproducirá la animación en bucle, lo que a algunos visitantes les puede resultar molesto.

Para reproducir la animación solo una vez, haz clic para desactivar el interruptor 'Bucle infinito'.

Por defecto, la animación se reproducirá durante 1200 milisegundos después de un retraso de 8000 milisegundos.

Para usar valores diferentes, escribe en los campos 'Duración' y 'Retraso'. Por ejemplo, puedes hacer que la animación sea más rápida usando una duración más corta.

También es posible que desees dar estilo al texto. Por ejemplo, puedes cambiar el tamaño de fuente y la alineación.

Cuando estés satisfecho con el aspecto del titular animado, haz clic en el botón 'Guardar' para almacenar tus cambios.

Agrega 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 manera de captar la atención del visitante.

También puedes usarlos para resaltar el contenido que quieres que los visitantes vean primero. Por ejemplo, si tienes un mercado en línea, podrías animar la imagen principal del producto o el banner que anuncia tu venta del Black Friday.

Dentro del editor de SeedProd, simplemente haz clic en el contenido que deseas animar y luego selecciona la pestaña ‘Avanzado’ en el menú de la izquierda.

Luego puedes proceder a hacer clic para expandir la sección ‘Efectos de Animación’.

Después de eso, simplemente elige una animación del menú desplegable ‘Animación de Entrada’.

Ahora puedes agregar animaciones de entrada a cualquier bloque, sección o columna simplemente siguiendo el mismo proceso descrito anteriormente.

Publica tus animaciones CSS en WordPress

Cuando estés satisfecho con cómo está configurada la página, haz clic en el menú desplegable del botón ‘Guardar’ y selecciona ‘Publicar’.

Ahora puedes visitar esta página para ver las animaciones CSS en vivo.

Esperamos que este artículo te haya ayudado a aprender cómo agregar animaciones CSS en WordPress. También te puede interesar ver nuestra guía sobre cómo agregar un fondo animado en WordPress o los elementos clave de diseño de WordPress que todo sitio web necesita.

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