El bloque Contador te permite mostrar contadores de números animados que cuentan desde un valor inicial hasta un número final. Este bloque es perfecto para exhibir estadísticas impresionantes, hitos y logros de una manera llamativa que capta la atención del visitante.
Ya sea que desees destacar años en el negocio, clientes atendidos, proyectos completados o cualquier otra métrica, el bloque Contador da vida a tus números con una suave animación de conteo que se reproduce cuando los visitantes desplazan el bloque a la vista.
Añadir el Bloque Contador a tus Páginas
Sigue estos pasos para añadir un bloque Contador a tu página de SeedProd:
Paso 1: Añadir el Bloque
En Diseño > Bloques, arrastra y suelta el bloque Contador en la sección deseada de tu página.
Arrastra el bloque Contador desde el panel de Bloques y suéltalo en la sección de página deseada.
Paso 2: Configurar los Ajustes de Contenido
Una vez añadido, haz clic en el bloque Contador para abrir sus ajustes. En la pestaña Contenido, puedes configurar los valores del contador, el comportamiento de la animación y la etiqueta.
Valores del Contador:
- Número de Inicio: Establece el número desde el cual el contador comienza a contar cuando se activa la animación. Normalmente se establece en 0, pero puedes empezar desde cualquier valor para crear un efecto de conteo parcial.
- Número Final: Establece el número final hasta el cual contará el contador. Esta es la estadística o logro principal que deseas mostrar.
- Prefijo del Número: Añade texto o un símbolo que aparezca antes del número, como un símbolo de moneda (p. ej., $) o un signo más.
- Sufijo del Número: Añade texto o un símbolo que aparezca después del número, como un signo de porcentaje (%), un signo más (+) o una unidad como "K".
Ajustes de Animación:
- Duración de la Animación: Controla cuánto tiempo (en milisegundos) tarda la animación de conteo en completarse. Una duración más larga crea un efecto de conteo más lento y dramático.
- Separador de Miles: Elige si mostrar un separador de miles en el número (p. ej., 1.000 en lugar de 1000) para mejorar la legibilidad.
- Separador: Selecciona el carácter utilizado como separador de miles, como una coma o un punto, para que coincida con tus preferencias de formato regional.
Etiqueta:
- Título: Añade una etiqueta descriptiva que aparezca debajo del número para explicar qué representa la estadística (p. ej., "Clientes Satisfechos", "Proyectos Completados", "Años de Experiencia").
Configure los valores de su contador, la duración de la animación, el separador de miles y la etiqueta del título en la pestaña Contenido.
Paso 3: Personalizar el Diseño
En la pestaña Avanzado, puede personalizar la apariencia visual de su bloque Contador.
Tipografía de Números:
- Color del Número: Establezca el color del número del contador para que coincida con el diseño de su marca o página
- Fuente: Elija la familia de fuentes para el número del contador
- Tamaño de Fuente: Establezca el tamaño del número en dispositivos de escritorio, tabletas y móviles
- Grosor de Fuente: Controle si el número aparece en negrita o con un grosor más ligero
- Altura de Línea: Ajuste el espaciado vertical del texto del número
- Espaciado entre Letras: Ajuste fino del espaciado horizontal entre caracteres en el número
- Alineación del Número: Alinee el número del contador a la izquierda, al centro o a la derecha
- Sombra del Número: Añada una sombra de texto al número con controles para color, desplazamiento horizontal/vertical, desenfoque y extensión
Tipografía del Título:
- Color del Título: Establezca el color de la etiqueta descriptiva debajo del contador
- Fuente: Elija la familia de fuentes para la etiqueta del título
- Tamaño de Fuente: Establezca el tamaño del título en los puntos de interrupción de escritorio, tableta y móvil
- Grosor de Fuente: Controle el grosor del texto del título
- Altura de Línea: Ajuste el espaciado del texto del título
- Espaciado entre Letras: Ajuste fino del espaciado entre caracteres en el título
- Alineación del Título: Alinee la etiqueta del título a la izquierda, al centro o a la derecha
- Sombra del Título: Añada una sombra de texto al título con controles para color, desplazamiento, desenfoque y extensión
Espaciado:
- Margen: Controle el espaciado exterior alrededor de su bloque Contador (Superior, Derecho, Inferior, Izquierdo). Esto determina cuánto espacio aparece entre el contador y los elementos circundantes
- Relleno: Ajuste el espaciado interior dentro de su bloque Contador (Superior, Derecho, Inferior, Izquierdo). Esto crea espacio entre el contenido del contador y los bordes del bloque
Atributos:
- ID CSS: Muestra el identificador único generado automáticamente para su bloque Contador. Este ID es creado automáticamente por SeedProd para estilos personalizados o para apuntar con JavaScript
- Clase Personalizada: Añada clases CSS personalizadas para aplicar estilos específicos de su tema o CSS personalizado
- Atributos Personalizados: Añada cualquier atributo HTML al elemento contenedor del contador. Introduzca cada atributo en una nueva línea usando el formato: nombre-atributo|valor (por ejemplo, data-counter|true)
Visibilidad del Dispositivo:
- Ocultar en Escritorio: Oculte el bloque Contador en pantallas de escritorio
- Ocultar en tableta: Ocultar el bloque Contador en dispositivos de tableta
- Ocultar en móvil: Ocultar el bloque Contador en dispositivos móviles
Efectos de animación:
- Animación de entrada: Elige entre varios efectos de animación que se reproducen cuando el bloque Contador entra en la vista. Las opciones incluyen Rebote, Fundido de entrada, Zoom de entrada, Rotación de entrada y muchas más. Combinar una animación de entrada con el efecto de cuenta ascendente crea una experiencia muy atractiva para los visitantes.
Utiliza la pestaña Avanzado para controlar la tipografía, los colores, las sombras, el espaciado y la visibilidad de tu bloque Contador.
Paso 4: Guarda tus cambios
Una vez que hayas terminado de configurar el bloque Contador y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has añadido con éxito un bloque Contador a tu página! Los contadores animados son una forma probada de generar confianza y credibilidad al poner tus números más impresionantes en primer plano. Experimenta con diferentes formatos de número, prefijos, sufijos y estilos de tipografía para crear contadores que reflejen perfectamente tu marca y hagan que tus estadísticas sean imposibles de ignorar.