8 animaciones de botones retrasadas para su CTA de encabezado Divi personalizado
Publicado: 2020-01-23Agregar animaciones de botones retrasadas a cualquier CTA puede ser una forma efectiva de llamar la atención de los visitantes y, a su vez, aumentar la probabilidad de obtener un clic. En este tutorial, le mostraremos cómo usar Divi para crear una animación de 8 botones retardados para un CTA de encabezado personalizado. Para hacer esto, combinaremos configuraciones de animación de formas que quizás nunca hayas considerado. Además, estas animaciones se pueden aplicar a casi cualquier botón de llamada a la acción en su sitio.
Empecemos.
Vistazo
Aquí hay un vistazo a las 8 animaciones de botones retrasadas que agregaremos al CTA del encabezado personalizado en Divi:
Descargue GRATIS el diseño de animaciones de botones de encabezado de 8 retrasos
Para tener en sus manos las 8 animaciones de botones retrasadas de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! 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 le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json al Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, deberá instalar y activar Divi Theme. Asegúrese de tener la última versión de Divi.
Deberá descargar el paquete Second Theme Builder, ya que utilizaremos el encabezado personalizado en la plantilla de página 404 de ese paquete para este tutorial.
Después de eso, estará listo para comenzar.
Importación de la plantilla del segundo paquete de creación de temas
Desde el panel de WordPress, vaya a Divi> Theme Builder. 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 de importación. (Este archivo de importación estará dentro de la carpeta Second Theme Builder Pack)
También puede seleccionar la opción para importar el encabezado y pie de página globales como diseños estáticos.
Una vez importada la plantilla, haga clic en el icono para editar el área de encabezado personalizado.
Esto lo llevará al editor de diseño de la plantilla del cuerpo, donde agregaremos las animaciones retrasadas al botón en el encabezado prefabricado.
8 animaciones de botones retrasadas para su CTA de encabezado personalizado
Las 8 animaciones de botones retrasadas a continuación incluyen una combinación única de opciones de animación Divi integradas y la propiedad CSS de perspectiva. 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
Configuración de botones:
La animación del botón de rebote retrasado del menú 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: 1100ms
- Retraso de animación: 1500 ms
- Opacidad inicial de la animación: 100%
# 2 Volteo vertical 3D
Para crear la animación del botón de volteo vertical en 3D con retraso, primero debe agregar la propiedad de perspectiva a la columna principal del botón (columna 2).
Configuración 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:
perspective: 150px
Configuración de botones:
- Estilo de animación: Flip
- Dirección de animación: Centro
- Duración de la animación: 1500ms
- Retraso de animación: 1000 ms
- Intensidad de animación: 400%
- Opacidad inicial de la animación: 100%
# 3 Volteo horizontal 3D
La animación del botón de giro horizontal 3D retrasada es similar al giro vertical. La única diferencia real es la dirección de la animación.
Configuración de columna:
Primero, asegúrese de haber agregado la perspectiva a la columna 2 agregando el siguiente CSS personalizado al elemento principal:
perspective: 150px
Configuración de botones:
A continuación, 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.
- Estilo de animación: Doblar
- Dirección de animación: Centro
- Duración de la animación: 1000ms
- Retraso de animación: 2000 ms
- Intensidad de animación: 400%
- Opacidad inicial de la animación: 100%
- Curva de velocidad de animación: lineal
# 4 Rebote desplegable + Volteo vertical 3D
Esta animación de botón retrasada se logra combinando una animación de rebote (agregada a la columna) y una animación de volteo (agregada al botón).
He aquí cómo construirlo.
Configuración 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 inicial de la animación: 100%
Luego agregue la perspectiva css al elemento principal de la siguiente manera:
perspective: 150px;
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: 1500ms
- Retraso de animación: 1000 ms
- Intensidad de animación: 400%
- Opacidad inicial de la animación: 100%
El truco aquí es asegurarse de retrasar el inicio del giro después de que se complete la animación de la columna.
# 5 Desplácese hacia abajo (deslice hacia abajo + Rotar)
Para obtener la animación "swoop down" para la siguiente, necesitaremos combinar una animación de diapositiva (agregada a la columna) y una animación de rollo (agregada al botón).
Vamos a hacerlo.
Configuración 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 inicial de la animación: 100%
Luego agregue el siguiente CSS personalizado al elemento principal:
perspective: 150px
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: 1500ms
- Retraso de animación: 1000 ms
- Opacidad inicial de la animación: 100%
# 6 Ampliar (zoom + escala de transformación)
Esta animación de botón retrasada es única porque implica escalar el botón usando escala de transformación. Luego agregamos la animación de zoom al botón.
He aquí cómo hacerlo.
Configuración de botones:
Abra la configuración del módulo de botones y actualice lo siguiente:
- Transformar escala: 175%
- Estilo de animación: Zoom
- Dirección de animación: Centro
- Duración de la animación: 1500ms
- Retraso de animación: 1000 ms
- Opacidad inicial de la animación: 100%
Pulso # 7 (acercar + alejar)
Esta animación de pulso retardado se crea combinando una animación de alejamiento (agregada a la columna) y una animación de acercamiento (agregada al botón).
Vamos a hacerlo.
Configuración 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: 1000ms
- Retraso de animación: 2000 ms
- Intensidad de animación: -100%
- Opacidad inicial de la animación: 100%
Observe que agregamos un valor negativo (-100%) para la intensidad de la animación. Esto hace que la columna tenga el efecto opuesto que encogerá la columna / botón (o se 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: 1500ms
- Retraso de animación: 1000 ms
- Intensidad de animación: 50%
- Opacidad inicial de la animación: 100%
Observe que el retraso de la animación está configurado para ocurrir 1000 ms antes de la animación de la columna, de modo que el botón se acercará antes de alejarse.
# 8 Espiral (deslizar a la izquierda + girar)
Esta animación de botón retrasada final combina una animación de diapositiva (agregada a la columna) y una animación de giro de 720 grados (agregada al botón).
He aquí cómo hacerlo.
Configuración 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 inicial de la animación: 100%
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 la animación: 800%
- Opacidad inicial de la animación: 100%
Observe aquí que la intensidad de la animación se establece en 800%. Esto hará que el botón se gire tres veces para crear el efecto de giro.
Resultados finales
Echemos un último vistazo a las 8 animaciones de botones retrasadas.
Pensamientos finales
Espero que estas 8 animaciones de botones retrasadas ayuden a impulsar las conversiones para sus CTA de encabezado personalizados. ¡También puede usar estos ejemplos como inspiración y explorar diseños y aplicaciones adicionales para su propio sitio web!
¿Tienes un favorito?
Espero tener noticias tuyas en los comentarios.
¡Salud!