Cómo agregar, configurar y personalizar el módulo de contador circular de Divi.

El Módulo Contador Circular de Divi

El módulo Contador Circular de Divi es una forma interactiva de mostrar estadísticas e información numérica en tu sitio web. Es un módulo animado que utiliza carga diferida (lazy loading) para captar la atención.

Cómo agregar el módulo Contador Circular de Divi a tu página

1. Agrega una nueva página o edita una existente.
   Por defecto, el editor estándar Gutenberg se carga cada vez que agregas un nuevo post o página en WordPress.

2. Haz clic en el botón morado debajo del título de la página. Usa el Divi Builder.

3. Agrega una página y carga el constructor visual.

Al recargar la página, verás tres opciones:

• Construir desde cero

• Elegir un diseño prehecho

• Construir con IA

Construir desde cero

Elegir un diseño prehecho

Construir con IA

Agregar el módulo Contador Circular de Divi

• Haz clic en el ícono verde de + para insertar una fila.

• Haz clic en el ícono gris de + 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 Contador Circular y haz clic para cargarlo.

• La biblioteca de módulos también es buscable, solo escribe el nombre del módulo en la barra de búsqueda.

Todas las opciones del módulo Contador Circular de Divi explicadas

Una vez que hayas agregado el módulo Contador Circular, automáticamente aparecerán los ajustes del módulo. Aquí es donde configuras el contenido y estilos de diseño. Estos ajustes están organizados en tres pestañas en la parte superior del módulo: Contenido, Diseño y Avanzado.

Pestaña Contenido

Dentro de esta pestaña encontrarás las opciones de contenido disponibles para el módulo Contador Circular.

Texto

• Título: Escribe el título que se mostrará debajo del contador circular.

• Número: Escribe el número hasta el que contará el contador circular.

Elementos

• Signo de porcentaje: Activa o desactiva esta opción para mostrar u ocultar el signo de porcentaje.

Enlace

Si quieres que el módulo entero sea un enlace clickeable, puedes hacerlo aquí.

• URL del enlace del módulo: Pega la URL a la que quieres que dirija este módulo. Esto hace que todo el módulo sea clickeable y lleve a los visitantes a la URL pegada.

• Destino del enlace del módulo: Define si el enlace se abre en la misma ventana o en una pestaña nueva.

  • En la misma ventana: El enlace se abre en la misma ventana.

  • En una pestaña nueva: El enlace se abre en una nueva pestaña.

Fondo

En el grupo de opciones de Fondo, puedes configurar:

• Color de fondo

• Gradiente 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 la primera pestaña, el ícono de cubo de pintura.

• Haz clic en Añadir color de fondo y elige uno de la paleta de colores de tu sitio o usa el ícono del cuentagotas para seleccionar un color nuevo.

Cómo agregar un gradiente de fondo

• Haz clic en la segunda pestaña, el ícono de gradiente.

• Haz clic en Añadir gradiente de fondo.

• Para cambiar los colores del gradiente, haz clic en los puntos de parada y selecciona un color de la paleta o usa el cuentagotas.

• Puedes añadir más colores haciendo clic en cualquier parte de la barra del gradiente.

• Tipo de gradiente: Cambia el tipo usando el menú desplegable.

• Dirección del gradiente: Cambia la dirección arrastrando el control o escribiendo un valor numérico.

• Repetir gradiente: Activa para que el gradiente se repita.

• Unidad del gradiente: Cambia cómo se calculan los puntos de parada del gradiente.

• Colocar el gradiente sobre la imagen de fondo: Si tienes imagen de fondo, puedes colocar el gradiente encima activando esta opción.

Cómo agregar una imagen de fondo

• Haz clic en la tercera pestaña, el ícono de imagen.

• Haz clic en el signo + gris para abrir la biblioteca de medios, donde puedes seleccionar o subir una imagen.

Opciones de imagen de fondo:

• Usar efecto Parallax: Activa para que la imagen se desplace más rápido que el contenido, creando un efecto 3D. Por defecto está desactivado.

• Tamaño de la imagen de fondo: Elige el tamaño desde el menú desplegable.

• Posición de la imagen de fondo: Elige la posición desde el menú desplegable.

• Repetición de la imagen de fondo: Define si la imagen se repite y cómo.

• Mezcla de la imagen de fondo: Define cómo se mezcla la imagen con las otras capas del módulo.

Cómo agregar un video de fondo

• Haz clic en la cuarta pestaña, el ícono de video.

• Haz clic en el signo + gris para abrir la biblioteca de medios y seleccionar o subir un video.

Opciones de video de fondo:

• Mp4 vs WebM: Se recomienda subir ambos formatos para asegurar compatibilidad con todos los navegadores.

• Ancho del video de fondo: Define el ancho escribiendo un valor numérico.

• Alto del video de fondo: Define el alto escribiendo un valor numérico.

• Pausar video cuando otro video esté reproduciéndose: Activa para pausar este video si otro está activo. Por defecto, el video se pausa cuando no está visible. Puedes cambiar esta opción.

Cómo agregar un patrón de fondo

• Haz clic en la quinta pestaña, la pestaña de patrón.

• Haz clic en el botón Añadir patrón de fondo.

• Elige el tipo de patrón que quieras en el menú desplegable.

Opciones del patrón de fondo:

• Color del patrón: Selecciona el color del patrón desde la paleta de colores de tu sitio o usa el cuentagotas para elegir un color nuevo.

• Transformación del patrón: Aquí puedes transformar el patrón horizontalmente, verticalmente, rotarlo o invertirlo.

• Tamaño del patrón: Selecciona el tamaño del patrón: tamaño real, cubrir, ajustar, estirar para llenar o tamaño personalizado. Si eliges tamaño personalizado, aparecerán las opciones de ancho y alto del patrón. Usa el control deslizante o escribe un valor numérico.

• Origen de repetición del patrón: Selecciona el origen desde donde el patrón se repetirá.

• Desplazamiento horizontal y vertical del patrón: Ajusta el desplazamiento horizontal y vertical del patrón.

• Repetición del patrón: Elige cómo se repite el patrón — horizontalmente, verticalmente, etc.

• Modo de mezcla del patrón: Define cómo la capa del patrón interactúa con las capas debajo. Elige uno de los 16 modos de mezcla disponibles en el menú desplegable.

• Haz clic en la sexta pestaña, la pestaña de máscara.

• Haz clic en Añadir máscara de fondo.

• Selecciona el tipo de máscara que quieres en el menú desplegable.

Opciones de máscara de fondo:

• Color de la máscara: Elige el color de la máscara desde la paleta de colores de tu sitio o usa el cuentagotas para un nuevo color.

• Transformación de la máscara: Aquí puedes transformar la máscara horizontalmente, verticalmente, rotarla o invertirla.

• Relación de aspecto de la máscara: Define la proporción entre ancho y alto de la máscara.

• Tamaño de la máscara: Selecciona el tamaño de la máscara: tamaño real, cubrir, ajustar, estirar para llenar o tamaño personalizado. Si eliges tamaño personalizado, aparecerán las opciones de ancho y alto de la máscara. Usa el control deslizante o escribe un valor numérico.

• Modo de mezcla de la máscara: Define cómo la capa de la máscara interactúa con las capas debajo. Elige uno de los 16 modos de mezcla disponibles.

Etiqueta administrativa

Pestaña Diseño

Aquí están todos los estilos y opciones de diseño para el módulo Contador Circular de Divi.

Círculo

• Color del círculo: Elige el color de relleno para la línea animada del contador circular desde la paleta o con el cuentagotas.

• Color de fondo del círculo: Elige un color para el resto del círculo.

• Opacidad del fondo del círculo: Ajusta la opacidad del color de fondo del círculo. A mayor número, menos transparente será.

---

Texto

• Alineación del texto: Izquierda, centro, derecha o justificado.

• Color del texto: Selecciona la paleta de color predeterminada (claro u oscuro).

• Sombra del texto: Aplica una sombra al texto (tanto número como título).

Texto del título

• Nivel de encabezado: h1, h2, h3, h4, h5 o h6.

• Fuente del título: Escoge la fuente o sube una personalizada.

• Peso de la fuente: Selecciona la negrita de la fuente.

• Estilo de fuente: Cursiva, mayúsculas, versalitas, subrayado o tachado.

• Alineación del texto del título: Izquierda, centro, derecha o justificado.

• Color del texto del título: Elige color específico o usa cuentagotas.

• Tamaño del texto del título: Ajusta con el control deslizante o escribe un valor.

• Espaciado entre letras: Ajusta el espacio entre letras.

• Altura de línea: Ajusta el espacio entre líneas.

• Sombra del texto del título: Añade sombra, con dirección, fuerza y color configurables.

Texto del número

• Fuente del número

• Peso de la fuente

• Estilo de fuente: Cursiva, mayúsculas, versalitas, subrayado o tachado.

• Alineación del texto del número

• Color del texto del número

• Tamaño del texto del número

• Espaciado entre letras

• Altura de línea

• Sombra del texto del número

Tamaño o Dimensionamiento

• Usa las flechas para elegir la alineación del módulo (izquierda, centro o derecha). Por defecto está alineado a la izquierda.

• Ancho: Define el ancho del módulo.

• Ancho máximo: Define el ancho máximo del módulo.

• Alineación del módulo: Si se define un ancho o ancho máximo, se puede alinear a la izquierda, centro o derecha.

• Altura mínima: Define la altura mínima del módulo.

• Altura: Define la altura del módulo.

• Altura máxima: Define la altura máxima del módulo.
  

Espaciado

Puedes agregar márgenes o espacios a este módulo ingresando valores numéricos.

• El margen añade espacio fuera del módulo, y el relleno (padding) añade espacio dentro del módulo. Para mantener las proporciones iguales y que los valores sean idénticos, haz clic en el ícono de cadena entre los valores que deseas bloquear (por ejemplo, superior e inferior).

• Los valores predeterminados de margen para el módulo Circle Counters son 0.

• Los valores predeterminados de relleno para el módulo Circle Counters son 0.

Configuración de Espaciado del Circle Counter

---

Borde

Agrega un borde al módulo. Puedes agregar un borde completo o solo a un lado del módulo. Ajusta el ancho mediante el deslizador y selecciona un color. Elige un estilo de borde haciendo clic en el menú desplegable.

• Esquinas Redondeadas – Ingresa un valor numérico para redondear las esquinas del borde. Mientras más alto sea el número, más redondeadas serán las esquinas. Los valores de las esquinas están vinculados automáticamente (como se ve en la cadena azul resaltada en el centro); sin embargo, si quieres valores diferentes para cada esquina, haz clic en la cadena azul para desvincularlos. Si los valores están vinculados, siempre serán iguales y se actualizarán automáticamente si cambias uno.
  
• 
  

• Estilos de Borde – Aquí puedes agregar borde a todos los lados del módulo o a lados individuales (arriba, derecha, abajo, izquierda).

• Ancho de Borde – Aquí estableces el ancho del borde. Para un borde más grueso, aumenta el número. El ancho del borde debe ser al menos 1px para que se muestre.

• Color del Borde – Aquí puedes elegir el color del borde. Puedes seleccionar un color de la paleta predeterminada de tu sitio o usar el cuentagotas para elegir uno nuevo.

• Estilo del Borde – Puedes seleccionar el estilo de borde que desees: sólido, discontinuo, punteado, doble, ranurado (groove), biselado (ridge), interior (inset), exterior (outset) o ninguno.

Sombra de Caja 

Aquí puedes agregar una sombra al módulo completo.

Una vez que selecciones un estilo de sombra, puedes personalizar las siguientes opciones:

• Posición Horizontal de la Sombra – Define la posición horizontal de la sombra.

• Posición Vertical de la Sombra – Define la posición vertical de la sombra.

• Fuerza de Desenfoque de la Sombra – Define qué tan difusa es la sombra. Mientras más alto el valor, mayor será el desenfoque y más ancha y ligera la sombra.

• Fuerza de Expansión de la Sombra – Define la fuerza de propagación del desenfoque. Incrementar este valor aumenta la densidad de la sombra. Mayor densidad da como resultado una sombra más intensa.

• Color de la Sombra – Define el color de la sombra.

• Posición de la Sombra – Define si la sombra está dentro o fuera del módulo.

Configuración de Sombra de Caja del Circle Counter

---

Filtros

Ajusta los filtros del módulo:

• Tono (Hue) – Define el ángulo del tono de un color.

• Saturación – Define la intensidad de la saturación del color.

• Brillo – Define qué tan brillante debe ser el color.

• Contraste – Define qué tan distinguibles son las áreas claras y oscuras.

• Invertir – Invierte el tono, saturación y brillo por el valor especificado.

• Sepia – Define una apariencia más cálida, con tonos amarillentos/marrones.

• Opacidad – Define qué tan transparente u opaco debe ser el fondo (color, degradado, imagen, etc.).

• Desenfoque (Blur) – Define la cantidad de desenfoque gaussiano aplicado al módulo.

El Modo de Fusión (Blend Mode) se refiere a cómo se mezcla el módulo con las capas debajo. Por defecto, está seleccionado "normal".

---

Transformar

Opciones:

• Escalar (Scale)

• Traducir (Translate)

• Rotar (Rotate)

• Sesgar (Skew)

• Puntos de origen (Origin points)

Puedes navegar por cada opción usando Tab, y configurar cada una ingresando valores numéricos o arrastrando y expandiendo el cuadro o círculo.

Puedes bloquear estos valores para que siempre sean idénticos haciendo clic en el ícono de cadena en la esquina inferior derecha.

---

Animación

Aquí puedes aplicar animación al módulo. Una vez que eliges un estilo, puedes ajustar:

• Duración de la Animación – Define el tiempo que tarda una animación en completar un ciclo.

• Retraso de la Animación – Define el tiempo que espera desde aplicar la animación al elemento hasta que comience.

• Opacidad Inicial de la Animación – Define el valor inicial de opacidad.

• Curva de Velocidad de Animación – Define el método de aceleración (easing). Acelerar y desacelerar suaviza la animación.

• Repetición de la Animación – Por defecto, la animación solo se reproduce una vez. Si quieres que se repita continuamente, elige la opción "Loop".

Configuración de Animación del Circle Counter

---

Pestaña Avanzada

Aquí encontrarás opciones útiles para diseñadores web más avanzados, como CSS personalizado.

• Puedes aplicar CSS personalizado a tu módulo.

• También puedes agregar clases y IDs CSS al módulo para personalizar estilos avanzados o aplicar código CSS usando la clase del módulo.

Configuración Avanzada del Circle Counter

---

ID y Clases CSS

Asigna un ID o Clase CSS específica al módulo. Esto es útil para aplicar CSS personalizado usando la hoja de estilos del tema hijo.

---

CSS Personalizado

• CSS libre – Escribe CSS libre usando el selector keyword para dirigir el módulo. Ejemplo:
  selector h1 {color: red;}

• Elementos del módulo – También puedes aplicar CSS personalizado en esta pestaña, donde verás secciones individuales para agregar propiedades CSS.

---

Condiciones

Esta pestaña permite elegir cuándo mostrar el módulo basado en condiciones como si el usuario ya compró antes, qué navegador usa, sistema operativo, y más.

Puedes agregar una o varias condiciones.

---

Visibilidad

• Deshabilitar en – Define la visibilidad del módulo. Puedes deshabilitarlo (ocultarlo) en Phone, Tablet o Desktop haciendo clic en la casilla correspondiente.

• Desbordamiento Horizontal – Define qué pasa cuando el contenido sobrepasa los bordes izquierdo y derecho del elemento:

  • Visible: el contenido se mostrará.

  • Scroll: se mostrará barra de desplazamiento vertical para el contenido que sobrepasa.

  • Hidden: la parte que sobrepasa se ocultará.

  • Auto: el navegador decide si muestra barra de desplazamiento.

• Desbordamiento Vertical – Igual que el horizontal, pero para los bordes superior e inferior.

---

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

• Duración de transición (ms)

• Retraso de transición (ms)

• Curva de velocidad de transición

---

Posición

Define la posición del módulo:

• Relativa (valor por defecto) – Posicionado según el flujo normal del documento, con desplazamientos relativos a sí mismo.

• Absoluta – El módulo se elimina del flujo normal, posicionado respecto a su ancestro posicionado más cercano.

• Fija – El módulo se elimina del flujo normal, posicionado respecto a la ventana del navegador (útil para módulos fijos o sticky).

• Desplazamiento Vertical – Define la posición vertical.

• Desplazamiento Horizontal – Define la posición horizontal.

• Z-index – Define el orden de apilamiento. Módulos con valor más alto se superponen a los de menor valor.

---

Efectos de Desplazamiento

Define cómo se comporta el módulo al hacer scroll. Puedes hacer que el módulo sea sticky (pegajoso) arriba, abajo o ambos.

También puedes habilitar movimiento vertical para ajustar la velocidad de scroll del módulo (más rápido o más lento) sin afectar otros elementos.

El Disparador de Movimiento permite elegir cuándo se activa el efecto de scroll: cuando la parte superior, media o inferior del elemento esté visible.

---

Guardar tu Diseño

Cuando termines de diseñar y configurar el módulo, haz clic en la flecha verde en la esquina inferior derecha para guardar tu diseño. Si cierras el módulo sin guardar, se perderá tu trabajo.

---

Guardar el Diseño de la Página

Para guardar el diseño de la página, puedes usar CMD + S en Mac o CTRL + S en PC. También puedes usar la barra inferior de Divi: haz clic en el icono morado circular con tres puntos (…) para expandir la barra y luego haz clic en el botón verde de Guardar.

---

Salir del Visual Builder

Una vez que todos los cambios estén guardados, haz clic en "Salir del Visual Builder" en la barra superior para salir del editor visual.

---

Continuar aprendiendo

• Cómo diseñar barras contadoras animadas con scroll en Divi

• Cómo crear Circle Counters que se animan al hacer scroll con Divi

• Diseñar una sección de características única en Divi con íconos animados por Circle Counters