Cómo crear un temporizador de cuenta regresiva con un fondo degradado animado

¡Empecemos!

El módulo Divi Countdown: antes y después

Probablemente esté familiarizado con el módulo de temporizador de cuenta regresiva predeterminado, pero echemos un vistazo y comparemos con lo que crearemos hoy:

Y aquí está la cuenta regresiva que crearemos hoy:

Debido a la velocidad de fotogramas de los GIF animados, la animación degradada no se ve tan fluida en la imagen de arriba. ¡Afortunadamente, se verá genial en tu sitio web de Divi!

Además del degradado animado, esta cuenta regresiva tiene algunas sombras que ayudan a que el temporizador salga de la página. Puede ver esto en la sombra paralela de toda la cuenta regresiva, así como en la sombra del texto de los números. Esto le da profundidad y textura a la cuenta regresiva que hace que la cuenta regresiva se sienta viva en su página web.

Cómo crear un temporizador de cuenta regresiva con un fondo degradado animado

Suscríbete a nuestro canal de Youtube

Preparación de los elementos de diseño

Este temporizador de cuenta regresiva está hecho con los controles Divi incorporados, así como algunos CSS personalizados, por lo que no hay imágenes para buscar, descargar o editar. Sin embargo, necesitaremos usar un animador de degradado en línea para crear el CSS necesario para nosotros.

Hay algunos generadores de gradientes gratuitos, pero el que uso y recomiendo es  https://www.gradient-animator.com/

Lo primero que debe hacer con el generador es agregar sus colores. Usaremos los siguientes dos colores:

01
#6990af; #74b2af;

Haga clic en el botón verde ‘Agregar color’ y agregue el primer color. Luego, haz lo mismo nuevamente para agregar el segundo color desde arriba.

Luego puede hacer clic en el botón de vista previa para ver su animación de degradado en acción en el fondo. Dejé las otras configuraciones en su estado predeterminado, pero siéntete libre de cambiar los ángulos y las velocidades si lo deseas.

Una vez que esté satisfecho con la animación, copie el código CSS en el centro de la página y péguelo en un archivo de texto en blanco para mantenerlo seguro. Volveremos a buscarlo en un rato.

Implementando el Diseño con Divi

Ahora que se ha creado nuestra animación, estamos listos para comenzar a crear el temporizador de cuenta regresiva en Divi . Al igual que con las publicaciones anteriores de esta serie, puede elegir crear el temporizador de cuenta regresiva de hoy en una página nueva o agregarlo a una página existente.

Para mantener las cosas lo más sencillas posible para este tutorial, voy a estar trabajando en una nueva página. Entonces, voy a crear una nueva página, habilitar Divi Builder y luego hacer clic en el botón «Usar Visual Builder».

Si ha creado una página nueva como hice yo, entonces ya debería haber una sección en blanco. De lo contrario, cree una nueva sección si está agregando esto a su página Divi existente.

Ahora vamos a agregar una fila haciendo clic en el icono del círculo verde (+), luego haga clic en el icono de la fila de una columna como lo indica la flecha roja en la captura de pantalla a continuación.

A continuación, Divi le pedirá automáticamente que elija un módulo de la lista. Así que elija el temporizador de cuenta regresiva, o como atajo, puede comenzar a escribir el nombre y aparecerá convenientemente en la parte superior.

Ajuste de la configuración del módulo

Una vez que haya agregado el módulo del temporizador de cuenta regresiva, tendrá la configuración del temporizador de cuenta regresiva abierta frente a usted. Continúe y elija una fecha para la cuenta regresiva. Luego, cambia el color de fondo a #74b2af.

A continuación, haga clic en la pestaña de la  configuración de Diseño  :

  • cambie la fuente de los números y la fuente de las etiquetas a negrita y mayúsculas (icono TT)
  • cambiar el tamaño de fuente de los números a 60 px
  • cambie el tamaño de fuente de las etiquetas a 15px

Ahora haga clic en guardar, y esto es lo que debería estar viendo hasta ahora:

Sin embargo, sigue siendo bastante básico. ¡Tenemos algo de CSS para agregar, incluido nuestro degradado animado!

Agregar el CSS personalizado

Antes de que podamos comenzar a agregar el CSS personalizado, debemos agregar nuestras propias clases de CSS personalizadas para que solo personalicemos el CSS de este temporizador de cuenta regresiva en el que estamos trabajando hoy, y no TODOS los temporizadores de cuenta regresiva que están en el sitio o lo harán. estar en el sitio.

Abra la configuración del módulo, haga clic en la pestaña CSS de la configuración del módulo y agregue  custom-countdown-4  como la clase CSS.

Bien, ahora que tenemos nuestra clase personalizada en su lugar, estamos listos para agregar el CSS personalizado. Tiene varias opciones de dónde desea colocar el CSS personalizado, incluido el cuadro CSS personalizado de Opciones de tema Divi y el cuadro CSS personalizado de Configuración de página Divi para la página individual.

Recomiendo agregarlo al cuadro CSS personalizado de configuración de página individual a través del generador visual para que pueda ver cómo se actualiza en tiempo real.

Para abrir la configuración de la página y su cuadro de CSS personalizado, haga clic en el icono de engranaje morado en la parte inferior de la pantalla, como se muestra a continuación. Si no ve el icono de engranaje, haga clic en el botón morado que ve para exponer el resto del menú.

Luego puede copiar y pegar el CSS a continuación en el cuadro de CSS personalizado.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
.custom-countdown-4.et_pb_countdown_timer {
max-width: 620px;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
box-shadow: 0px 12px 50px #a9a9a9;
}
 
.custom-countdown-4.et_pb_countdown_timer .section p {
text-shadow: 0px 3px 20px #658586;
}
 
.custom-countdown-4 .days {
margin-right: 23px;
}
.custom-countdown-4 .label {
font-weight: 600 !important;
text-shadow: none !important;
}

¡El CSS anterior nos lleva casi hasta el final! Pero notará que el fondo es solo el color estático. Todavía necesitamos agregar el CSS personalizado para la animación de gradiente para el fondo.

Regrese a donde guardó el CSS que generó el generador. Vamos a copiarlo en la página CSS, pero primero debemos agregarle nuestra clase personalizada.

Para hacer esto, simplemente agregue .custom-countdown-4 { a la primera parte del código de animación de degradado. Y agregue un corchete de cierre ( } ) justo antes del código @-webkit-keyframes. Opcionalmente, puede simplemente copiar mi código a continuación y pegarlo debajo de donde agregó el código CSS anterior. ¡Pero quería que aprendieras a usar el animador degradado para que puedas usarlo también en el futuro!

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
.custom-countdown-4 {
background: linear-gradient(270deg, #6990af, #74b2af);
background-size: 400% 400%;
-webkit-animation: AnimationName 30s ease infinite;
-moz-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s ease infinite;
}
@-webkit-keyframes AnimationName {
 0%{background-position:0% 50%}
 50%{background-position:100% 50%}
 100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
 0%{background-position:0% 50%}
 50%{background-position:100% 50%}
 100%{background-position:0% 50%}
}
@keyframes AnimationName {
 0%{background-position:0% 50%}
 50%{background-position:100% 50%}
 100%{background-position:0% 50%}
}

¡Y eso es todo el CSS que necesitamos agregar! ¡No olvide guardar la configuración de la página, así como la página misma!

Como siempre, admiremos nuestra creación

Mañana: Cómo agregar un video de fondo de pantalla completa a su temporizador de cuenta regresiva

¡La publicación de mañana será nuestra publicación final de la miniserie del módulo del temporizador de cuenta regresiva Divi! Sin embargo, guardamos lo mejor para el final, así que regrese mañana mientras le muestro cómo crear un cronómetro de cuenta regresiva épico con un video de fondo moderno pero único que seguramente impresionará a los visitantes de su sitio web.

¡Asegúrate de  suscribirte a nuestro boletín de correo electrónico  y  canal de YouTube  para que nunca te pierdas un gran anuncio, un consejo útil o un obsequio de Divi!