Esta publicación es la parte 2 de 5 en nuestra miniserie titulada 5 formas impresionantes de diseñar el módulo de temporizador de cuenta regresiva de Divi . ¡Estén atentos esta semana para conocer los cinco ejemplos únicos del módulo de cuenta regresiva de Divi, con un tutorial sobre cómo lograr cada uno!
¡Espero que hayas estado siguiendo nuestra miniserie hasta este momento! Hoy es el día _ de enseñarte cómo crear impresionantes temporizadores de cuenta regresiva para tu sitio web Divi. Como discutimos durante el día 1, los temporizadores de cuenta regresiva pueden ser una forma muy efectiva de generar anticipación para un nuevo producto, sitio web, evento, etc.
Sin embargo, como cualquier parte de su sitio web, el temporizador de cuenta regresiva no debe ser solo un elemento aburrido que solo está ahí para cumplir su propósito funcional. También puede ser una hermosa parte de la página que marca aún más la empresa. A diferencia del atrevido y colorido temporizador de cuenta regresiva de ayer que está destinado a saltar de la página, el temporizador de cuenta regresiva personalizado de hoy está diseñado para integrarse perfectamente en la página como si fuera parte de una obra de arte; casi como si fuera parte de la propia imagen de fondo.
Dado que esta miniserie se trata de impulsar a Divi más allá con las personalizaciones, es importante ver el punto de partida. O bien, el temporizador de cuenta regresiva en su estado predeterminado.
Ahora, echemos un vistazo a lo que vamos a crear hoy.
Similar al primer temporizador de cuenta regresiva que creamos el día 1 de la serie, este temporizador de cuenta regresiva utiliza una imagen de fondo de pantalla completa. Para que esté a la altura de ser «hermoso» como sugiere el título de nuestra publicación, debe comenzar con una hermosa foto de fondo. Hablaremos más sobre eso en un momento.
La transparencia del color de fondo de la cuenta regresiva le da el aspecto de «vidrio esmerilado» que se suma al efecto invernal y permite que se vea la imagen de fondo, lo que ayuda a mezclar el temporizador de cuenta regresiva en la imagen. Por último, el color utilizado en los números del temporizador de cuenta regresiva, así como el fondo del título, es el mismo color de los árboles en la foto. Nuevamente, esto ayuda a que el temporizador de cuenta regresiva se vea como si fuera parte de la imagen.
Creación del diseño del módulo del temporizador de cuenta regresiva Divi «Magnífico transparente»
Suscríbete a nuestro canal de Youtube
Preparación de los elementos de diseño
El único elemento de diseño que tenemos que preparar es la imagen de fondo. El resto del temporizador de cuenta regresiva se crea a través de los controles integrados de Divi, así como CSS personalizado.
La imagen que vamos a utilizar se puede descargar de forma gratuita desde Pexels y utilizarse sin atribución. #526771
Continúe y haga clic en el enlace de arriba, y haga clic en el botón verde gigante «Descarga gratuita».
Lo último que debemos hacer para preparar el elemento de diseño antes de dirigirnos a Divi es obtener el color correcto para usar. Como mencioné anteriormente, una de las razones por las que este diseño funciona es que tomamos el color que se encuentra en los árboles de nuestra imagen y lo ponemos en nuestro temporizador de cuenta regresiva. Esto ayuda a que se mezcle bien. Entonces, para hacer eso, usaré Photoshop, sin embargo, hay muchas otras herramientas que puede usar para obtener un color de una imagen, incluidas las herramientas de desarrollo (inspector) que se encuentran en el navegador Chrome.
Lo que hace que esta imagen de fondo en particular sea fácil de combinar es el hecho de que en realidad solo tiene dos colores en varios tonos: blanco y verde oscuro grisáceo. Si va a elegir una imagen diferente para usar como imagen de fondo, le recomendaría buscar una imagen que tenga colores mínimos de manera similar.
Implementando el Diseño con Divi
Muy bien, nuestra imagen se ha descargado y sabemos qué color usar. Ahora es el momento de dirigirse a Divi . Esta cuenta regresiva se vería muy bien como una página de destino completa o una página «en construcción», sin embargo, también puede agregarla a una página existente si lo desea. Sin embargo, para este tutorial, lo guiaré para agregarlo a una página nueva, pero aún puede seguirlo fácilmente si lo está agregando a una página existente. Entonces, voy a crear una nueva página, darle un título, habilitar Divi y hacer clic en el botón azul «Usar Visual Builder».
Si está creando una nueva página como yo, entonces ya hay una sección en blanco en su lugar. 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.
Divi le pedirá automáticamente que elija un módulo de la lista. Divi filtrará automáticamente los módulos cuando comience a escribir «cuenta regresiva». Luego haga clic en Temporizador de cuenta regresiva para agregarlo a la página.
Puede continuar y agregar un título de temporizador de cuenta regresiva, así como elegir una fecha. Solo por diversión, elegí mi cumpleaños
Volveremos a la configuración del módulo en un momento, pero por ahora, haga clic en el botón de marca de verificación verde para guardar el módulo y cerrar la configuración.
A continuación, agregaremos nuestra imagen de fondo a la sección. Para hacer esto, pase el cursor sobre la sección hasta que la vea delineada en azul. Luego, en la esquina superior izquierda, haga clic en el ícono de ajustes para abrir la configuración de la sección.
Luego, cargue su imagen como imagen de fondo haciendo clic en el botón de carga como se muestra en la captura de pantalla a continuación.
Asumiendo que estás usando la misma imagen que yo, así es como debería verse tu cuenta regresiva hasta ahora.
¡Estamos progresando!
Ajuste de la configuración del módulo
Ahora es el momento de que comencemos a profundizar en la configuración del temporizador de cuenta regresiva. Pase el cursor sobre el temporizador de cuenta regresiva y abra la Configuración del módulo (haga clic en el ícono de ajustes en el conjunto de controles gris oscuro que aparece cuando pasa el mouse sobre el temporizador de cuenta regresiva).
A continuación encontrará las configuraciones que cambiaremos. Si hay una configuración que no se menciona, puede dejarla como predeterminada.
En la pestaña Configuración general :
- cambiar el color de fondo a: rgba(255,255,255,0.5)
En la pestaña Configuración de diseño :
- cambie todas las fuentes a ‘PT Sans Narrow’
- cambie la fuente del encabezado a mayúsculas (ícono TT)
- cambie la fuente de las etiquetas a negrita y mayúsculas (ícono TT)
- cambie el color del texto de los números y las etiquetas a #526771
- cambie el tamaño de fuente del encabezado a 29
- cambie el tamaño de fuente de los números a 65px
- cambie el tamaño de fuente de las etiquetas a 15 px
Agregar el CSS personalizado
¡Lo último que necesitamos agregar es un poco de magia CSS personalizada! Al igual que los últimos dos días de esta serie, puede optar por agregar el CSS personalizado al cuadro de CSS personalizado de Opciones de tema Divi o al cuadro de CSS personalizado de configuración de página individual. La diferencia es que la configuración de la página individual solo cargará el CSS para esa página, mientras que agregarlo a las Opciones del tema Divi cargará el CSS en cada página. Cualquiera de los dos funcionará, solo depende de si desea usar la misma cuenta regresiva en otra página. Si es así, continúe y agréguelo a las Opciones de tema Divi.
Quizás se pregunte por qué estamos agregando el CSS a una de las dos opciones mencionadas anteriormente, en lugar de hacerlo directamente en la pestaña CSS de la sección o fila del módulo. La razón es que Divi tiene áreas de CSS predirigidas en la pestaña CSS de la configuración de módulos, filas y secciones, sin embargo, no apunta a todas las clases de CSS que están disponibles en la hoja de estilo de Divi. Así que tendremos que llevar las cosas un paso más allá y agregar nuestro propio CSS.
Sin embargo, antes de que podamos comenzar a agregar nuestro CSS, necesitaremos agregar nuestras propias clases personalizadas para que solo personalicemos el CSS del módulo en el que estamos trabajando ahora, 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-3 como la clase CSS.
¡Ahora estamos listos para agregar nuestro CSS personalizado!
Si decide agregar el CSS solo a una página, deberá abrir la configuración de la página Divi. Para hacerlo, haga clic en el ícono de engranaje púrpura en la parte inferior de su pantalla. Si no ve el icono de engranaje, haga clic en el botón morado que ve para exponer el resto del menú. Luego, haga clic en la pestaña CSS y pegue el CSS a continuación en el cuadro.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
|
.custom-countdown-3.et_pb_countdown_timer {max-width: 580px;margin-left: auto;margin-right: auto;}.custom-countdown-3.et_pb_countdown_timer .title { background-color: #6f848d; padding-top: 10px; padding-bottom: 10px; width: 90%; margin-left: auto; margin-right: auto; margin-top: -68px;}.custom-countdown-3 .et_pb_countdown_timer .sep {color: #969696;}.custom-countdown-3 .days { margin-right: 12px; } |
Si eligió poner el CSS personalizado en la configuración de la página Divi individual como lo hice yo, entonces probablemente notó que la cuenta regresiva cambió drásticamente al instante. Eso es, por supuesto, gracias a la actualización en vivo que es parte del nuevo constructor visual de Divi. Esta actualización en vivo es excelente por muchas razones, pero en este ejemplo, con el CSS, le permite ver exactamente lo que hace el CSS. Por eso recomiendo pegar el CSS en varios trozos. Eso le ayudará a saber cómo funciona el CSS.
Por último, asegúrese de guardar los cambios. Deberá guardar los cambios en la configuración de la página, así como en toda la página. ¡Ahora hemos terminado!
Ahora adelante, date una palmadita en la espalda por lo que acabas de crear. Debería verse algo como esto:
Mañana: cómo crear un temporizador de cuenta regresiva colorido y audaz (pero elegante)
¡Espero que este tutorial te haya inspirado para crear tus propios temporizadores de cuenta regresiva verdaderamente únicos e impresionantes en tu sitio web Divi! No lo olvides, esta es solo la parte 1 de 5 en nuestra miniserie. ¡Vuelva mañana donde le mostraré cómo crear un temporizador de cuenta regresiva «audaz y colorido»!
¡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!