Los números convencen más rápido que las oraciones: 5,5 mil notificaciones entregadas, 120 millones de visualizaciones de vídeo. El Contrarrestar widget adentro Complementos maestros para Elementor coloca esas estadísticas en una fila de cartas que cuentan desde cero a medida que los visitantes se desplazan hacia ellas, cada una con un ícono, un sufijo como K+ o M+ y su propio estilo.
Esta guía crea una sección de cuatro estadísticas desde cero: elementos, números, íconos, diseño y estilo de la tarjeta, que termina con los contadores terminados en la página en vivo.
Qué hace el widget Counter Up #
Un widget contiene un conjunto de elementos de contador. Cada elemento es una estadística: un número que se anima desde cero cuando se desplaza hacia la vista, un prefijo o sufijo a su alrededor, un título debajo y un ícono o imagen opcional en la parte superior. El widget organiza los elementos en columnas y los estiliza como un grupo, de modo que una banda de estadísticas se mantenga constante sin que se alterne la tarjeta.
Antes de empezar #
- WordPress con Elementor instalado y activo.
- Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Ver el guía de instalación.
- El widget Counter Up habilitado en el panel de opciones de complementos maestros, en Widgets básicos.
- Tus números reales. Una sección de estadísticas con cifras inventadas hace más daño que ninguna estadística.
Cómo agregar el widget Counter Up #
En el editor Elementor, busque el Elementos panel para Contrarrestar y arrástrelo a la página. Se carga con elementos de muestra que ya cuentan en el lienzo, por lo que la animación es visible desde el primer segundo.
Configure cada elemento del mostrador #
Abierto Contenido de contraataque y haga clic en un elemento de la lista. Cada uno lleva el conjunto completo de controles por estado:
- Tipo: ninguno, ícono o imagen encima de la estadística. El icono abre la biblioteca Elementor; La imagen abre la biblioteca multimedia.
- Título: la etiqueta debajo del número, como “Notificaciones entregadas”.
- Prefijo numérico y sufijo: texto alrededor del número. Un prefijo “$” o un sufijo “K+” convierte 5,5 en $5,5 o 5,5K+.
- Număr: el valor al que sube el contador. Los decimales funcionan, por lo que 5,5 con un sufijo K+ dice 5,5K+.
- Antecedentes: un color de tarjeta por artículo, para cuando una estadística debe destacarse.
El truco del sufijo mantiene cortos los números grandes: en lugar de animar a 120.000.000, la demostración cuenta a 120 con un sufijo M+. Animación más rápida, tarjeta más limpia y nadie cuenta los ceros para comprobar.
El por artículo Antecedentes colorea solo esa tarjeta. Útil para resaltar una estadística de titular, u omitirla y dejar que el estilo de caja compartida se encargue de las cuatro:
Elija columnas y posición de contenido #
Debajo de la lista de artículos, Columnas establece cuántos contadores comparten una fila, con una palanca responsiva por dispositivo. Posición de contenido coloca el título en relación con el número: superior, izquierdo, derecho o inferior. La demostración prueba 2 columnas con número y título uno al lado del otro, luego se vuelve a colocar en 4 columnas apiladas.
Sintoniza los iconos #
El Configuración de iconos la sección controla el bloque de iconos en cada tarjeta: Posición Icono/Imagen (izquierda, arriba o derecha de la estadística), Tamaño del icono, y Círculo de iconos o tamaño de imagen para el disco de color detrás del glifo. La demostración ejecuta iconos de 30 píxeles en círculos de 86 píxeles.
Estila las cartas #
En el Estilo tab, Estilo caja de mostrador cubre el look de tarjeta compartida: Color de fondo, Acolchado, Margen, Tipo de borde, Radio fronterizo, y Sombra de caja. La demostración aterriza en tarjetas de color rosa suave con relleno y margen de 20 píxeles, que separan las cuatro estadísticas sin bordes duros.
Diseñe los números, títulos e íconos #
El Estilo de contenido la sección se divide en cuatro grupos, uno por elemento de la tarjeta:
- Estilo de icono: el color del glifo y el color del círculo detrás de él. La demostración convierte los círculos en un color púrpura intenso con íconos blancos.
- Estilo numérico: color y tipografía de la estadística en sí, el texto más grande de la tarjeta.
- Prefix numérico: su propio color, tipografía, tamaño y margen, por lo que un símbolo de moneda puede ser más pequeño que el número.
- Estilo de título: color, tipografía y margen de la etiqueta.
El resultado en la página #
En la página en vivo, los números giran desde cero a medida que la sección se desplaza hacia la vista y luego se establecen en los valores finales. Aquí está la banda terminada:
Casos de uso comunes #
- Bandas de estadísticas de la empresa: clientes atendidos, proyectos entregados, años de actividad.
- Secciones de prueba SaaS: usuarios, tiempo de actividad, integraciones.
- Números de cartera: campañas realizadas, ingresos generados, horas de edición.
- Impacto sin fines de lucro: comidas entregadas, voluntarios, fondos recaudados.
- Páginas del curso y de la comunidad: estudiantes, lecciones, reseñas.
Consejos para mejores contadores #
- Utilice sufijos para números grandes. Contar hasta 120 con un sufijo M+ anima más rápido y lee más limpio que contar hasta nueve dígitos.
- Mantenga el conjunto en tres o cuatro estadísticas. Seis contadores compiten; cuatro son leídos.
- Lidera con el número más fuerte. Los visitantes leen de izquierda a derecha y es posible que no terminen la fila.
- Haga coincidir los círculos de iconos con su paleta. El color del círculo es la elección de estilo más visible en la tarjeta; El morado sobre rosa de la demostración funciona porque ambos provienen de una paleta.
- Verifique el recuento de columnas móviles. Cuatro columnas en un teléfono aprietan los números; el control de columnas responsivas lo corrige con un solo clic.
Vídeotutorial #
Si desea ver el widget Counter Up en acción, este video recorre la configuración completa, desde el primer elemento hasta la banda de estadísticas animadas en la página en vivo:
Preguntas frecuentes #
¿qué es el widget Counter Up en los complementos maestros?
Es un widget Elementor para secciones de estadísticas animadas. Cada elemento contiene un número que cuenta desde cero en el desplazamiento, además de un prefijo, sufijo, título y un ícono o imagen opcional. Las columnas, el tamaño de los iconos y el estilo de las tarjetas se comparten en todo el conjunto.
¿cómo muestro 120M+ en lugar de 120000000?
Establezca el número en 120 y el sufijo numérico en M+. El contador se anima a 120 y muestra 120M+. Lo mismo funciona para miles de K+ y valores decimales como 5,5 con un sufijo K+.
¿Cada mostrador puede tener su propio icono y color?
Sí. Cada elemento elige su propio icono o imagen a través del control Tipo, y cada elemento tiene su propio color de fondo. El tamaño del icono compartido, el tamaño del círculo y el estilo de la tarjeta provienen de la Configuración del icono y la pestaña Estilo.
¿Cuándo comienza la animación de conteo?
Los números se animan cuando el widget se desplaza hacia la ventana gráfica, contando desde cero hasta el valor que establezca. Los visitantes que lleguen a la sección verán la cuenta regresiva reproducir una vez.
¿puedo cambiar cuántos mostradores se sientan seguidos?
Sí. El menú desplegable Columnas en Contenido de contador establece el recuento de filas y ofrece un interruptor responsivo, por lo que una banda de escritorio de cuatro columnas puede aparecer en dos columnas en tabletas y una en teléfonos.
Envolviendo #
El widget Counter Up convierte números simples en una banda de estadísticas que se mueve: íconos, prefijos y sufijos por elemento, columnas compartidas y estilo de tarjetas, y una animación de cuenta regresiva que llama la atención exactamente una vez. Explore el conjunto completo de Widgets y extensiones de complementos maestros para ver qué más se envía con el complemento y verifique página de precios para extras profesionales como patrones.
