Aquí tienes la traducción al español respetando negritas y viñetas sin resumir:

El Módulo Contador Numérico de Divi es una forma fácil de mostrar información numérica sobre ti o tu empresa con un diseño llamativo.

El Módulo Contador Numérico puede mostrar tanto números simples como porcentajes. Cuando el módulo se carga, comienza desde cero, cuenta hasta el número o porcentaje que especificaste y luego se detiene.

Resumen del Módulo Contador Numérico de Divi

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

---

Cómo agregar el módulo Contador Numérico de Divi a tu página

• Agrega una nueva página o edita una página existente.

• Por defecto, el Editor Estándar de Gutenberg se carga cada vez que se añade un nuevo post o página en WordPress.

• Haz clic en el botón morado debajo del título de la página: Usar el Constructor Divi.

Agregar una página y cargar el constructor visual

• Una vez que hagas clic, la página se recargará con el Constructor Visual Divi.

• Al recargarse 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 Numérico

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

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

• Busca el módulo Contador Numérico y haz clic para cargarlo.

• La biblioteca de módulos es también buscable. Escribe el nombre del módulo que deseas en la barra de búsqueda superior.

Todas las opciones del módulo Contador Numérico de Divi explicadas

Al agregar el módulo Contador Numérico, aparecerán automáticamente las configuraciones divididas en tres pestañas: Contenido, Diseño y Avanzado.

Pestaña Contenido

Aquí encontrarás las opciones de contenido disponibles para el módulo Contador Numérico de Divi.

Texto

Dentro de esta pestaña puedes editar el título y el número para el módulo.

• Título – Escribe el texto que quieres mostrar debajo del número.

• Número – Escribe el número que deseas mostrar aquí. Solo se aceptan valores numéricos.

Elementos

Controla qué elementos se muestran con este módulo. El módulo Contador Numérico tiene solo uno: el signo de porcentaje.

• Signo de porcentaje – Si quieres mostrar un signo de porcentaje después del número, activa esta opción. Desactívala si quieres mostrar solo el número sin el signo.

Enlace

Si quieres que todo el módulo tenga un enlace clicable, puedes hacerlo aquí.

• URL del enlace del módulo – Pega la URL que quieres que se aplique al módulo. Esto hace que el módulo sea completamente clicable y al hacer clic dirigirá a los visitantes a esa URL.

• Destino del enlace del módulo – Define si quieres que el enlace se abra en la misma ventana o en una pestaña nueva.

  • En la misma ventana

  • En una nueva pestaña

Fondo

En las opciones de fondo, se pueden configurar:

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

• Haz clic en Agregar color de fondo y elige un color de la paleta de colores de tu sitio o usa el icono del cuentagotas para seleccionar un color nuevo.

Cómo agregar un degradado de fondo

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

• Haz clic en Agregar degradado de fondo.

• Para cambiar los colores del degradado, haz clic en los puntos del degradado y selecciona un color de la paleta o usa el cuentagotas para elegir otro color.

• Los puntos de degradado te permiten agregar más colores. Haz clic en cualquier parte de la barra para añadir un nuevo punto.

Opciones de degradado de fondo

• Tipo de degradado – Cambia el tipo de degradado desde el menú desplegable.

• Dirección del degradado – Cambia la dirección del degradado arrastrando el control deslizante o escribiendo un valor numérico.

• Repetir degradado – Activa esta opción para que el degradado se repita.

• Unidad de degradado – Cambia cómo se calculan los puntos del degradado desde el menú desplegable.

• Colocar degradado sobre imagen de fondo – Si hay una imagen de fondo, activa esta opción para poner el degradado encima de la imagen.

Cómo agregar una imagen de fondo

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

• Haz clic en el ícono gris + para abrir la Biblioteca de Medios, donde puedes seleccionar una foto ya subida o subir una nueva.

Opciones de imagen de fondo

• Usar efecto parallax – Aplica un efecto parallax a la imagen (donde la imagen se mueve más rápido que el contenido en primer plano, creando un efecto 3D). Por defecto está desactivado.

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

• Posición de la imagen de fondo – Selecciona la posición de la imagen desde el menú desplegable.

• Repetir imagen de fondo – Decide si y cómo se repite la imagen desde el menú desplegable.

• Mezcla de imagen de fondo – Selecciona cómo se mezcla la imagen con otras capas del módulo desde el menú desplegable.

Cómo Agregar un Video de Fondo

1. Haz clic en la cuarta pestaña, el ícono de Video.
2. Haz clic en el ícono gris + para abrir la biblioteca de medios, donde puedes seleccionar una foto ya subida desde tu biblioteca o subir una nueva.

Opciones de Video de Fondo

• Mp4 vs WebM. Recomendamos subir tanto una versión mp4 como una versión webm del video porque no todos los navegadores soportan formatos WebM. Subir ambos tipos de archivo asegura que tu video se reproduzca en todos los dispositivos y navegadores.

• Ancho del Video de Fondo - Establece el ancho del video escribiendo un valor numérico.

• Alto del Video de Fondo - Establece la altura del video escribiendo un valor numérico.

• Pausar Video Cuando Otro Video Se Reproduce - Si deseas que el video de fondo se pause cuando otro video esté reproduciéndose, activa esta opción a sí. Por defecto, el video se pausará cuando no esté visible. Si quieres que el video continúe, desactiva esta opción.

Cómo Agregar un Patrón de Fondo

1. Haz clic en la quinta pestaña, el ícono de Patrón.
2. Haz clic en Añadir Patrón de Fondo.

Elige el tipo de patrón que deseas desde el menú desplegable.

Opciones de 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 ícono cuentagotas para elegir un nuevo color.

• Transformar Patrón - Transforma el patrón horizontal o verticalmente, gíralo o inviértelo.

• 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 opciones para ancho y alto del patrón. Arrastra el control deslizante o escribe un valor numérico para definir estas opciones.

• 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 los desplazamientos horizontal y vertical para el patrón.

• Repetición del Patrón - Elige cómo se repite el patrón: horizontalmente, verticalmente, y más.

• Modo de Fusión del Patrón - Define cómo la capa del patrón interactúa con las capas debajo. Selecciona uno de los 16 modos de fusión disponibles desde el menú desplegable.

Cómo Agregar una Máscara de Fondo

1. Haz clic en la sexta pestaña, el ícono de Máscara.
2. Haz clic en Añadir Máscara de Fondo.

Selecciona el tipo de máscara que deseas desde 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 ícono cuentagotas para elegir un nuevo color.

• Transformar Máscara - Transforma la máscara horizontal o verticalmente, gírala o inviértela.

• Relación de Aspecto de la Máscara - Establece la relación de aspecto de la máscara. La relación de aspecto de una imagen es la proporción de su ancho respecto a su altura.

• 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 opciones para ancho y alto de la máscara. Arrastra el control deslizante o escribe un valor numérico para definir estas opciones.

• Modo de Fusión de la Máscara - Define cómo la capa de la máscara interactúa con las capas debajo. Selecciona uno de los 16 modos de fusión disponibles desde el menú desplegable.

Etiqueta de Administración

Pestaña de Diseño

Texto

• Alineación del Texto - Elige cómo se alinea el texto:

  • Izquierda

  • Centro

  • Derecha

  • Justificado

• Color del Texto - Selecciona la paleta de colores predeterminada del texto para este módulo: claro u oscuro. Las paletas predeterminadas de colores claros y oscuros se pueden configurar en las Opciones del Tema Divi.

• Sombra del Texto - Aplica una sombra a todo el texto dentro del módulo. Cuando se selecciona un tipo de sombra, se aplicará a todo el contenido, tanto al número como al texto del título.

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 - Elige la fuente que quieres usar para el texto del título. La fuente predeterminada se selecciona automáticamente, pero puedes elegir otra o subir una fuente personalizada.

• Grosor de la Fuente del Título - Selecciona el grosor de la fuente para el texto del título.

• Estilo de la Fuente del Título - Elige el estilo de la fuente del título:

  • Cursiva

  • Capitalizado

  • Mayúsculas Pequeñas

  • Subrayado

  • Tachado

• Alineación del Texto del Título - Elige la alineación solo para el texto del título:

  • Izquierda

  • Centro

  • Derecha

  • Justificado

• Color del Texto del Título - Elige un color específico para el texto del título desde la paleta de colores de tu sitio o con el cuentagotas.

• Tamaño del Texto del Título - Ajusta el tamaño de la fuente del título con el control deslizante o un valor numérico.

• Espaciado entre Letras del Título - Ajusta el espaciado entre letras del título con el control deslizante o un valor numérico. El espaciado es el espacio entre cada letra; mientras más alto el valor, mayor el espacio.

• Altura de Línea del Título - Ajusta la altura de línea del texto del título con el control deslizante o valor numérico. La altura de línea es el espacio entre líneas de texto. Más alto el número, más espacio.

• Sombra del Texto del Título - Puedes añadir sombra al texto del título y configurar la dirección (horizontal y vertical), la intensidad del desenfoque y el color de la sombra.

Texto del Número

• Fuente del Número - Elige la fuente que quieres usar para el número. La fuente predeterminada se selecciona automáticamente, pero puedes elegir otra o subir una fuente personalizada.

• Grosor de la Fuente del Número - Selecciona el grosor de la fuente para el número.

• Estilo de la Fuente del Número - Elige el estilo de la fuente del número:

  • Cursiva

  • Capitalizado

  • Mayúsculas Pequeñas

  • Subrayado

  • Tachado

• Alineación del Texto del Número - Elige la alineación del texto del número:

  • Izquierda

  • Centro

  • Derecha

  • Justificado

• Color del Texto del Número - Elige un color específico para el texto del número desde la paleta o con el cuentagotas.

• Tamaño del Texto del Número - Ajusta el tamaño de la fuente para el número con el control deslizante o valor numérico.

• Espaciado entre Letras del Número - Ajusta el espaciado entre letras del número con el control deslizante o valor numérico.

• Altura de Línea del Número - Ajusta la altura de línea del número con el control deslizante o valor numérico.

• Sombra del Texto del Número - Puedes añadir sombra al número y configurar dirección, intensidad del desenfoque y color de la sombra.

Tamaño

• Ancho - Define el ancho del módulo. Para más información, consulta la documentación oficial.

• Ancho Máximo - Define el ancho máximo del módulo. Para más información, consulta la documentación oficial.

• Alineación del Módulo - Si se establece un ancho o ancho máximo, la alineación del módulo se puede definir con tres opciones:

  • Alineado a la Izquierda

  • Centrado

  • Alineado a la Derecha

• Altura Mínima - Define la altura mínima del módulo. Para más información, consulta la documentación oficial.

• Altura - Define la altura del módulo. Para más información, consulta la documentación oficial.

• Altura Máxima - Define la altura máxima que puede tener el módulo. Para más información, consulta la documentación oficial.

Espaciado

• El margen agrega espacio fuera del módulo, y el relleno agrega espacio dentro del módulo.

• Para bloquear proporciones y mantener valores iguales, haz clic en el ícono de cadena entre los valores que quieres mantener iguales (ejemplo: arriba y abajo).

• Los valores predeterminados de margen son 0.

• Los valores predeterminados de relleno son 0.

Borde

• Esquinas Redondeadas - Escribe un valor numérico para redondear las esquinas. Mientras más alto el número, más redondeadas las esquinas. Los valores de las esquinas están enlazados automáticamente (se indica con la cadena azul resaltada); para usar valores diferentes para cada esquina, haz clic en la cadena para desvincularlos.

• Estilos de Borde - Agrega borde a todos los lados o lados individuales (arriba, derecha, abajo, izquierda).

• Ancho del Borde - Ajusta el ancho del borde. Para que el borde se muestre debe tener al menos 1px.

• Color del Borde - Selecciona el color del borde desde la paleta predeterminada o con el cuentagotas.

• Estilo de Borde - Elige el estilo de borde: sólido, discontinuo, punteado, doble, ranura, cresta, incrustado, sobresaliente o ninguno.

Sombra de Caja

• 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 del Desenfoque de la Sombra - Define la intensidad del desenfoque. Más valor significa más desenfoque, sombra más grande y más clara.

• Fuerza de Extensión de la Sombra - Define la densidad de la sombra. Más valor significa sombra más densa e 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.
  

Filtros

Ajusta los filtros del módulo:

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

• Saturación - Define qué tan intensa debe ser la saturación del color.

• Brillo (Brightness) - Define qué tan brillantes deben ser los colores.

• Contraste (Contrast) - Define qué tan distintas deben ser las áreas claras y oscuras.

• Invertir (Invert) - Invierte el tono, saturación y brillo según el valor especificado.

• Sepia - Define una apariencia más cálida, amarilla/marrón.

• Opacidad (Opacity) - 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 el módulo se mezcla con las capas debajo. Por defecto, está seleccionado “normal”.

---

Transformar

• Escalar (Scale)

• Trasladar (Translate)

• Rotar (Rotate)

• Inclinar (Skew)

• Puntos de origen (Origin points)

Navega con tabulador para acceder a cada opción. Configura cada opción ingresando valores numéricos o arrastrando y expandiendo la caja o círculo.

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

---

Animación

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

• Duración de la animación - Define el tiempo que tarda en completarse un ciclo de animación.

• Retraso de la animación - Define cuánto tiempo esperar desde que se aplica la animación hasta que comienza a ejecutarse. Puede iniciar más tarde, inmediatamente al principio o parte de la animación.

• Opacidad inicial de la animación - Define el valor de opacidad al inicio.

• Curva de velocidad de la animación - Define el método de aceleración/deceleración de la animación para un efecto más suave que una curva lineal.

• Repetición de la animación - Por defecto, las animaciones se reproducen solo una vez. Para que se repita continuamente, elige la opción “Loop” (bucle).

---

Pestaña Avanzado

En esta pestaña encontrarás opciones que diseñadores web más experimentados podrían usar, como CSS personalizado.

Aquí puedes aplicar CSS personalizado a tu módulo. También puedes agregar clases e IDs CSS personalizadas al módulo, que pueden usarse para personalizar estilos con propiedades CSS avanzadas o aplicar código CSS usando la clase del módulo.

---

CSS ID & Clases

Asigna un ID o clase CSS específica a este módulo. Esto es útil para aplicar CSS personalizado usando la hoja de estilos de tu tema hijo.

---

CSS personalizado

• CSS libre (Free-Form CSS) - Escribe CSS libre usando el selector keyword para dirigir este módulo. Ejemplo: selector h1 {color: red;}

• Elementos del módulo (Module Elements) - También puedes aplicar CSS personalizado pegándolo aquí. Al hacer clic en esta pestaña verás secciones para agregar propiedades CSS específicas.

---

Condiciones

Esta pestaña te permite elegir cuándo mostrar este módulo según un conjunto de condiciones, como si un usuario ya ha comprado antes, qué navegador u sistema operativo usan, y más.

Puedes agregar una o varias condiciones.

---

Visibilidad

• Desactivar en - Define la visibilidad del módulo. Puedes desactivarlo (ocultarlo) en teléfonos, tablets o escritorio seleccionando la casilla correspondiente.

• Desbordamiento horizontal (Horizontal Overflow) - Define qué mostrar cuando el contenido se desborda en los bordes izquierdo y derecho:

  • Visible

  • Scroll (barra de desplazamiento)

  • Oculto (hidden)

  • Auto (decide el navegador)

• Desbordamiento vertical (Vertical Overflow) - Define qué mostrar cuando el contenido se desborda arriba o abajo, con las mismas opciones que el horizontal.

---

Transiciones

Controla la duración, el retraso y la curva de velocidad de la animación hover.

• Duración de transición - Duración (en milisegundos) de la transición de la animación hover.

• Retraso de transición - Retraso (en ms) antes de que inicie la transición hover.

• Curva de velocidad de transición - Define la curva de velocidad de la transición hover.

---

Posición

Define la posición del módulo:

• Relativa (por defecto) - El módulo se posiciona según el flujo normal del documento y los valores de desplazamiento son relativos a sí mismo. No afecta la posición de otros elementos.

• Absoluta - El módulo se elimina del flujo normal y se posiciona relativo a su ancestro posicionado más cercano o el bloque contenedor inicial.

• Fija (Fixed) - El módulo se elimina del flujo normal y se posiciona relativo a la ventana del navegador, útil para crear módulos sticky.

• Desplazamiento vertical (Vertical Offset) - Define la posición vertical del módulo.

• Desplazamiento horizontal (Horizontal Offset) - Define la posición horizontal del módulo.

• Índice Z (Z-index) - Define el orden del módulo en la página. Módulos con índice Z más alto se superponen a los de índice más bajo.

---

Efectos de desplazamiento 

Define el comportamiento del módulo cuando el usuario desplaza la página. Puedes hacer que el módulo sea sticky arriba, abajo o ambos y decidir si debe transformarse al hacer scroll.

También puedes habilitar movimiento vertical para ajustar la velocidad de desplazamiento del módulo sin afectar elementos cercanos.

La función de disparador de movimiento te 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 contador numérico, haz clic en la flecha verde abajo a la derecha para guardar. Si cierras sin guardar, se perderán los cambios.

---

Guardar el diseño de la página

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

---

Salir del Constructor Visual

Una vez guardados todos los cambios, haz clic en “Salir del Constructor Visual” en la barra de administración superior para salir del constructor.

---

Recursos del módulo Contador Numérico Divi

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

• Estilizando el módulo Contador Divi