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 deseada de tu página.
Paso 2: Configurar los Ajustes de Contenido
Una vez añadido, haz clic en el bloque Contador para abrir su configuración. 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 Inicial: 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".
Configuración 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 cuenta ascendente 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 aparece debajo del número para explicar qué representa la estadística (p. ej., "Clientes Satisfechos", "Proyectos Completados", "Años de Experiencia").
Configura los valores de tu 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: Personaliza el Diseño
En la pestaña Avanzado, puedes personalizar la apariencia visual de tu bloque Contador.
Tipografía del Número:
- Color del Número: Establece el color del número del contador para que coincida con tu marca o el diseño de la página.
- Fuente: Elige la familia de fuentes para el número del contador.
- Tamaño de Fuente: Establece el tamaño del número en dispositivos de escritorio, tableta y móvil.
- Peso de fuente: Controle si el número aparece en negrita o con un peso 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 del 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 al texto del número con controles de 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
- Peso de fuente: Controle el peso 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 del 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 al texto del título con controles de color, desplazamiento, desenfoque y extensión
Espaciado:
- Margen: Controle el espaciado exterior alrededor de su bloque de 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 de contador (Superior, Derecho, Inferior, Izquierdo). Esto crea espacio entre el contenido del contador y los bordes del bloque
Atributos:
- ID de CSS: Muestra el identificador único generado automáticamente para su bloque de contador. Este ID es creado automáticamente por SeedProd para estilos personalizados o para apuntar con JavaScript
- Clase personalizada: Agrega clases CSS personalizadas para aplicar estilos específicos de tu tema o CSS personalizado.
- Atributos personalizados: Añada cualquier atributo HTML al elemento contenedor del contador. Introduzca cada atributo en una línea nueva usando el formato: nombre-atributo|valor (por ejemplo, data-counter|true)
Visibilidad del Dispositivo:
- Ocultar en escritorio: Oculte el bloque de contador en pantallas de escritorio
- Ocultar en tableta: Oculte el bloque de contador en dispositivos tableta
- Ocultar en móvil: Oculte el bloque de contador en dispositivos móviles
Efectos de Animación:
- Animación de entrada: Elija entre varios efectos de animación que se reproducen cuando el bloque de contador entra en la vista. Las opciones incluyen Rebote, Fundido de entrada, Zoom de entrada, Rotación de entrada y muchas más. Emparejar una animación de entrada con el efecto de cuenta ascendente crea una experiencia muy atractiva para los visitantes
Utilice la pestaña Avanzado para controlar la tipografía, los colores, las sombras, el espaciado y la visibilidad de su bloque de contador.
Paso 4: Guarde sus Cambios
Una vez que haya terminado de configurar el bloque de contador y personalizar su apariencia, asegúrese de guardar su trabajo.
¡Ha añadido con éxito un bloque de contador a su página! Los contadores animados son una forma probada de generar confianza y credibilidad al poner sus números más impresionantes al frente y al centro. Experimente con diferentes formatos de número, prefijos, sufijos y estilos de tipografía para crear contadores que reflejen perfectamente su marca y hagan que sus estadísticas sean imposibles de ignorar.