¿Quieres añadir animación de texto en WordPress sin codificar? El texto animado es una forma sencilla de captar la atención, destacar ofertas y guiar a los visitantes hacia su llamada a la acción.
La buena noticia es que no necesitas complicarte con CSS. En esta guía, te mostraré paso a paso cómo añadir animación de texto en WordPress usando el bloque de Titular Animado de SeedProd o un plugin gratuito, para que puedas hacer que tus páginas destaquen rápidamente.
¿Qué son los efectos de texto animados y por qué utilizarlos?
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 teclear, deslizar, rebotar o resaltar para atraer la atención al instante. Estos efectos funcionan con CSS moderno, que es rápido, ligero y compatible con los principales navegadores.
He aquí algunas formas prácticas de utilizar la animación de texto en su sitio de WordPress:
- Haga que las ofertas especiales destaquen en su tabla de precios
- Muestre las características del producto con animaciones
- Crear titulares rotativos o tipográficos que mantengan la atención de los visitantes.
- Dirija la atención a los botones de llamada a la acción (CTA ) importantes
- Añade un movimiento sutil cuando los usuarios se desplacen por el contenido
Como las animaciones CSS son más ligeras que los vídeos o Flash, no ralentizarán tu sitio si se utilizan correctamente. Y con un plugin de animación de WordPress o un constructor de arrastrar y soltar como SeedProd, puede añadir estos efectos en tan sólo unos clics, sin necesidad de codificación.
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
- Método 2. ¡Añadir animaciones de texto con Animate It! CSS Plugin
- Preguntas frecuentes sobre animaciones de texto en WordPress
Método 1. Crear titulares animados con SeedProd
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 SeedProd 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.
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 .
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.
Aquí puede elegir entre más de 180 plantillas de páginas de destino adaptadas a dispositivos móviles.
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.
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.
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.
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.
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.
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.
Una vez realizadas las personalizaciones, veamos cómo animar el texto del titular.
Paso 4. Añadir el bloque de titulares animados
Digamos 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.
Cuando hagas clic en el bloque para ver su configuración, verás 2 formas de animar tu titular:
- Destacado
- Giratorio
El estilo Resaltado añade una animación de formas a tu texto, con formas que incluyen:
- 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:
- 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.
Cuando estés satisfecho con tus efectos de texto animado, haz clic en el botón Guardar de la esquina superior derecha.
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.
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.
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.
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.
Ahora puedes ver tu página y ver tus animaciones de texto en acción.
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.
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!
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.
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.
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.
Puede personalizar y sustituir ese contenido con sus titulares, imágenes y texto personalizado.
Ahora puedes publicar tus cambios y previsualizar tu texto animado en directo en tu sitio WordPress.
Preguntas frecuentes sobre animaciones de texto en WordPress
Espero 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 unirte a la conversación en YouTube, X y Facebook para obtener más consejos y contenidos útiles para hacer crecer tu negocio.
