¿Quieres mostrar tus estadísticas, hitos o logros de una forma más llamativa?
Con un contador numérico animado, puede resaltar aspectos como el número total de clientes, de suscriptores de correo electrónico o los años que lleva en el negocio, y captar la atención de sus visitantes a medida que las cifras aumentan en tiempo real.
En esta guía, le mostraré cómo añadir un contador numérico animado en WordPress utilizando dos herramientas que no requieren ningún código.
Resumen rápido: Cómo añadir un contador numérico animado en WordPress
Método 1: Utilice SeedProd's Counter Block
Best para un control visual completo. Puede arrastrar y soltar contadores numéricos animados en cualquier página sin escribir código.
Método 2: Utilice el plugin Counter Number
Lo mejor para una configuración rápida con un plugin gratuito. Añade contadores de estadísticas animados usando shortcodes en entradas, páginas o barras laterales.
Puede utilizar ambos métodos para mostrar:
- Total clientes
- Proyectos realizados
- Suscriptores de correo electrónico
- Años de actividad
¿Qué son las animaciones de recuento de números?
Una animación de conteo de números es un efecto visual que hace que los números cuenten hacia arriba (o hacia abajo) en tiempo real. Probablemente las hayas visto para destacar estadísticas como ventas totales, clientes satisfechos o proyectos completados.
Estos contadores animados ayudan a llamar la atención sobre hechos clave y son perfectos para generar confianza. Los números reales dan sensación de solidez. Muestran tu crecimiento, tu alcance y lo que ya has conseguido.
He aquí algunos ejemplos:
- Muestre el número de clientes a los que ha ayudado
- Destaca cuántos proyectos has terminado
- Mostrar el total de suscriptores de correo electrónico
- Celebrar los años de actividad o los premios obtenidos
Bien utilizados, los contadores numéricos animados actúan como una señal silenciosa: "Esta empresa sabe lo que hace".
1. Añadir animaciones de recuento de números con SeedProd
Para el primer método, te mostraré cómo añadir contadores de números animados a tu sitio WordPress usando SeedProd.
SeedProd es el mejor constructor de sitios web y páginas de aterrizaje de arrastrar y soltar para WordPress. Su editor visual en vivo le permite crear fácilmente cualquier tipo de diseño de WordPress sin código.
Puede utilizar SeedProd para hacer lo siguiente:
- Temas personalizados para WordPress
- Páginas de destino de alta conversión
- Próximamente
- Pantallas del modo de mantenimiento
- Páginas de inicio de sesión de WordPress
- Diseños personalizados de páginas 404
- Páginas de contenido como "Acerca de", "Servicios" y "Contacto
- Y mucho más.
Empezar es rápido y fácil con kits de sitios web completos y plantillas de páginas de destino. Además, puedes personalizar cualquier diseño visualmente con bloques de WordPress como contadores numéricos animados, animaciones de texto, botones de llamada a la acción, galerías responsivas y personalizaciones con 1 clic.
Paso 1. Instalar y activar SeedProd Instale y active SeedProd
En primer lugar, vaya a la página de precios de SeedProd y elija su plan. Para esta guía, usaremos SeedProd Pro por su creador de temas de WordPress de arrastrar y soltar.
A continuación, acceda al panel de control de su cuenta y haga clic en la pestaña Descargas. En esta pantalla, haga clic en el botón Descargar SeedProd Plugin y copie su clave de licencia.
Ahora dirígete a tu sitio web de WordPress y carga el archivo .zip del plugin. Si necesitas ayuda con este paso, sigue estas instrucciones para instalar y activar un plugin de WordPress.
Después de instalar y activar el plugin, vaya a Configuración de SeedProd e introduzca la clave de licencia que copió anteriormente.
Ahora haga clic en el botón Verificar clave para guardar los detalles de su licencia.
Paso 2. Crear un diseño de WordPress Crear un diseño de WordPress
El siguiente paso consiste en crear un nuevo diseño en WordPress. Puedes hacerlo con SeedProd creando un nuevo tema de WordPress desde cero o creando una página de destino independiente.
Ambos métodos utilizan el potente constructor de páginas de arrastrar y soltar para personalizar su diseño. Y puedes utilizar el bloque Contador de SeedProd en temas y páginas de destino.
Para ayudarle a decidir, piense en la funcionalidad que desea que tenga su sitio web.
El Theme Builder es una excelente opción para crear un diseño completo de sitio web personalizado desde cero sin código.
Sin embargo, si desea mantener su actual tema de WordPress y utilizar SeedProd para construir páginas individuales, el Landing Page Builder es su mejor solución.
Puedes seguir estos tutoriales paso a paso para cada opción:
Ambas guías te guiarán a través de la elección de una plantilla y la comprensión del editor visual. Una vez que te hayas familiarizado con su funcionamiento, vuelve al paso 3 para obtener instrucciones sobre cómo añadir el bloque Contador a tu diseño.
Nota: Para este tutorial utilizaremos el Theme Builder con el kit de sitio web Headphone Shop.
Paso 3. Añadir el bloque contador SeedProd
El siguiente paso consiste en añadir el bloque Contador al diseño de tu página de destino o tema de WordPress. Así que haz clic en Editar diseño en la página que deseas personalizar para abrirla en el editor visual.
Como estamos personalizando un tema de WordPress, empezaremos por editar la plantilla de la página de inicio:
Cuando abra su diseño, verá un diseño similar a la siguiente captura de pantalla:
Tendrá bloques y secciones a la izquierda y una vista previa en vivo de su página a la derecha.
Puedes hacer clic en cualquier parte de la vista previa para editar el contenido y personalizar cualquiera de los elementos de la plantilla.
También es súper fácil añadir nuevos elementos a tu página con arrastrar y soltar. Te mostraremos cómo hacerlo con el bloque Contador.
En el panel de la izquierda, busque el bloque Contador y arrástrelo a su diseño de WordPress.
Una vez colocado el bloque, puede hacer clic en él para ver las distintas opciones de personalización.
Con el bloque Contador, puedes:
- Añadir un valor de recuento inicial y final
- Introduzca un prefijo y un sufijo numérico
- Establecer la duración de la animación
- Elija un separador decimal o de espacios
- Añadir un título de contador
- Editar la alineación en móvil y escritorio
Además, si haces clic en la pestaña Avanzado, podrás configurar aún más tu contador. Por ejemplo, puedes cambiar las fuentes y colores del contador y del título, añadir efectos de sombra, ajustar el espaciado y seleccionar opciones de visibilidad para dispositivos móviles y de sobremesa.
Lo mejor es que no requiere CSS, HTML, Jquery o Javascript personalizados para que tu contador tenga exactamente el aspecto que deseas. Simplemente apunte y haga clic para dar estilo a su contador de números, y su hoja de estilos se actualiza automáticamente.
Continúe personalizando su página hasta que esté satisfecho con su aspecto. A continuación, haz clic en el botón Guardar de la esquina superior derecha para guardar las personalizaciones.
Paso 4. Publique sus contadores animados
Después de añadir los contadores numéricos animados a su página personalizada y guardar los cambios, estará listo para ponerlos a disposición de los visitantes de su sitio web.
Si está creando una página de destino independiente, simplemente haga clic en la flecha hacia abajo del botón Guardar y seleccione Publicar. Pero si estás usando el Theme Builder, hay un paso más.
Salga del constructor de páginas haciendo clic en el icono X y, a continuación, desde el panel del constructor de temas, coloque el conmutador Habilitar tema SeedProd en la posición "Sí".
Ya está. Ahora puede previsualizar su diseño para ver la animación de su contador de números en acción:
2. Añadir animaciones de recuento de números utilizando el número de contador
Si no está interesado en utilizar un constructor de páginas de arrastrar y soltar para personalizar su sitio de WordPress, hay otra forma de añadir animaciones de recuento de números a su sitio sin escribir código.
En ese caso, puede utilizar un plugin gratuito de contador numérico para WordPress como el plugin Counter Number de WPShopMart. Te permite añadir contadores totalmente adaptables a tu sitio web para mostrar estadísticas numéricas en entradas, páginas y áreas de la barra lateral.
Este método no incluye tantas opciones de personalización como el anterior, pero es una forma fácil de añadir un sencillo contador numérico animado a tu web con un shortcode.
Para empezar, descargue, instale y active el plugin Counter Number en su sitio de WordPress.
A continuación, vaya a Números de contador " Todos los contadores desde el área de administración de WordPress y haga clic en el botón Añadir nuevo contador.
En la siguiente pantalla, verás un sencillo constructor de contadores de arrastrar y soltar. Introduce un título para tu contador y desplázate hasta la sección Añadir número de contador.
Ya hay 3 contadores configurados por defecto. Eliminaremos 2 de ellos haciendo clic en el icono de la papelera y, a continuación, editaremos el contador restante.
En la configuración del contador, puede añadir un título, seleccionar un icono de contador e introducir un valor numérico.
A continuación, en la parte derecha, puedes cambiar lo siguiente:
- Color y tamaño del icono
- Color y tamaño del título del mostrador
- Número de contador, color y tamaño
- Tipos de letra
- Familia de fuentes
Si lo prefieres, también puedes ocultar el icono del contador. Cuando estés satisfecho con el aspecto de tu contador, copia el shortcode y haz clic en Publicar.
Ahora estás listo para añadir tu contador a un post o página, así que crea o edita una página o post de WordPress. A continuación, busca la sección de la página que desees y pega tu shortcode directamente en un nuevo bloque de párrafo.
Por último, haga clic en Actualizar o Publicar. Cuando previsualices tu página, el contador de números aumentará automáticamente.
Preguntas frecuentes sobre los contadores numéricos animados de WordPress
¡Ya está!
Esperamos que esta guía le haya ayudado a encontrar el mejor método para añadir contadores numéricos animados a WordPress.
¿Listo para crear contadores numéricos personalizados sin código?
Puede que también te guste leer los siguientes tutoriales sobre WordPress:
- Cómo añadir horarios comerciales a WordPress
- Cómo atenuar una imagen de fondo sin CSS
- Cómo añadir widgets de Twitter a tu sitio WordPress
- Cómo añadir animaciones de texto en WordPress
- Los mejores plugins de WordPress para sitios web empresariales
Gracias por leernos. Nos encantaría conocer tu opinión, así que no dudes en unirte a la conversación en YouTube, X y Facebook para obtener más consejos y contenidos útiles para hacer crecer tu negocio.
Me gustaría poder determinar si quiero que el decimal denote el millar o la décima parte, es decir, 1,400 millones de dólares frente a 1,4 millones.
Por lo general, esto depende de tus preferencias personales, Kimber, y de lo que creas que tiene más sentido para tus usos. Personalmente, soy un fan de $ 1.4M porque es más conciso.