RESUMEN: Cómo Crear Animaciones de Texto en WordPress
Tres métodos te permiten añadir animaciones de texto sin codificar. Elige uno según cómo construyas tus páginas.
- SeedProd – Usa el bloque de titular animado en el editor visual de SeedProd para efectos de escritura, rotación o resaltado en páginas de destino y temas.
- Plugin Animated Text Block – Inserta un bloque nativo en el editor de bloques de Gutenberg para titulares animados en entradas y páginas.
- Plugin Animate It! – Envuelve un shortcode alrededor de tu texto en el editor clásico de WordPress para efectos CSS.
- Elige según el caso de uso – SeedProd para páginas de destino; Animated Text Block para el editor de bloques; Animate It! para sitios con editor clásico.
- No se requiere codificación – Los tres métodos funcionan sin tocar CSS ni PHP.
Si intentas que tu titular principal destaque sin tocar CSS, probablemente te hayas topado con un muro. La mayoría de los tutoriales asumen que usas Elementor o que te sientes cómodo editando código.
En esta guía, te mostraré cómo añadir animaciones de texto en WordPress usando tres métodos: el bloque de titular animado de SeedProd, un plugin gratuito de Gutenberg y el plugin CSS Animate It!. Elige el que se ajuste a tu configuración y sigue los pasos.
¿Qué Son los Efectos de Texto Animado y Por Qué Usarlos?
Los efectos de texto animado en WordPress son pequeños diseños de movimiento que puedes aplicar a titulares, botones u otros elementos de texto. En lugar de texto estático, puedes añadir estilos como escritura, deslizamiento, rebote o resaltado para captar la atención al instante.
Estos efectos están impulsados por CSS moderno, que es rápido, ligero y compatible con todos los navegadores principales.
Hay dos tipos de animación de texto que vale la pena distinguir: efectos de entrada que se ejecutan al cargar la página y animaciones activadas por desplazamiento que se activan a medida que los visitantes se desplazan hacia abajo. Esta guía cubre los efectos de entrada, incluidos los titulares giratorios y resaltados.
La función de revelación al desplazarse de SeedProd maneja las animaciones activadas por desplazamiento si eso es lo que buscas. Los pasos a continuación se centran en los efectos que se ejecutan automáticamente cuando la página se carga.
Aquí tienes algunas formas prácticas de usar la animación de texto en tu sitio de WordPress:
- Haz que las ofertas especiales destaquen en tu tabla de precios
- Muestra las características del producto con resaltados animados
- Crea titulares giratorios o de escritura que mantengan a los visitantes enganchados
- Dirige la atención a los botones de llamada a la acción (CTA) importantes
- Añade movimiento sutil mientras los usuarios se desplazan por tu contenido
Debido a que las animaciones CSS son ligeras en comparación con el vídeo o Flash, no ralentizarán tu sitio cuando se usen correctamente. Con un plugin de animación para WordPress o un constructor de arrastrar y soltar como SeedProd, puedes añadir estos efectos en solo unos pocos clics, sin necesidad de codificación.
Cómo Añadir Efectos de Texto Animado en WordPress: 3 Formas
Hay varias formas de a adir animaciones a WordPress. Puedes usar un plugin de WordPress o a adir efectos CSS manualmente.
Dado que crear efectos de texto manualmente es difi cil para los principiantes, te mostraremos c mo crear animaciones de texto con el constructor de sitios web de arrastrar y soltar de SeedProd, un plugin de animaci libre, y el editor de bloques de Gutenberg.
| M extasciitildeetodo | Mejor para | Coste |
|---|---|---|
| SeedProd | P ginas de destino, temas personalizados, p ginas de ventas | De pago (Pro) |
| Bloque de texto animado | Publicaciones y p ginas de Gutenberg | Gratis |
| Animate It! | Sitios con editor cl ssico | Gratis |
M todo 1. Crear titulares animados con SeedProd
Para el primer m todo, usaremos SeedProd, el mejor constructor de sitios web para WordPress. Con su constructor de sitios web de arrastrar y soltar y el bloque de titulares animados, puedes a adir efectos de transici cin emocionantes con unos pocos clics.
SeedProd te permite crear temas personalizados de WordPress y dise os responsivos sin escribir c digo ni contratar a un desarrollador. Incluye potentes bloques de contenido para personalizar p ginas, soporte de WooCommerce para tiendas de comercio electr nico y se integra perfectamente con los plugins populares de WordPress.
Adem s, este plugin es ligero y no tiene "bloatware", lo que garantiza que los tiempos de carga de tu p gina sean r pidos y amigables para el usuario.
Sigue los pasos a continuaci n para crear animaciones de texto en WordPress con SeedProd.
Paso 1. Instalar y activar el plugin SeedProd
Primero, dir gete a la p gina de precios de SeedProd y elige una licencia. Recomendamos SeedProd Pro por sus caracter sticas avanzadas.
Despu s de eso, inicia sesi n en tu rea de cuenta de SeedProd y descarga el plugin. Puedes copiar tu clave de licencia en la secci n "Descargas" al mismo tiempo.
A continuaci n, instala el plugin y act valo en tu sitio de WordPress. Si necesitas ayuda, puedes seguir estos pasos para instalar un plugin de WordPress.
Despu s de activar SeedProd, navega a SeedProd Configuraci n, introduce tu clave de licencia y haz clic en el bot n Verificar clave .
Ahora est s listo para empezar a crear una p gina con efectos de animaci n.
Paso 2. Elige una plantilla de página de destino
Puedes usar SeedProd para crear una p gina individual de WordPress, un tema de WordPress o una p gina de destino con su editor visual. Para esta gu a, a adiremos animaciones de texto a una p gina de destino de ventas.
Primero, deberá ir a SeedProd » Landing Pages y hacer clic en el botón Añadir nueva página de destino.
Aquí puede elegir entre más de 180 plantillas de páginas de destino adaptables a móviles.
Dado que estamos creando una página de ventas, haga clic en la pestaña Ventas para ver las diferentes plantillas de páginas de ventas. Cuando encuentre una plantilla que le guste, mueva el cursor hasta que vea el efecto de pasar el ratón por encima de la imagen y haga clic en el icono de la marca de verificación naranja.
A continuación, verá una ventana emergente donde puede añadir el nombre y la información de la URL de su página de destino. Después de eso, haga clic en el botón Guardar y empezar a editar la página.
Paso 3. Personalizar el contenido de tu p gina de destino
Su plantilla de página de destino se abrirá ahora en el editor visual de arrastrar y soltar de SeedProd. Aquí es donde puede personalizar su contenido y estilo y añadir más elementos a la página.
Por ejemplo, puede añadir su logotipo personalizado haciendo clic en el bloque de imagen actual y cargando un archivo de su biblioteca de medios de WordPress o de su ordenador.
También puede editar sus botones de CTA con diferentes colores, texto y estilo haciendo clic en ellos y visitando el panel de configuración avanzada de la izquierda.
Añadir nuevos elementos es igual de fácil. Puede arrastrar un bloque desde el panel de bloques de la izquierda y soltarlo en su diseño. Un temporizador de cuenta atrás, por ejemplo, puede añadir urgencia a su página, animando a los usuarios a actuar por miedo a perderse algo.
Con sus personalizaciones aplicadas, veamos ahora cómo animar el texto de su titular.
Paso 4. A adir el bloque de titulares animados
Supongamos que desea animar el titular principal de su página de destino. Para ello, deberá encontrar el bloque Titular animado y arrastrarlo a su diseño de página.
Cuando haga clic en el bloque para ver su configuración, verá 2 formas de animar su titular:
- Resaltado
- Rotatorio
El estilo Resaltado añade una animación de formas a su texto, con formas que incluyen:
- Círculo
- Rizado
- Subrayado
- Doble
- Doble subrayado
- Subrayado en zigzag
- Diagonal
- Tachado
- X
En contraste, el estilo Rotatorio añade efectos de transición a su titular, que incluyen:
- Escribiendo
- Recortar
- Voltear
- Rebotar
- Rodar
- Zoom
- Fundido
- Velocidad de la luz
- Deslizar hacia abajo
Además, puedes añadir texto antes y después de tu texto animado, habilitar el bucle infinito, cambiar la duración de la animación y ajustar la alineación, las fuentes y el nivel del encabezado.
En nuestro ejemplo, usamos la forma "Subrayado" del menú desplegable resaltado.
Cuando estés satisfecho con tus efectos de texto animado, haz clic en el botón Guardar en la esquina superior derecha.
Paso 5. Configura tus Ajustes
El siguiente paso es configurar los ajustes de tu página de destino antes de publicarla.
Haz clic en la pestaña Configuración de página para editar el nombre de tu página, la URL y la configuración de SEO en la página, y conéctate a un plugin de Google Analytics.
SeedProd también te permite conectar servicios de marketing por correo electrónico y configurar el mapeo de dominios para tus páginas. Consulta la documentación de integración de SeedProd para obtener más detalles.
No olvides hacer clic en Guardar antes de pasar al siguiente paso.
Paso 6. Publica tu página de destino
Cuando estés satisfecho con tu diseño, haz clic en el menú desplegable del botón Guardar y selecciona Publicar.
Ahora puedes ver tu página y observar tus animaciones de texto en acción.
M todo 2. A adir animaciones de texto con el plugin CSS Animate It!
Para el siguiente método, usaremos un plugin gratuito de animación de WordPress para añadir efectos de texto animado a tu sitio web. Esta es una buena solución si usas el editor WYSIWYG clásico de WordPress en lugar de un constructor de páginas o el editor de bloques de WordPress.
(Nota: el plugin Animate It! se actualizó por última vez en 2021. Sigue siendo funcional para los usuarios del editor clásico. Consulta la página del plugin de WordPress.org para conocer el estado actual de soporte).
Primero, instala y activa el plugin Animate It! en tu sitio web de WordPress. Debería funcionar directamente sin que tengas que configurar nada.
A continuación, crea una nueva página y verás un nuevo botón dentro del editor de WordPress: Animate It!
Al hacer clic en el botón, se abrirá una ventana emergente donde podrás elegir un estilo de animación. Hay muchos estilos de animación para elegir, así que encuentra uno que te guste en el menú desplegable.
Después de eso, puedes elegir el tiempo de retraso y duración y cuándo quieres que aparezca la animación. También puedes ejecutar la animación al cargar, al hacer clic, al pasar el ratón o al desplazarte.
Cuando estés satisfecho con la configuración, haz clic en el botón Animate It 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 publicación o página. El plugin añadirá un shortcode con contenido de ejemplo al editor de publicaciones.
Puedes personalizar y reemplazar ese contenido con tus titulares, imágenes y texto personalizado.
Ahora puedes publicar tus cambios y previsualizar tu texto animado en vivo en tu sitio de WordPress.
Método 3. Añadir texto animado en el editor de bloques de Gutenberg
El plugin Animated Text Block añade un bloque nativo de Gutenberg para efectos de animación de texto. Si creas páginas y publicaciones en el editor de bloques de WordPress, esta es la opción más directa, ya que funciona como cualquier otro bloque sin shortcodes ni un constructor separado.
He probado muchos complementos de animación a lo largo de los años, y la mayoría requiere el editor clásico o un constructor de páginas dedicado para funcionar correctamente. Este se integra directamente con Gutenberg como un bloque nativo, lo que facilita su gestión junto con tu otro contenido.
Paso 1. Instalar el plugin Bloque de texto animado
Ve a Plugins » Añadir nuevo en tu panel de WordPress y busca “Animated Text Block”. Haz clic en Instalar ahora y luego en Activar.
El plugin funciona directamente sin necesidad de configuración después de la activación.
Paso 2. A adir el bloque a tu p gina
Abre cualquier entrada o página en el editor de bloques de Gutenberg. Haz clic en el botón del insertador de bloques +, busca “Animated Text” y añade el bloque a tu área de contenido.
Colócalo donde quieras que aparezca tu titular animado, como en la parte superior de una sección de página o dentro de un bloque de portada.
Paso 3. Configurar tu animaci
Con el bloque seleccionado, escribe tu texto animado directamente en el bloque. Usa el panel de configuración de la derecha para elegir un estilo de animación, establecer la velocidad y controlar si la animación se repite.
El plugin admite varios estilos, incluidos efectos de escritura, fundido, rebote y deslizamiento. Empieza con “escritura” o “fundido” para un aspecto sutil y profesional en la mayoría de los sitios.
Paso 4. Previsualizar y publicar
Haz clic en Vista previa para ver tu animación antes de que se publique. Cuando estés satisfecho con el efecto, haz clic en Publicar o Actualizar para guardar tus cambios.
Preguntas frecuentes sobre animaciones de texto en WordPress
¿Funciona la animación de texto con el editor de bloques de Gutenberg?
Sí. El plugin Animated Text Block añade un bloque nativo de Gutenberg para efectos de texto animado. Una vez que lo instales y actives, busca el bloque en el insertador y arrástralo a cualquier entrada o página. Admite varios estilos de animación y funciona sin códigos cortos ni un constructor de páginas independiente.
¿Las animaciones de texto afectarán a mis Core Web Vitals o a la velocidad de la página?
Las animaciones basadas en CSS son ligeras y, en general, no afectan a los Core Web Vitals cuando se usan con moderación. El riesgo proviene de animar demasiados elementos en una sola página, lo que puede provocar cambios de diseño o retrasar la renderización. La mayoría de los navegadores modernos admiten la consulta de medios prefers-reduced-motion, que reduce o deshabilita las animaciones para los usuarios que lo prefieren.
¿Cuál es la diferencia entre un titular rotatorio y una animación de desplazamiento en WordPress?
Un titular rotatorio recorre palabras o frases al cargar la página, generalmente en una sección principal. Una animación de desplazamiento se activa cuando un elemento específico entra en la vista mientras el usuario se desplaza por la página. Esta guía cubre los efectos de titulares rotatorios y resaltados que se ejecutan al cargar. La función de desplazamiento y revelación de SeedProd maneja las animaciones activadas por desplazamiento por separado.
¿Necesito SeedProd Pro para usar el bloque Animated Headline?
Sí. El bloque Animated Headline es una función Pro y no está disponible en la versión gratuita de SeedProd. Si necesitas animación de texto sin un plugin de pago, utiliza el plugin Animated Text Block para el editor de bloques de Gutenberg o el plugin Animate It! para el editor clásico. Ambos son gratuitos.
¿Cómo añado animación de texto en WordPress sin un plugin?
Puedes usar animaciones CSS @keyframes aplicadas a través del panel CSS Adicional de tu tema (Apariencia » Personalizar » CSS Adicional). Escribe una regla @keyframes, asígnasela a tu elemento de texto usando la propiedad animation y añade la clase en un bloque HTML Personalizado o en el marcado de tu tema. Este enfoque requiere conocimientos básicos de CSS y es más adecuado para desarrolladores que para principiantes.
¿Listo para empezar a añadir animaciones de texto a tus páginas de WordPress? Prueba SeedProd y usa el bloque Titular Animado para que tus titulares principales destaquen en minutos.
También te puede interesar esta guía sobre cómo crear una página de destino dinámica en WordPress.
¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.
