> ## Documentation Index
> Fetch the complete documentation index at: https://help.chateea.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Elemento contador de números

> Muestra tus cifras clave con una animación que cuenta hacia arriba cuando el visitante llega a esa sección.

El elemento **Contador de números** (Number Counter) convierte tus cifras más importantes en una animación que cuenta hacia arriba cuando el visitante llega a esa parte de la página. Úsalo para destacar clientes atendidos, años de experiencia, ventas, proyectos entregados o cualquier dato que genere confianza.

## Ventajas

* **Varios contadores en un solo elemento** para mostrar todas tus métricas juntas.
* **Formato inteligente**: las cifras grandes se abrevian con K, M, B o T.
* **Prefijo y sufijo**: agrega \$, €, %, + o cualquier texto antes o después del número.
* **Imagen por contador**: acompaña cada cifra con un ícono, insignia o logo.
* **Control del diseño**: número de columnas y espacio entre contadores.
* **Estilos completos**: colores, bordes, sombras y tipografía.

## Cómo agregar el contador

**1. Abre la página**

Ve a **Sitios → Embudos** o **Sitios → Sitios web** y haz clic en **Editar** en la página o paso que quieres modificar.

**2. Busca el elemento**

En la barra lateral, haz clic en **+ Agregar elemento** y busca **Contador de números** (Number Counter).

**3. Arrástralo a la página**

Suéltalo en el lugar donde quieres mostrar tus cifras.

## Configurar cada contador

Desde el panel de configuración puedes agregar, quitar y personalizar cada métrica:

| Campo | Qué hace |
| - | - |
| **Agregar contador** / ícono de papelera | Crea una métrica nueva o elimina una existente |
| **Leyenda** (Caption) | Texto que explica la cifra, por ejemplo "Clientes felices" |
| **Imagen** | Ícono opcional en PNG, JPEG o SVG, con control deslizante de tamaño |
| **Valor inicial y final** | Dónde empieza (por ejemplo, 0) y dónde termina (por ejemplo, 10000) la animación |
| **Prefijo / Sufijo** | Texto antes o después del número, como \$, €, % o + |

## Dar estilo al contador

En **Diseño del contador** (Counter Layout) ajustas cómo se ve el conjunto:

* **Tamaño de imagen**: dimensiones de los íconos.
* **Espacio entre contadores**: separación horizontal.
* **Número de columnas**: de 1 a 5 contadores por fila.
* **Animación**: duración de 1 a 15 segundos. Usa el disparador por visibilidad para que los números solo se animen cuando el visitante llegue a esa zona.
* **Colores**: número, leyenda, fondo y fondo del contenedor, además de bordes y sombras.

Para volver a ver la animación mientras editas, haz clic en **Vista previa de la animación** (Preview Animation) en el panel de configuración.

## Detalles importantes

* **Rendimiento**: mantén 20 contadores o menos por elemento para que la página cargue rápido.
* **Formatos de imagen**: PNG, JPEG y SVG. Las imágenes son opcionales y se activan por contador.
* **Formato automático**: por ejemplo, 2500000 se muestra como 2.5 M.
* **La animación se ejecuta una sola vez** por carga de página.

> [!TIP]
>
> Elige pocas cifras, pero contundentes. Tres o cuatro métricas bien elegidas comunican más que diez.

## Preguntas frecuentes

> **¿Puedo poner un color distinto a cada contador?**
>
> Por ahora no. Los estilos se aplican a todos los contadores del elemento para mantener la coherencia. Puedes cambiar el fondo y el color del contenedor de forma global.

> **¿Los contadores admiten decimales?**
>
> Sí. Puedes usar decimales en los valores inicial y final.

> **¿La animación se repite si el visitante vuelve a subir?**
>
> No. Los contadores se animan una vez, cuando aparecen por primera vez en pantalla.

> **¿Es obligatorio usar imágenes?**
>
> No. Las imágenes son opcionales.

> **¿Cuántos contadores puedo agregar?**
>
> No hay un límite técnico, pero con más de 20 la animación puede verse lenta en dispositivos poco potentes.

> **¿Se adaptan a celulares?**
>
> Sí. Las columnas y el espaciado se ajustan al tamaño de pantalla.

## Artículos relacionados

> **[Personalizar animaciones](https://help.chateea.com/docs/sitios/personalizar-animaciones.md)**
>
> Ajusta escala, duración, retraso y suavizado.

> **[Temporizador dinámico sincronizado](https://help.chateea.com/docs/sitios/temporizador-dinamico-sincronizado.md)**
>
> Agrega cuentas regresivas a tus páginas.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.