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

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.

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.

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

Pestaña Contenido

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

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.

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:

Cómo agregar un degradado de fondo:

• Tipo de degradado

• Dirección

• Repetición

• Unidad

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

Cómo agregar una imagen de fondo:

Opciones:

• Efecto Parallax

• Tamaño de imagen

• Posición

• Repetición

• Modo de fusión

Cómo agregar un video de fondo:

Opciones:

• Ancho y alto del video

• Pausar video cuando se reproduce otro

Cómo agregar un patrón de fondo:

Opciones:

• Color

• Transformación

• Tamaño

• Repetición y desplazamiento

• Modo de fusión

Cómo agregar una máscara de fondo:

Opciones:

• Color

• Transformación

• Relación de aspecto

• Tamaño

• Modo de fusión

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.

Pestaña de Diseño

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

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

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.

---

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

---

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

---

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

---

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
  

---

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

---

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.

---

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
• 
  

---

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

---

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.
• 
  

---

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)
• 
  

---

Pestaña Avanzado (Advanced Tab)

Para usuarios avanzados que quieran aplicar estilos con CSS personalizado.

ID y Clases CSS

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

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".

---

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

---

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)