El bloque Contador te permite mostrar contadores numéricos animados que cuentan desde un valor inicial hasta un número final. Este bloque es perfecto para mostrar estadísticas impresionantes, hitos y logros de una manera llamativa que capta la atención de los visitantes.
Tanto si desea destacar los años en el negocio, los clientes atendidos, los proyectos completados o cualquier otra métrica, el bloque Contador da vida a sus números con una suave animación de recuento que se reproduce cuando los visitantes se desplazan por el bloque para verlo.
Añadir el bloque Contador a tus páginas
Sigue estos pasos para añadir un bloque Contador a tu página 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 Bloques y suéltalo en la sección de la página que desees.
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 contrarios:
- Número inicial: Establece el número desde el que el contador comienza a contar cuando se activa la animación. Normalmente se establece en 0, pero puedes comenzar desde cualquier valor para crear un efecto de conteo parcial.
- Número final: Establece el número final hasta el que contará el contador. Esta es la estadística o logro principal que deseas mostrar.
- Prefijo numérico: Añade texto o un símbolo que aparece antes del número, como un símbolo de moneda (por ejemplo, $) o un signo más.
- Sufijo numérico: Añade texto o un símbolo que aparece 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 en completarse la animación de conteo. Una duración más larga crea un efecto de conteo más lento y dramático.
- Separador de miles: Elija si desea mostrar un separador de miles en el número (por ejemplo, 1,000 en lugar de 1000) para mejorar la legibilidad.
- Separador: Seleccione el carácter utilizado como separador de miles, como una coma o un punto, para que coincida con sus preferencias de formato regional.
Etiqueta:
- Título: Añade una etiqueta descriptiva que aparezca debajo del número para explicar lo que representa la estadística (por ejemplo, «Clientes satisfechos», «Proyectos completados», «Años de experiencia»).
Configura los valores del 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, puedes personalizar el aspecto visual de tu bloque Contador.
Tipografía numérica:
- Color del número: Establezca el color del número del contador para que coincida con su marca o el diseño de la página.
- Fuente: Elija la familia tipográfica para el número del mostrador.
- Tamaño de fuente: Establezca el tamaño de los números en ordenadores de sobremesa, tabletas y dispositivos móviles.
- Grosor de la fuente: controla si el número aparece en negrita o con un grosor más ligero.
- Altura de línea: Ajusta el espaciado vertical del texto numérico.
- Espaciado entre letras: Ajusta con precisión el espaciado horizontal entre los caracteres del número.
- Alineación de números: Alinea el número del contador a la izquierda, al centro o a la derecha.
- Sombra numérica: añade una sombra de texto al número con controles para el color, el desplazamiento horizontal/vertical, el desenfoque y la extensión.
Tipografía del título:
- Color del título: Establece el color de la etiqueta descriptiva debajo del contador.
- Fuente: Elija la familia tipográfica para la etiqueta del título.
- Tamaño de fuente: Establece el tamaño del título en los puntos de ruptura de escritorio, tableta y móvil.
- Peso de la fuente: controla el peso del texto del título.
- Altura de línea: Ajusta el espaciado del texto del título.
- Espaciado entre letras: Ajuste con precisión el espaciado entre caracteres en el título.
- Alineación del título: Alinea la etiqueta del título a la izquierda, al centro o a la derecha.
- Sombra del título: añade una sombra de texto al título con controles para el color, el desplazamiento, el desenfoque y la extensión.
Espaciado:
- Margen: controla el espacio exterior alrededor del bloque del contador (superior, derecho, inferior, izquierdo). Esto determina cuánto espacio aparece entre el contador y los elementos circundantes.
- Relleno: ajusta el espacio interior dentro del bloque Contador (Arriba, Derecha, Abajo, Izquierda). Esto crea un espacio entre el contenido del contador y los bordes del bloque.
Atributos:
- ID CSS: muestra el identificador único generado automáticamente para tu bloque Contador. SeedProd crea este ID automáticamente para personalizar el estilo o la orientación de JavaScript.
- Clase personalizada: añade clases CSS personalizadas para aplicar estilos específicos de tu tema o CSS personalizado.
- Atributos personalizados: añade cualquier atributo HTML al elemento contenedor del contador. Introduce cada atributo en una nueva línea utilizando el formato: nombre-del-atributo|valor (por ejemplo, data-counter|true).
Visibilidad del dispositivo:
- Ocultar en el escritorio: Ocultar el bloque del contador en las pantallas del escritorio.
- Ocultar en tableta: Ocultar el bloque del contador en dispositivos tablet.
- Ocultar en dispositivos móviles: Ocultar el bloque del 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 del contador aparece en pantalla. Las opciones incluyen rebote, fundido de entrada, zoom de entrada, rotación de entrada y muchas más. La combinación de una animación de entrada con el efecto de cuenta atrás 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: Guarde los cambios
Una vez que haya terminado de configurar el bloque Contador y personalizar su apariencia, asegúrese de guardar su trabajo.
¡Has añadido correctamente un bloque Contador a tu página! Los contadores animados son una forma probada de generar confianza y credibilidad al mostrar tus cifras más impresionantes de forma destacada. Prueba diferentes formatos numéricos, prefijos, sufijos y estilos tipográficos para crear contadores que reflejen a la perfección tu marca y hagan que tus estadísticas sean imposibles de ignorar.