Esta publicación es la parte 3 de 5 en nuestra mini serie 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!
En la publicación de ayer, discutí algunos de los diversos beneficios de usar un temporizador de cuenta regresiva en su sitio web de WordPress, y también le mostré cómo cambiar el estilo del módulo de temporizador de cuenta regresiva de Divi con «elegancia simple». En la publicación de hoy, continuaré la serie de tutoriales y te mostraré cómo usar el módulo de temporizador de cuenta regresiva de Divi para crear una cuenta regresiva audaz y colorida para el sitio web. ¡Empecemos!
Tal como hicimos en la publicación de ayer, echemos un vistazo a nuestro punto de partida. A continuación se muestra una captura de pantalla del módulo de cuenta regresiva Divi con la configuración predeterminada.
Ahora, echemos un vistazo a dónde vamos.
Como sugiere el título de esta publicación, este temporizador de cuenta regresiva está diseñado para ser audaz. Está diseñado para captar la atención del visitante del sitio web y asegurarse de que sepa que se avecina algo grande.
Lo mejor de este estilo de cuenta regresiva es que se puede usar en cualquier tipo de sitio web. Su diseño moderno y minimalista le permite combinar muy bien con cualquier estilo de página, mientras que su color llamativo captará la atención del usuario. ¿No eres fanático del rojo? No se preocupe, le mostraré cómo cambiarlo para que coincida con la paleta de colores de cualquier sitio web más adelante en este tutorial.
Creación del diseño del módulo del temporizador de cuenta regresiva Divi «audaz y colorido»
Suscríbete a nuestro canal de Youtube
Preparación de los elementos de diseño
¡Otro gran beneficio de este estilo de temporizador de cuenta regresiva es que en realidad no hay elementos de diseño para preparar! Todo se hace con el poder de CSS (¡y los controles Divi incorporados también, por supuesto!).
Implementando el Diseño con Divi
Como no hay elementos de diseño que preparar, podemos dirigirnos directamente a Divi . En aras de la simplicidad, voy a crear una nueva página para este tutorial, sin embargo, puede seguirlo fácilmente si desea agregar esto a una página existente. Así que voy a crear una nueva página en WordPress, habilitar Divi y luego pasar al magnífico nuevo generador visual.
Si ha creado una nueva página como la mía, entonces ya hay una sección en blanco para nosotros. 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. Sí, lo has adivinado, selecciona el temporizador de cuenta atrás.
Ajuste de la configuración del módulo
Ahora es el momento de comenzar a profundizar en la configuración del temporizador de cuenta regresiva. El modal de configuración para el temporizador de cuenta regresiva debería abrirse automáticamente una vez que haya agregado el módulo; sin embargo, si ya lo cerró, pase el mouse sobre el temporizador de cuenta regresiva y luego haga clic en el icono de engranaje en el conjunto de controles gris oscuro que aparece.
Ahora, aquí está la configuración que cambiaremos. Si hay una configuración que no se menciona a continuación, déjela como predeterminada.
En la configuración general :
- elige una fecha para la cuenta regresiva (elegí el 1 de enero)
- cambiar el color de fondo a #e6434d
Así es como debería verse la configuración general:
A continuación, haga clic en la pestaña de la configuración de Diseño :
- cambie todas las fuentes (encabezado, números y etiquetas) a ‘Oswald’, con mayúsculas (icono TT) y negrita
¡Ahora haz clic en guardar! Así es como debería verse su módulo de cuenta regresiva hasta ahora:
¡Nada mal! ¡Ahora el CSS para terminar las cosas!
Agregar el CSS personalizado
¡Lo último que debemos hacer es agregar un poco de magia CSS personalizada para llevarnos el resto del camino hasta allí!
Sin embargo, antes de que podamos comenzar a agregar el CSS personalizado, necesitaremos agregar nuestras propias clases de CSS personalizadas para que solo personalicemos el CSS del módulo de temporizador de cuenta regresiva único en el que estamos trabajando ahora, y no TODOS los temporizadores de cuenta regresiva que son en el sitio o estará en el sitio.
Abra la configuración del módulo y haga clic en la pestaña CSS de la configuración del módulo y agregue custom-countdown-2 como la clase CSS. Por supuesto, puede nombrar la clase CSS como desee, pero también tendrá que cambiar el nombre de las clases en el CSS a continuación para que funcione.
Bien, ahora estamos listos para agregar el CSS personalizado. Tendrá la opción de agregar el CSS personalizado al cuadro de CSS personalizado de Opciones de tema Divi , o el cuadro de CSS personalizado en la configuración de página individual. La diferencia es que el cuadro de CSS personalizado en la configuración de la página solo agregará el CSS a una página, mientras que agregarlo a Divi Theme Options lo agregará a todas las páginas del sitio.
Si cree que agregará más temporizadores de cuenta regresiva más adelante con este mismo estilo en otras páginas, agregue el CSS al panel de Opciones del tema Divi. De lo contrario, puede agregarlo al cuadro CSS personalizado de configuración de la página.
Para abrir la configuración de la página, haga clic en el icono de engranaje morado en la parte inferior de la 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 así.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
|
.custom-countdown-2 { max-width: 620px; margin-left: auto; margin-right: auto; border-radius: 8px; box-shadow: 6px 4px 74px #b36e6e;}.custom-countdown-2 .value {letter-spacing: 6px;background-color: #dc2d43;padding: 30px 6px !important;padding-left: 11px !important;width: 89px !important;}.custom-countdown-2 .days {margin-right: 37px;}.custom-countdown-2 div.sep.section p {display: none;}.custom-countdown-2.et_pb_countdown_timer .section.values {width: 18%; }.custom-countdown-2 .days .value { width: 129px !important;} |
Si usó el cuadro CSS personalizado dentro de la configuración de la página individual, entonces debería haberlo visto actualizarse en tiempo real, gracias a la actualización en vivo en el nuevo generador visual de Divi. Con fines de aprendizaje, puede ser útil pegar el CSS anterior fragmento por fragmento. Eso le ayudará a mostrar qué CSS está controlando qué elemento del temporizador de cuenta regresiva. Esta puede ser una gran experiencia de aprendizaje si eres nuevo en CSS.
Asegúrese de guardar los cambios en el cuadro de configuración de la página después de pegar el CSS, así como en la página misma.
Ahora, ¡admiremos lo que creamos!
Mañana: cómo crear un temporizador de cuenta regresiva con un fondo degradado animado
Espero que hayas disfrutado el tutorial del temporizador de cuenta regresiva de hoy. ¡Aún nos quedan dos días de nuestra miniserie! ¡Así que vuelva mañana para aprender cómo agregar un hermoso fondo degradado animado a su temporizador de cuenta regresiva en Divi!
¡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!