¿Le gustaría saber cómo personalizar el módulo "Temporizador de cuenta regresiva" de Divi con un GIF?
En el tutorial de hoy, le mostraremos cómo usar un video de fondo de pantalla completa en su curso. "Contador regresivo". Se puede utilizar para "crear suspenso" de una manera divertida y notable.
Vamos a empezar!
vista
Antes de sumergirnos en este tutorial, echemos un vistazo al resultado que queremos lograr.
Diseño de cuenta regresiva con Divi
Preparación de elementos de diseño.
La cuenta atrás que vamos a diseñar utiliza un vídeo de fondo. Hay muchos lugares para encontrar material de archivo gratuito o premium. Pero para este tutorial, aprovecharemos algunos videoclips gratuitos de videezy.
Aquí está el enlace directo al video que usaremos: partículas voladoras.
Implementación de diseño con Divi
Puede utilizar una página existente. Pero en aras de la simplicidad, trabajaremos en una nueva página.
Así que cree una nueva página y agregue una fila con la siguiente estructura de columnas.
Inserte el módulo " Contador regresivo ".
Ajuste de los parámetros del módulo
Primero, elija una fecha hasta la cuenta regresiva, luego edite:
- Usar color de fondo: NO
Ahora haga clic en la pestaña "Diseño" y cambie la configuración a continuación.
- Números Tamaño del texto: 85px
- Tamaño del texto de la etiqueta: 15px
OBSERVACION: parecerá que no hay cuenta regresiva porque eliminamos el color de fondo. Una vez que agreguemos nuestro video de fondo en las instrucciones a continuación, podremos ver la cuenta regresiva.
Configuración de los parámetros de la sección
Ahora tenemos que hacer algunos cambios menores en la sección. Pase el cursor sobre la sección y abra la configuración.
En la pestaña Contenido, ir a la configuración " Fondo Video »y luego Antecedentes Video MP4.
Cliquez sur « Añadir fondo Video » y agregue el video que descargamos anteriormente de videezy. Ahora debería ver el video de fondo que se reproduce detrás de nuestra cuenta regresiva.
Ahora solo tenemos que hacer un pequeño ajuste en la pestaña Avanzado parámetros del módulo de sección. Agregue el CSS personalizado a continuación en Elemento principal.
height: 100vh; 
Esto es lo que deberías ver hasta ahora.
CSS personalizado agregado
Lo último que debemos hacer es agregar el CSS personalizado para que nos lleve hasta el final.
Entonces, abra la configuración del módulo, haga clic en la pestaña "Avanzado" y agrega la clase CSS
- Clase CSS: cuenta regresiva personalizada 5
Ahora que se ha agregado nuestra clase personalizada, estamos listos para agregar nuestro CSS personalizado.
Para hacer esto, vaya a la configuración de la página.
Ir a la pestaña Avanzado y agregue el CSS personalizado a continuación.
.custom-countdown-5.et_pb_countdown_timer .sep {
display: none;
}
.custom-countdown-5.et_pb_countdown_timer .section.values {
border-left: 1px solid #808080;
}
.custom-countdown-5 .days {
border-left: none !important;
margin-right: 16px;
}
¡Luego guarda tus cambios y admira tu creación!
BONIFICACIÓN: personalización adicional
Podemos combinar un degradado animado con nuestro video de fondo para lograr una apariencia aún más única. Simplemente agregue el CSS a continuación (después del CSS anterior).
.et_pb_section:before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
-o-animation: colorcycle 20s ease infinite;
-moz-animation:
colorcycle 20s ease infinite;
-webkit-animation: colorcycle 20s ease infinite; animation: colorcycle 20s ease infinite;
background: linear-gradient(270deg, #a253e0, #f15b4f, #2ea3f2);
background-size: 600% 600%;
}
@-webkit-keyframes colorcycle { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-moz-keyframes colorcycle { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @keyframes colorcycle { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.et_pb_section_video_bg { opacity: .9; }Así es como se verá:
¡¡¡Descarga DIVI ahora!!!
Conclusión
Esperamos que este tutorial te sirva de inspiración para tus próximos proyectos. Divi. Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
También puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet.
Consulte también nuestra guía de Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
