The Divi Countdown Timer Module | Scoreapps

The Divi Countdown Timer Module

Cómo agregar, configurar y personalizar el módulo de temporizador de cuenta regresiva de Divi


Módulo de Temporizador de Cuenta Regresiva de Divi

El módulo de Temporizador de cuenta regresiva de Divi es una forma dinámica de mostrar un temporizador en tu sitio web. Puedes usarlo para contar los días hasta un lanzamiento de producto, un evento próximo, una promoción de temporada o incluso una página de “próximamente” para anunciar el lanzamiento de tu sitio web.

Ver una demostración en vivo de este módulo

Add a page and load the Visual Builder

Comenzar desde cero

Esta opción carga el Divi Builder con un diseño de página en blanco. Elige esta opción si deseas comenzar el diseño de tu página desde cero.

Elegir un diseño preestablecido

Esta opción te permite elegir entre nuestra gran biblioteca de diseños preestablecidos de Divi. Puedes elegir entre los diseños prediseñados de Divi, los que has creado y guardado en tu Biblioteca de Divi, o páginas existentes de tu sitio web que puedes clonar.

Crear con IA

Esta opción te permite crear un diseño de página completo usando Divi AI. Usando tu solicitud de texto e información sobre tu sitio web, puedes generar una estructura perfecta de página, luego construirla y llenarla con contenido e imágenes para darle vida rápidamente.

Divi Page Flow

Agregar el módulo de temporizador de cuenta regresiva (Countdown Timer) de Divi

Haz clic en el ícono verde + para insertar una fila.
Luego haz clic en el ícono gris + dentro de la fila para abrir la Biblioteca de Módulos de Divi, que contiene todos los módulos incluidos con el tema Divi.

Busca el módulo Countdown Timer y haz clic en él para cargarlo.
También puedes buscar en la biblioteca escribiendo el nombre del módulo en la barra de búsqueda.

Add the Divi Countdown Timer Module

Todas las opciones del módulo de temporizador de cuenta regresiva explicadas

Una vez que agregas el módulo, sus configuraciones aparecen automáticamente. Aquí es donde puedes configurar el contenido y estilos de diseño.

Estas configuraciones están organizadas en tres pestañas en la parte superior del módulo:

  • Contenido

  • Diseño

  • Avanzado

Divi Countdown Timer Module Position settings

Pestaña Contenido

Aquí encontrarás las opciones de contenido disponibles para el módulo.

Divi Countdown Timer Module Content Tab settings

Texto

Puedes editar el título del módulo y establecer la fecha y hora de la cuenta regresiva.

  • Título: Escribe el título que deseas mostrar en la parte superior del módulo.

  • Fecha: Selecciona en el calendario la fecha hasta la que quieres contar regresivamente.

  • Hora: Elige una hora específica usando los deslizadores para hora y minuto.

Enlace

Si deseas aplicar un enlace a todo el módulo, puedes hacerlo aquí.

  • URL del enlace del módulo: Pega la URL a la que se redirigirá al hacer clic.

  • Destino del enlace:

    • En la misma ventana: Abre el enlace en la misma pestaña.

    • En una nueva pestaña: Abre el enlace en una nueva pestaña del navegador.

Divi Countdown Timer Module Link settings

Fondo

Puedes establecer las siguientes opciones de fondo:

  • Color de fondo

  • Degradado de fondo

  • Imagen de fondo

  • Video de fondo

  • Patrón de fondo

  • Máscara de fondo

Cómo agregar un color de fondo:

Haz clic en el ícono de cubeta de pintura.
Haz clic en “Agregar color de fondo” y selecciona desde la paleta o usa el selector.

Divi Countdown Timer Module Background Color settings

Cómo agregar un degradado de fondo:


Haz clic en el ícono de degradado.
Haz clic en “Agregar degradado de fondo” y elige los colores y configuración:

  • Tipo de degradado

  • Dirección

  • Repetición

  • Unidad

  • Superposición sobre imagen (si hay una imagen de fondo)

Divi Countdown Timer Module Background Gradient settings

Cómo agregar una imagen de fondo:


Haz clic en el ícono de imagen.
Haz clic en el ícono gris + para abrir la biblioteca de medios.

Opciones:

  • Efecto Parallax

  • Tamaño de imagen

  • Posición

  • Repetición

  • Modo de fusión

Divi Countdown Timer Module Background Image settings

Cómo agregar un video de fondo:



Haz clic en el ícono de video.
Carga archivos .mp4 y .webm para compatibilidad.

Opciones:

  • Ancho y alto del video

  • Pausar video cuando se reproduce otro

Divi Countdown Timer Module Background Video settings

Cómo agregar un patrón de fondo:


Haz clic en el ícono de patrón.
Haz clic en “Agregar patrón de fondo” y selecciona el tipo desde el menú desplegable.

Opciones:

  • Color

  • Transformación

  • Tamaño

  • Repetición y desplazamiento

  • Modo de fusión

Divi Countdown Timer Module Background Pattern settings

Cómo agregar una máscara de fondo:



Haz clic en el ícono de máscara.
Haz clic en “Agregar máscara de fondo” y selecciona el tipo desde el menú.

Opciones:

  • Color

  • Transformación

  • Relación de aspecto

  • Tamaño

  • Modo de fusión

Divi Countdown Timer Module Background Mask settings

Etiqueta de administración

Aquí puedes dar al módulo un nombre personalizado que solo tú verás para mantener el contenido organizado en el backend. Por defecto, será el nombre del módulo.

Divi Countdown Timer Module Admin Label settings

Pestaña de Diseño

Aquí puedes encontrar todos los estilos y configuraciones visuales para el módulo.

Divi Countdown Timer Module Desing Tab settings

Texto

Esta sección configura el estilo de todo el texto en el módulo. Puedes ajustar estilos más específicos en otras secciones como “Texto del título” y “Texto del número”.

  • Alineación del texto: Izquierda, Centro, Derecha o Justificado

  • Color del texto: Claro u oscuro (ajustado desde las Opciones del Tema Divi)

  • Sombra del texto: Aplica una sombra a todo el texto del módulo, tanto el número como el título

Divi Countdown Timer Module Text settings

Texto del Título

Estas son las configuraciones y estilos específicos solo para el texto del título.
  • Nivel de Encabezado del Texto: Elige el nivel de encabezado asignado al texto del título: h1, h2, h3, h4, h5 o h6.
  • Fuente del Título: Selecciona la fuente que deseas usar. Puedes elegir otra fuente o subir una fuente personalizada.
  • Grosor del Título: Define qué tan negrita será la fuente.
  • Estilo del Texto del Título:
    • Cursiva
    • Mayúsculas
    • Versalitas
    • Subrayado
    • Tachado
  • Alineación del Título:
    • Izquierda
    • Centro
    • Derecha
    • Justificada
  • Color del Texto del Título: Elige un color desde la paleta de tu sitio o usa el selector.
  • Tamaño del Texto del Título: Usa el deslizador o escribe un valor numérico.
  • Espaciado de Letras del Título: Ajusta el espacio entre letras.
  • Altura de Línea del Título: Define el espacio entre líneas.
  • Sombra del Texto del Título: Aplica una sombra con dirección, intensidad y color.
Divi Countdown Timer Module Title Text settings

Texto de los Números

Configuraciones específicas solo para el texto de los números.
  • Fuente de los Números
  • Grosor de la Fuente
  • Estilo de la Fuente:
    • Cursiva
    • Mayúsculas
    • Versalitas
    • Subrayado
    • Tachado
  • Alineación del Texto de Números: Izquierda, centro, derecha, justificado
  • Color del Texto de Números
  • Tamaño del Texto de Números
  • Espaciado de Letras
  • Altura de Línea
  • Sombra del Texto

Divi Countdown Timer Module Number Text settings

Texto del Separador

Configura el estilo del separador entre los números del tiempo.
  • Fuente del Separador
  • Grosor y Estilo del Separador
  • Color del Separador
  • Tamaño, Espaciado y Altura de Línea
  • Sombra del Texto del Separador
Divi Countdown Timer Module Separator Text settings

Texto de las Etiquetas

Se refiere al estilo del texto que aparece debajo de los números (como "Días", "Horas").
  • Fuente y Grosor de la Etiqueta

  • Estilo del Texto
  • Alineación
  • Color, Tamaño, Espaciado de Letras y Altura de Línea
  • Sombra del Texto de Etiquetas


Divi Countdown Timer Module Label Text settings


Tamaño 

Controla el tamaño general del módulo.
  • Ancho
  • Ancho Máximo
  • Alineación del Módulo: Izquierda, Centro, Derecha
  • Altura Mínima, Altura y Altura Máxima


Divi Countdown Timer Module Sizing settings

Espaciado (Spacing)

Agrega márgenes o relleno interno.
  • Margen: Espacio exterior
  • Relleno (Padding): Espacio interior
  • Puedes enlazar los valores para mantener proporciones iguales (usando el ícono de cadena).
  • Valores predeterminados: 0

Divi Countdown Timer Module Spacing settings

Borde

Añade bordes al módulo.
  • Esquinas Redondeadas
  • Estilo de Borde: Completo o en un lado específico
  • Grosor del Borde (mínimo 1px)
  • Color del Borde
  • Estilo de Línea: sólido, punteado, doble, relieve, etc.

Divi Countdown Timer Module Border settings

Sombra de Caja 

Aplica una sombra al módulo completo.
  • Posición Horizontal y Vertical
  • Difuminado (Blur)
  • Intensidad del Despliegue (Spread)
  • Color de la Sombra
  • Posición de la Sombra: interna o externa

Divi Countdown Timer Module Box Shadow settings

Filtros 

Ajustes visuales del módulo:
  • Matiz (Hue)
  • Saturación
  • Brillo
  • Contraste
  • Invertir colores
  • Sepia
  • Opacidad
  • Desenfoque (Blur)
  • Modo de fusión (Blend Mode): Define cómo se mezcla con las capas debajo


Divi Countdown Timer Module Filters settings

Transformaciones (Transform)

Opciones avanzadas de transformación:
  • Escalar
  • Trasladar (Translate)
  • Rotar
  • Inclinar (Skew)
  • Puntos de origen
    Puedes usar valores numéricos o arrastrar para ajustar.

Divi Countdown Timer Module Transform settings


Animación


Agrega animaciones al módulo.
  • Duración
  • Retraso
  • Opacidad de inicio
  • Curva de velocidad
  • Repetición: Por defecto es una vez, pero puedes elegir que se repita (loop)

Divi Countdown Timer Module Animations settings

Pestaña Avanzado (Advanced Tab)


Para usuarios avanzados que quieran aplicar estilos con CSS personalizado.
Divi Countdown Timer Module Advanced Tab settings

ID y Clases CSS

  • Aplica un ID o una Clase CSS para personalizaciones adicionales usando el archivo CSS del tema hijo.

Divi Countdown Timer Module CSS ID and Classes settings

CSS Personalizado

  • Escribe CSS libre usando el selector selector.
  • Puedes aplicar CSS a partes específicas del módulo desde la pestaña de "Elementos del Módulo".

Divi Countdown Timer Module Custom CSS settings

Condiciones (Conditions)

Define cuándo mostrar el módulo en base a condiciones como:
  • Si el usuario ya compró
  • Qué navegador u OS está usando
  • Otras reglas de visibilidad

Divi Countdown Timer Module Display Conditions settings

Visibilidad

Controla en qué dispositivos se mostrará el módulo:

  • Desactivar en: Teléfono, Tableta, Escritorio

  • Desbordamiento Horizontal y Vertical:

    • Visible

    • Scroll

    • Oculto (Hidden)

    • Automático (Auto)

Divi Countdown Timer Module Visiblity settings


Transiciones

Controla la duración, el retraso y la curva de velocidad de la animación al pasar el cursor (hover).

  • Duración de Transición: Define cuánto dura (en milisegundos) la transición de la animación hover.

  • Retraso de Transición: Define el tiempo de espera (en milisegundos) antes de que comience la transición al pasar el cursor.

  • Curva de Velocidad de Transición: Determina cómo se acelera y desacelera la transición (puede ser lineal, ease-in, ease-out, etc.).

Divi Countdown Timer Module Transitions settings

Posición

Define la posición del módulo en la página:

  • Relativa (valor por defecto): El módulo sigue el flujo normal del documento, pero se puede ajustar con valores de desplazamiento vertical y horizontal. No afecta la posición de otros elementos.

  • Absoluta: El módulo se saca del flujo del documento y se posiciona en relación a su ancestro más cercano con posición definida o al bloque contenedor inicial.

  • Fija (Fixed): El módulo se saca del flujo y se posiciona con relación a la ventana del navegador. Ideal para crear módulos pegajosos (sticky).

Opciones Adicionales:

  • Desplazamiento Vertical: Ajusta la posición vertical del módulo.

  • Desplazamiento Horizontal: Ajusta la posición horizontal del módulo.

  • Z-index: Define la prioridad de apilamiento del módulo. Un valor más alto lo coloca por encima de otros módulos con menor z-index.

Divi Countdown Timer Module Position settings


Efectos de Desplazamiento 

Controla el comportamiento del módulo cuando el usuario se desplaza por la página.

  • Puedes hacer que el módulo se quede "pegado" (sticky) en la parte superior, inferior o ambas.

  • Puedes aplicar movimiento vertical, lo que permite ajustar la velocidad de desplazamiento del módulo sin afectar a los elementos que lo rodean.

  • El Disparador de Movimiento (Motion Trigger Effect) te permite decidir cuándo se activa el efecto de desplazamiento, dependiendo de si la parte superior, media o inferior del módulo está visible en pantalla.

Divi Countdown Timer Module Scroll Effects settings

Guardar tu Diseño

Una vez que termines de diseñar y configurar el módulo de cuenta regresiva:

  • Haz clic en la flecha verde en la esquina inferior derecha del módulo para guardar tus cambios.

  • Si cierras el módulo sin guardar, perderás todo tu trabajo.

Guardar el Diseño de la Página

Para guardar la página completa:

  • En Mac: presiona CMD + S

  • En Windows: presiona CTRL + S

  • O usa la barra de herramientas inferior de Divi:

    • Haz clic en el botón círculo púrpura con tres puntos (…)

    • Luego haz clic en el botón verde "Guardar" en la esquina inferior derecha.

Salir del Constructor Visual (Visual Builder)

Una vez guardados todos los cambios:

  • Haz clic en "Salir del Visual Builder" desde la barra de administración en la parte superior.

Sigue Aprendiendo

Algunas guías adicionales para seguir mejorando tus diseños:

  • Cómo mostrar contenido condicional según el tiempo cuando un temporizador expire.

  • Cómo crear un temporizador con un video de fondo a pantalla completa.

  • Cómo crear un temporizador con un fondo degradado animado.

    • Popular Articles

    • How to Create an App for Restaurants (with or without Delivery)

      Text Enter First Steps Once inside the platform, from the main dashboard you will find a series of icons on the left hand side menu. Just click on 'Apps'. Then click on 'Create App' and give it a name. Then you'll get to a screen where you choose the ...

    • APPS: Radio

      The function of Radio allows the addition of radio broadcast within its application. In addition to this function To add this function to your application go to step "Functions" and click on the icon "Radio": Once added you must name this new ...

    • APPS: Webhooks

      The advanced Webhooks feature lets you connect certain events that occur in your App by sending them to a URL called Webhook. You can use a free Webhooks service as Zapier to create automations that can help you with your App business. For example, ...

    • APPS: Audio & Music

      How to add this feature To add this feature to your application go to step "FUNCTIONS" and click on the " iconAudio": Then give this new section of the application a name. Then click on the + icon to add a new Playlist Then add a title and an image ...

    • QR Promotions

      This function would allow you to create discount coupons that would be unlocked by scanning a specific QR code. Once unlocked, the customer can use the discount whenever they want. The coupon would not appear in the application until the user has ...

    • Related Articles

    • The Divi Accordion Module

      Cómo agregar, configurar y personalizar el módulo acordeón de Divi. <br> El módulo acordeón de Divi ayuda a consolidar información en un grupo apilado verticalmente de pestañas que se pueden hacer clic para mostrar u ocultar su ...

    • The Divi Button Module

      Cómo agregar, configurar y personalizar el módulo de botón de Divi. <br> El módulo de botón de Divi es versátil y se puede usar en todo tu sitio web. Crea estilos divertidos al pasar el cursor, usa íconos personalizados y guía a ...

    • The Divi Accordion Module

      Cómo agregar, configurar y personalizar el módulo acordeón de Divi. <br> El Módulo Desplegable de Divi te permite mostrar u ocultar contenido con solo hacer clic en un botón. Es una manera sencilla de compartir información sin ...

    • The Divi Sidebar Module

      Cómo agregar, configurar y personalizar el módulo de barra lateral de Divi. El Módulo de Barra Lateral de Divi facilita añadir una barra lateral compatible con widgets en cualquier página, entrada, proyecto o plantilla de página. Este módulo funciona ...

    • The Divi Text Module

      Cómo agregar, configurar y personalizar el módulo de texto de Divi. El Módulo de Texto de Divi es uno de los módulos más fundamentales y básicos que usarás en el diseño de tu sitio web. Es altamente personalizable y puede usarse dentro de todos los ...