Últimas noticias de SeedProd

Tutoriales, consejos y recursos de WordPress para hacer crecer tu negocio

Cómo crear animaciones de texto en WordPress

Cómo crear animaciones de texto en WordPress (pasos sencillos) 

Escrito por: imagen de autor Stacey Corrin
imagen de autor Stacey Corrin
Stacey lleva más de 10 años escribiendo sobre WordPress y marketing digital, y mucho más tiempo sobre otros temas. Además, le fascinan el diseño web, la experiencia de usuario y el SEO.
     Revisado por: John Turner
imagen del revisor John Turner
John Turner es el cofundador de SeedProd. Cuenta con más de 20 años de experiencia empresarial y de desarrollo y sus plugins se han descargado más de 25 millones de veces.

¿Quieres añadir animaciones en WordPress?

Las animaciones son una forma excelente de captar la atención de su público, dirigiéndolo hacia contenidos útiles y elementos esenciales, como botones de llamada a la acción, testimonios y formularios de inscripción.

En este artículo, le mostraremos cómo crear animaciones de texto en su sitio web WordPress paso a paso.

Tutorial en vídeo

¿Qué son los efectos de texto animados y por qué utilizarlos?

Los efectos de texto animado son animaciones CSS para los titulares de tu sitio web y otros contenidos basados en texto. Permiten añadir efectos de transición y estilos de animación, como rebote, desplazamiento y deslizamiento, que llaman la atención sobre la información esencial de tu sitio.

Puede utilizar animaciones de texto en WordPress para:

  • Destaque las ofertas en su tabla de precios
  • Animar las características del producto
  • Crear titulares que llamen la atención
  • Llamar la atención sobre los botones de llamada a la acción (CTA)
  • Y mucho más.

Muchos sitios web utilizan animaciones y transiciones para desplazarse por la página. Por ejemplo, puedes animar los widgets de texto para que "salten" cuando los usuarios se desplacen por la página.

Como las animaciones CSS3 son más rápidas que las flash o los vídeos, se cargan rápidamente y son compatibles con la mayoría de los navegadores web modernos. También son mucho más fáciles de añadir a tu sitio con un plugin de animación de WordPress.

Con esto en mente, vamos a explorar cómo crear efectos de texto animado en WordPress.

Cómo añadir efectos de texto animado en WordPress: 2 maneras

Hay varias formas de añadir animaciones a WordPress. Puedes utilizar un plugin de WordPress o añadir manualmente efectos CSS.

Dado que la creación manual de efectos de texto es un reto para los principiantes, le mostraremos cómo crear animaciones de texto con un constructor de páginas de WordPress y un plugin de animación de WordPress gratuito.

Método 1. Crear titulares animados con SeedProd

Creador de sitios web SeedProd WordPress

Para el primer método, utilizaremos SeedProd, el mejor creador de sitios web para WordPress. Con su constructor de páginas visual de arrastrar y soltar y el bloque Titular animado, puedes añadir emocionantes efectos de transición con unos pocos clics.

SeedProd te permite crear temas de WordPress personalizados y diseños adaptables sin escribir código ni contratar a un desarrollador. Incluye potentes bloques de contenido para personalizar páginas, compatibilidad con WooCommerce para tiendas de comercio electrónico y se integra a la perfección con los plugins más populares de WordPress.

Además, este plugin es ligero y no contiene elementos sobrantes, lo que garantiza que los tiempos de carga de las páginas sean rápidos y fáciles de usar.

Siga los siguientes pasos para crear animaciones de texto en WordPress con SeedProd.

Paso 1. Instale y active el plugin SeedProd

En primer lugar, diríjase a la página de precios de Se edProd y elija una licencia. Recomendamos SeedProd Pro por sus funciones avanzadas.

A continuación, acceda a su cuenta SeedProd y descargue el plugin. Puede copiar su clave de licencia en la pestaña "Descargas" al mismo tiempo.

Encuentre su clave de licencia SeedProd

A continuación, instala el plugin y actívalo en tu sitio WordPress. Si necesitas ayuda, puedes seguir estos pasos para instalar un plugin de WordPress.

Después de activar SeedProd, vaya a SeedProd " Configuración, introduzca su clave de licencia y haga clic en el botón Verificar clave .

introduzca su clave de licencia

Ahora estás listo para empezar a construir una página con efectos de animación.

Paso 2. Elija una plantilla de página de destino

Puede utilizar SeedProd para crear una sola página 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 aterrizaje de ventas.

En primer lugar, tendrá que ir a SeedProd " Páginas de destino y haga clic en el botón Añadir nueva página de destino.

Añadir una nueva página de destino en WordPress

Aquí puede elegir entre más de 180 plantillas de páginas de destino adaptadas a dispositivos móviles.

Plantillas de páginas de destino SeedProd

Como estamos creando una página de ventas, haz clic en la pestaña Ventas para ver las diferentes plantillas de páginas de ventas. Cuando encuentres una plantilla que te guste, mueve el cursor hasta que veas el efecto de imagen flotante y haz clic en el icono de marca de verificación naranja.

elija una plantilla de página de destino para animar

A continuación, verá una ventana emergente donde podrá añadir el nombre de su página de destino y la información de la URL. Después, haz clic en el botón Guardar y empezar a editar la página.

introduzca los datos de su página de destino

Paso 3. Personalice el contenido de su página de destino Personalice el contenido de su 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 de página.

SeedProd constructor de páginas de arrastrar y soltar WordPress

Por ejemplo, puede añadir su logotipo personalizado haciendo clic en el bloque de imagen actual y cargando un archivo desde su biblioteca multimedia de WordPress o desde su ordenador.

Cambiar el logotipo de la página de destino

También puede editar sus botones CTA con diferentes colores, texto y estilo haciendo clic en él y visitando el panel de configuración avanzada de la izquierda.

Personalizar el botón de llamada a la acción de la página de destino seedprod

Añadir nuevos elementos es igual de fácil. Puedes arrastrar un bloque desde el panel de bloques de la izquierda y soltarlo en tu diseño. Una cuenta atrás, por ejemplo, puede añadir urgencia a tu página, animando a los usuarios a actuar por miedo a perdérselo.

Añadir un temporizador de cuenta atrás en seedprod

Una vez realizadas las personalizaciones, veamos cómo animar el texto del titular.

Paso 4. Añadir el bloque de titulares animados

Supongamos que quieres animar el titular principal de tu página de destino. Para ello, tendrás que encontrar el bloque Titular animado y arrastrarlo al diseño de tu página.

Bloque de titulares animados SeedProd

Cuando hagas clic en el bloque para ver su configuración, verás 2 formas de animar tu titular:

  1. Destacado
  2. Giratorio

El estilo Resaltado añade una animación de formas a tu texto, con formas que incluyen:

Animación de texto resaltado WordPress
  • Círculo
  • Rizado
  • Subraye
  • Doble
  • Doble subrayado
  • Subrayado ZipZag
  • Diagonal
  • Tachado
  • X

Por el contrario, el estilo Rotación añade efectos de transición a tu titular, entre los que se incluyen:

Animación de texto giratorio WordPress
  • Mecanografía
  • Clip
  • Flip
  • Rebote
  • Rollo
  • Zoom
  • Desvanecer
  • Velocidad de la luz
  • Deslizarse hacia abajo

Además, puede añadir texto antes y después del texto animado, activar el bucle infinito, cambiar la duración de la animación y ajustar la alineación, las fuentes y el nivel de los títulos.

En nuestro ejemplo, utilizamos la forma "Subrayado" del menú desplegable resaltado.

SeedProd animación de texto WordPress subrayado

Cuando estés satisfecho con tus efectos de texto animado, haz clic en el botón Guardar de la esquina superior derecha.

Guarde los cambios de su página de destino

Paso 5. Configure sus ajustes

El siguiente paso es conectar su servicio de marketing por correo electrónico y configurar los ajustes de su página de destino.

SeedProd ofrece integraciones directas con muchos proveedores de correo electrónico populares, incluyendo Constant Contact, Mailchimp, y más. Puede elegir uno haciendo clic en la pestaña Conectar en la parte superior de la pantalla.

Integraciones de marketing por correo electrónico

Consulte la documentación de integración del correo electrónico para obtener ayuda sobre la conexión con su proveedor específico.

A continuación, haz clic en la pestaña Configuración de la página, donde podrás modificar ajustes como el nombre de la página, la URL y el SEO en la página, así como conectarte a un complemento de Google Analytics.

configuración de la página de destino

También puede utilizar la función Domain Mapping de SeedProd para dar a su página de destino un nombre de dominio personalizado. Esta es una excelente manera de tener múltiples páginas de destino con dominios únicos en una sola instalación de WordPress.

mapeo de dominios seedprod

No olvide hacer clic en Guardar antes de pasar al siguiente paso.

Paso 6. Publique su página de destino Publique su 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.

publicar página de aterrizaje con animación de texto

Ahora puedes ver tu página y ver tus animaciones de texto en acción.

animación de texto WordPress ejemplo

Método 2. ¡Añadir animaciones de texto con Animate It! CSS Plugin

Para el siguiente método, utilizaremos un plugin de animación gratuito de WordPress para añadir efectos de texto animado a su sitio web. Esta es una buena solución si utilizas el editor WYSIWYG clásico de WordPress en lugar de un constructor de páginas o el editor de bloques de WordPress.

¡Anímalo! Plugin de animación gratuito para WordPress

En primer lugar, instale y active el plugin Animate It! en su sitio web WordPress. Debería funcionar desde el primer momento sin que tenga que configurar nada.

A continuación, crea una nueva página, y verás un nuevo botón dentro del editor de WordPress: ¡Anímalo!

Animate It! botón editor de WordPress

Al hacer clic en el botón se abre una ventana emergente en la que puede elegir un estilo de animación. Hay muchos estilos de animación para elegir, así que busca el que más te guste en el menú desplegable.

Estilos de animación WordPress

Después, puedes elegir el tiempo de retardo y duración y cuándo quieres que aparezca la animación. También puede ejecutar la animación en la carga, haga clic en, hover, o desplazamiento de desplazamiento.

opción de animación WordPress plugin de animación

Cuando estés satisfecho con la configuración, haz 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 entrada o página. El plugin añadirá un shortcode con contenido ficticio en el editor de la entrada.

animación de texto WordPress shortcode

Puede personalizar y sustituir ese contenido con sus titulares, imágenes y texto personalizado.

personalizar el shortcode de animación

Ahora puedes publicar tus cambios y previsualizar tu texto animado en directo en tu sitio WordPress.

Eso es todo por ahora.

Esperamos que este tutorial sobre cómo crear animaciones de texto en WordPress te haya resultado útil. Puede que también te guste esta guía sobre cómo crear una página de aterrizaje dinámica en WordPress.

Gracias por leernos. Nos encantaría conocer tu opinión, así que no dudes en dejarnos un comentario con tus preguntas y comentarios.

También puede seguirnos en YouTube, X (antes Twitter) y Facebook para obtener más contenidos útiles para hacer crecer su negocio.

avatar de autor
Stacey Corrin Escritor
Stacey lleva más de 10 años escribiendo sobre WordPress y marketing digital, y mucho más tiempo sobre otros temas. Además, le fascinan el diseño web, la experiencia de usuario y el SEO.

Divulgación: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, es posible que ganemos una comisión. Sólo recomendamos productos que creemos que aportarán valor a nuestros lectores.