Agregar animaciones de botones retrasados ​​a cualquier CTA puede ser una forma efectiva de llamar la atención sobre los visitantes y, a su vez, aumentar la probabilidad de obtener un clic. En este tutorial, le mostraremos cómo usar Divi para crear 8 animaciones de botón retrasado para un CTA de encabezado personalizado. Para hacer esto, combinaremos configuraciones de animación de formas que quizás nunca haya considerado. Además, estas animaciones se pueden aplicar a casi cualquier botón de CTA en su sitio.

Descargar el tutorial GRATIS

Para descargar el fichero JSON de este tutorial, será necesario descargarlo usando el botón de descarga, suscribiendose a nuestra lista de correo electrónico mediante el siguiente formulario. Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se «volverá a suscribir» ni recibirá correos electrónicos adicionales.

Vistazo

Aquí hay un vistazo a las 8 animaciones de botón retrasado que agregaremos al encabezado personalizado CTA en Divi:

Divi animaciones de botones retrasados

Importar la plantilla desde el segundo paquete de generador de temas

Desde el panel de WordPress, navega hasta Divi> Generador de temas. Dentro del generador de temas, seleccione el icono de portabilidad en la parte superior derecha de la página. En la ventana emergente de portabilidad, seleccione la pestaña de importación, elija el archivo theme-builder-pack-2-404-page-template.json y haga clic en el botón importar. (Este archivo de importación estará dentro de la carpeta del paquete de generador de segundo tema)

Divi animaciones de botones retrasados

También puede seleccionar la opción para importar el encabezado y pie de página global como diseños estáticos.

ventana emergente activada por desplazamiento

Después de importar la plantilla, haga clic en el icono para editar el área del encabezado personalizado.

Divi animaciones de botones retrasados

Esto lo llevará al editor de diseño de plantilla del cuerpo donde agregaremos las animaciones retrasadas al botón en el encabezado prefabricado.

8 animaciones de botón retrasado para su CTA de encabezado personalizado

Las 8 animaciones de botón diferido a continuación incluyen una combinación única de opciones de animación Divi incorporadas y la propiedad de perspectiva en CSS. La propiedad de perspectiva agrega un efecto 3D cuando la animación del botón incluye un efecto de voltear o doblar. Para la mayoría de estas animaciones, agregaremos animación tanto al botón como a su columna principal para obtener un movimiento más complejo.

Aquí están…

# 1 rebote desplegable

Divi animaciones de botones retrasados

Configuración de botones:

La animación del botón de retraso de rebote desplegable es simple y efectiva. Para construirlo, abra la configuración del módulo de botones y actualice lo siguiente:

  • Estilo de animación: rebote
  • Dirección de animación: abajo
  • Duración de la animación: 1100 ms
  • Retraso de animación: 1500 ms
  • Opacidad de inicio de animación: 100%

Divi animaciones de botones retrasados

# 2 3D Vertical Flip

Divi animaciones de botones retrasados

Para crear la animación del botón de retraso vertical de volteo vertical 3D, primero debe agregar la propiedad de perspectiva a la columna principal del botón (columna 2).

Configuraciones de columna

Para agregar perspectiva a la columna, abra la configuración de la fila y luego haga clic para editar la configuración de la columna 2. En la pestaña avanzada, agregue el siguiente CSS personalizado al elemento principal:

01
perspective: 150px

Divi animaciones de botones retrasados

Configuración de botones:

  • Estilo de Animación: Flip
  • Dirección de animación: centro
  • Duración de la animación: 1500 ms
  • Retraso de animación: 1000 ms
  • Intensidad de animación: 400%
  • Opacidad de inicio de animación: 100%

Divi animaciones de botones retrasados

# 3 3D Horizontal Flip

Divi animaciones de botones retrasados

La animación del botón de retraso horizontal 3D Flip es similar a la vertical. La única diferencia real es la dirección de la animación.

Configuraciones de columna:

Primero, asegúrese de haber agregado la perspectiva a la columna 2 agregando el siguiente CSS personalizado al elemento principal:

01
perspective: 150px

Divi animaciones de botones retrasados

Configuración de botones:

Luego abra la configuración del módulo de botones y actualice lo siguiente:

  •  Alineación de botones: centro

Esto asegura que el giro horizontal esté centrado con la propiedad de perspectiva principal.

Divi animaciones de botones retrasados

  • Estilo de Animación: Doblar
  • Dirección de animación: centro
  • Duración de la animación: 1000 ms
  • Retraso de animación: 2000 ms
  • Intensidad de animación: 400%
  • Opacidad de inicio de animación: 100%
  • Curva de velocidad de animación: lineal

Divi animaciones de botones retrasados

# 4 Dropdown Bounce + 3D Vertical Flip

Divi animaciones de botones retrasados

Esta animación de botón retrasado se logra combinando una animación de rebote (agregada a la columna) y una animación de volteo (agregada al botón).

Aquí se explica cómo construirlo.

Configuraciones de columna:

Abra la configuración de la fila y actualice la configuración de la columna 2 con lo siguiente:

  • Estilo de animación: rebote
  • Dirección de animación: abajo
  • Retraso de animación: 2000 ms
  • Opacidad de inicio de animación: 100%

Luego agregue la perspectiva css al elemento principal de la siguiente manera:

01
perspective: 150px;

Divi animaciones de botones retrasados

Configuración de botones:

Una vez que la configuración de la columna esté en su lugar, actualice la configuración del módulo de botones de la siguiente manera:

  • Estilo de Animación: Flip
  • Dirección de animación: centro
  • Duración de la animación: 1500 ms
  • Retraso de animación: 1000 ms
  • Intensidad de animación: 400%
  • Opacidad de inicio de animación: 100%

Divi animaciones de botones retrasados

El truco aquí es asegurarse de retrasar el inicio del lanzamiento una vez que se complete la animación de la columna.

# 5 Descenso (deslizar hacia abajo + rotar)

Divi animaciones de botones retrasados

Para obtener la animación «swoop down» para la próxima, necesitaremos combinar una animación de diapositiva (agregada a la columna) y una animación de rollo (agregada al botón).

Vamos a hacerlo.

Configuraciones de columna:

Abra la configuración de la fila y actualice la configuración de la columna 2 de la siguiente manera:

  • Estilo de animación: diapositiva
  • Dirección de animación: abajo
  • Retraso de animación: 1000 ms
  • Opacidad de inicio de animación: 100%

Luego agregue el siguiente CSS personalizado al elemento principal:

01
perspective: 150px

Divi animaciones de botones retrasados

Configuración de botones:

Luego actualice la configuración del botón de la siguiente manera:

  • Estilo de Animación: Rollo
  • Dirección de animación: abajo
  • Duración de la animación: 1500 ms
  • Retraso de animación: 1000 ms
  • Opacidad de inicio de animación: 100%

Divi animaciones de botones retrasados

# 6 Ampliar (zoom + transformar escala)

Divi animaciones de botones retrasados

Esta animación de botón retrasado es única ya que implica escalar el botón usando la escala de transformación. Luego agregamos la animación de zoom al botón.

Aquí te explicamos cómo hacerlo.

Configuración de botones:

Abra la configuración del módulo de botones y actualice lo siguiente:

  • Escala de transformación: 175%
  • Estilo de Animación: Zoom
  • Dirección de animación: centro
  • Duración de la animación: 1500 ms
  • Retraso de animación: 1000 ms
  • Opacidad de inicio de animación: 100%

Divi animaciones de botones retrasados

# 7 Pulso (acercar + alejar)

Divi animaciones de botones retrasados

Esta animación de pulso retardado se crea combinando una animación de alejamiento (agregada a la columna) y una animación de alejamiento (agregada al botón).

Vamos a hacerlo.

Configuraciones de columna:

Abra la configuración de la fila y actualice la configuración de la columna 2 de la siguiente manera:

  • Estilo de Animación: Zoom
  • Dirección de animación: centro
  • Duración de la animación: 1000 ms
  • Retraso de animación: 2000 ms
  • Intensidad de animación: -100%
  • Opacidad de inicio de animación: 100%

Divi animaciones de botones retrasados

Observe que agregamos un valor negativo (-100%) para la intensidad de la animación. Esto hace que la columna tenga el efecto opuesto que reducirá la columna / botón (o alejará).

Configuración de botones:

Luego actualice la configuración del botón de la siguiente manera:

  • Estilo de Animación: Zoom
  • Dirección de animación: centro
  • Duración de la animación: 1500 ms
  • Retraso de animación: 1000 ms
  • Intensidad de animación: 50%
  • Opacidad de inicio de animación: 100%

Divi animaciones de botones retrasados

Observe que el retraso de la animación está configurado para que ocurra 1000 ms antes de la animación de la columna, de modo que el botón se acerque antes de alejarse.

# 8 Espiral (deslizar a la izquierda + girar)

Divi animaciones de botones retrasados

Esta animación final de botón retrasado combina una animación de diapositiva (agregada a la columna) y una animación de volteo de 720 grados (agregada al botón).

Aquí te explicamos cómo hacerlo.

Configuraciones de columna:

Primero, abra la configuración de la fila y actualice la configuración de la columna 2 de la siguiente manera:

  • Estilo de animación: diapositiva
  • Dirección de animación: izquierda
  • Duración de la animación: 2000 ms
  • Retraso de animación: 2000 ms
  • Intensidad de animación: 100%
  • Opacidad de inicio de animación: 100%

Divi animaciones de botones retrasados

Configuración de botones:

Luego actualice la configuración del módulo de botones de la siguiente manera:

  • Estilo de Animación: Flip
  • Dirección de animación: centro
  • Duración de la animación: 2000 ms
  • Retraso de animación: 2000 ms
  • Intensidad de animación: 800%
  • Opacidad de inicio de animación: 100%

Divi animaciones de botones retrasados

Observe aquí que la intensidad de la animación se establece en 800%. Esto hará que el botón gire tres veces para crear el efecto de giro.

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

You have Successfully Subscribed!