Cómo agregar fácilmente animaciones CSS en WordPress (2 formas fáciles)

¿Quieres agregar animaciones CSS en WordPress?

Las animaciones son una excelente manera de captar la atención del visitante y resaltar el contenido más importante de la página. También puede animar a los clientes a hacer clic en sus botones y enlaces de llamada a la acción.

En este artículo, le mostraremos cómo agregar fácilmente animaciones CSS en WordPress.

¿Por qué agregar animaciones CSS en WordPress?

Puede usar animaciones CSS para llamar la atención del visitante a diferentes partes de la página. Por ejemplo, si tiene una tienda en línea, las animaciones pueden resaltar las características clave del producto o los principales puntos de venta.

Las animaciones también hacen que tus llamadas a la acción se destaquen, lo que puede ayudarte a lograr un objetivo específico, p. B. Logre que más personas se suscriban a su boletín informativo por correo electrónico.

Puede agregar animaciones CSS a la hoja de estilo o al tema secundario de su tema. Sin embargo, esto requiere mucho tiempo y esfuerzo y puede romper el diseño e incluso la funcionalidad de su sitio web si comete un error.

Veamos cómo puede agregar fácilmente animaciones CSS a su sitio de WordPress. Si prefiere pasar directamente a un método específico, puede usar los enlaces a continuación.

Método 1. Cómo animar fácilmente cualquier bloque de WordPress (Rapido y facil)

La forma más fácil de agregar una animación CSS simple es usar animación en bloque.

Este complemento gratuito le permite agregar una animación de entrada a cualquier bloque sin escribir una sola línea de CSS. También tiene una animación de escritura y un efecto de estilo teletipo al que puede agregar texto y números.

Primero debe instalar y activar el complemento. Si necesita ayuda, consulte nuestra guía de instalación del complemento de WordPress.

Una vez activado, abra cualquier página o publicación en el editor de WordPress. Luego, simplemente haga clic en el bloque que desea animar y seleccione la pestaña "Bloqueo" en el menú de la derecha.

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

Simplemente haga clic para expandir la pestaña Animaciones y verá tres opciones diferentes: Animaciones, Número de animaciones e Ingresar animaciones.

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

Esto abrirá un menú donde puede seleccionar la animación que desee.

El editor de WordPress muestra una vista previa de la animación, por lo que puede probar diferentes opciones para ver cuál se ve mejor.

De manera predeterminada, la animación de entrada se reproduce tan pronto como se carga la página, pero puede agregar un retraso si lo prefiere. Si usa varias animaciones en la misma página, incluso puede usar demoras para espaciar sus animaciones para que no se vean abrumadoras.

Simplemente abra el menú desplegable Retraso y seleccione un tiempo de la lista.

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

Mientras experimenta con diferentes configuraciones, siempre puede obtener una vista previa de la animación haciendo clic en Repetir animación.

El complemento también tiene Animaciones de conteo e Animaciones de ingreso.

Las animaciones de escritura le permiten animar el texto, mientras que las animaciones de conteo agregan un efecto similar a un teletipo a los números. Estas animaciones funcionan con cualquier bloque que admita texto o números, por lo que puede usarlos para animar botones, etiquetas, títulos y más.

Para agregar cualquiera de estos efectos, primero resalte el texto o los números que quieres animar. Luego haga clic en la flecha hacia abajo en la barra de herramientas pequeña.

Ahora puede seleccionar Número de animaciones o Introducir animaciones en el menú desplegable.

Si estas opciones están atenuadas, asegúrese de haber seleccionado el contenido correcto. Por ejemplo, no puede seleccionar Número de animaciones si solo ha seleccionado texto.

Una vez que haya agregado la animación, puede cambiar la velocidad y agregar un retraso opcional usando los menús desplegables en la pequeña ventana emergente.

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

Cuando esté listo para activar la animación CSS, haga clic en el botón publicar o actualizar. Ahora, cuando visite su sitio de WordPress, verá la animación en vivo.

Método 2. Agregar animaciones CSS a páginas personalizadas (recomendado)

Si desea agregar animaciones simples a los bloques integrados de WordPress, Blocks Animation es una buena opción. Sin embargo, si realmente desea captar la atención del visitante, mantener a las personas en su sitio y obtener más conversiones, le recomendamos que lo use. Producto de semilla.

SeedProd es el mejor complemento de creación de páginas que lo ayuda a crear hermosas páginas de destino, páginas de ventas y más con un simple editor de arrastrar y soltar.

También viene con un bloque de título animado que puede usar para crear títulos animados giratorios y resaltados.

A pesar del nombre, puede usar el bloque animado Usar título para animar cualquier texto, incluido un llamado a la acción, un subtítulo o cualquier otro texto que desee enfatizar.

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

Incluso puede animar secciones y columnas enteras con solo unos pocos clics. Esto le permite crear hermosas páginas animadas en minutos.

Si usa animaciones para generar más conversiones y ventas, SeedProd se integra con WooCommerce y es compatible con muchos de los mejores servicios de marketing por correo electrónico que ya puede estar utilizando para promocionar su sitio web.

Cómo configurar el Creador de páginas de SeedProd

Primero necesitas instalar y activar SeedProd. Consulte nuestra guía paso a paso para instalar un complemento de WordPress para obtener más detalles.

Después de la activación, deberá ingresar su clave de licencia.

Esta información se puede encontrar a continuación su cuenta en el sitio web de SeedProd. Después de agregar 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 "Agregar nueva página de destino".

La siguiente pantalla le pedirá que seleccione una plantilla.

SeedProd viene con más de 180 hermosas plantillas divididas en diferentes categorías, como: B. Plantillas de página 404 y páginas de agradecimiento personalizadas de WooCommerce.

En esta guía, le mostraremos cómo crear una página de ventas con texto animado y animaciones de entrada, pero los pasos son similares sin importar el tipo de página que esté creando.

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

Cuando encuentre una plantilla que desee usar, simplemente desplace el cursor sobre ella y luego haga clic en el icono de marca de verificación.

Usamos la plantilla de página de venta Zen en todas nuestras imágenes, pero puede usar cualquier plantilla que desee.

Después esto es para lo que debe darle un título a la página.

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

Para obtener más información, lea nuestra guía de investigación de palabras clave para su blog de WordPress.

Cuando esté satisfecho con el título y la URL, haga clic en Guardar y comience a editar la página.

Esto cargará el editor de páginas de arrastrar y soltar de SeedProd.

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

SeedProd viene con muchos bloques para agregar a su tema, incluidos bloques para agregar botones para compartir en redes sociales, videos, formularios de contacto y más.

Consulte nuestra guía para crear una página de WordPress personalizada para obtener más información.

Cómo agregar texto animado a WordPress

Para agregar texto animado a la página, busque el bloque de encabezado animado y arrástrelo al diseño de la página.

Hay dos maneras de animar su título. Primero, el estilo de subrayado agrega animación de forma a su texto, p. B. círculo o zigzag resaltado.

Puede usar esta animación para llamar la atención sobre una palabra o frase específica en el título. Esto puede hacer que su título sea más fácil de leer y comprender 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 subrayado también tiene algunas formas subrayadas.

Puede usar trazos para crear efectos interesantes y llamativos, o simplemente puede agregar un poco de diversión a su diseño.

Para crear una animación resaltada, simplemente abra el menú desplegable Estilo y seleccione Resaltado.

Luego abra el menú desplegable Forma y seleccione una forma. Cuando hace clic en una forma, SeedProd muestra una vista previa de esa animación, para que pueda probar diferentes formas para ver cuál le gusta más.

SeedProd también tiene un estilo de animación "giratorio" que agrega un efecto de transición al texto.

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

Para crear una animación de transición, simplemente abra el menú desplegable Estilo y haga clic en Rotar.

Luego puede abrir el menú desplegable Animación y seleccionar el tipo de transición que desea, p. B. Desvanecimiento, escalamiento o volteo. Una vez más, SeedProd reproduce la animación en el editor de páginas, por lo que puede probar diferentes efectos para ver cuál prefiere.

Ya sea que esté creando una animación "resaltada" o "giratoria", puede agregar texto antes y después del texto animado.

Simplemente escriba en los campos Antes del título y Después del título. En el cuadro de texto, agregue la palabra o frase que desea animar.

Si desea animar todo el título, simplemente deje los campos Antes del título y Después del título en blanco.

De forma predeterminada, SeedProd repite la animación, lo que puede resultar molesto para algunos visitantes.

Para reproducir la animación solo una vez, haga clic para desactivar el botón Bucle.

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

Para utilizar otros valores, introdúzcalos en los campos Duración y Retraso. Por ejemplo, puede acelerar la animación usando una duración más corta.

También puede formatear el texto. Por ejemplo, puede cambiar el tamaño de fuente y la alineación.

Cuando esté satisfecho con el aspecto del título animado, haga clic en el botón "Guardar" para guardar los cambios.

Agregar animaciones de inicio de sesión 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 de un visitante.

También puede usarlos para resaltar el contenido que los visitantes deberían consultar primero. Por ejemplo, si tiene un mercado en línea, puede animar la imagen principal del producto o el banner que promociona su venta de Black Friday.

En el editor de SeedProd, simplemente haga clic en el contenido que desea animar y luego seleccione la pestaña Avanzado en el menú de la izquierda.

Luego puede continuar y hacer clic para expandir la pestaña Efectos de animación.

Luego, simplemente seleccione una animación de la lista desplegable "Animación de entrada".

Ahora puede agregar animaciones de entrada a cualquier bloque, sección o columna simplemente siguiendo el procedimiento anterior.

Publica tus animaciones CSS en WordPress

Cuando esté satisfecho con la configuración de la página, haga clic en el botón Guardar en el menú desplegable y seleccione Publicar.

Ahora puede 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 puede consultar nuestra guía definitiva para aumentar la velocidad y el rendimiento o consultar nuestra lista de los errores más comunes de WordPress y cómo solucionarlos.

Si te ha gustado este artículo, suscríbete al nuestro. canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Closermarketing.es Y Facebook.