¿Quiere mostrar sus estadísticas, hitos o logros de una manera más llamativa?
Con un contador de números animado, puede destacar cosas como el total de clientes, suscriptores de correo electrónico o años en el negocio, y captar la atención de sus visitantes mientras los números aumentan en tiempo real.
En esta guía, le mostraré cómo añadir un contador de números animado en WordPress utilizando dos herramientas que no requieren ningún código.
Resumen rápido: Cómo añadir un contador de números animado en WordPress
Método 1: Usar el bloque Contador de SeedProd
Ideal para un control visual completo. Puede arrastrar y soltar contadores de números animados en cualquier página sin escribir código.
Método 2: Usar el plugin Contador de Números
Ideal para una configuración rápida con un plugin gratuito. Añada contadores de estadísticas animados usando códigos cortos en publicaciones, páginas o barras laterales.
Puede usar ambos métodos para mostrar:
- Total de clientes
- Proyectos completados
- Suscriptores de correo electrónico
- Años en el negocio
¿Qué son las animaciones de contadores de números?
Una animación de contador de números es un efecto visual que hace que los números aumenten (o disminuyan) en tiempo real. Probablemente los haya visto utilizados para destacar estadísticas como ventas totales, clientes satisfechos o proyectos completados.
Estos contadores animados ayudan a atraer la atención hacia datos clave y son perfectos para generar confianza. Los números reales se sienten sólidos. Muestran su crecimiento, su alcance y lo que ya ha logrado.
Aquí hay algunos ejemplos:
- Muestre el número de clientes a los que ha ayudado
- Destaque cuántos proyectos ha finalizado
- Muestre su total de suscriptores de correo electrónico
- Celebre los años en el negocio o los premios obtenidos
Bien utilizados, los contadores de números animados actúan como una señal silenciosa: “Este negocio sabe lo que hace”.
1. Añadir animaciones de contadores de números con SeedProd
Para el primer método, le mostraré cómo añadir contadores de números animados a su sitio de WordPress usando SeedProd.
SeedProd es el mejor creador de sitios web y páginas de destino 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 usar SeedProd para crear lo siguiente:
- Temas personalizados de WordPress
- Páginas de destino de alta conversión
- Páginas de "próximamente"
- Pantallas de modo de mantenimiento
- Páginas de inicio de sesión de WordPress
- Diseños de páginas personalizadas de error 404
- Páginas de contenido como acerca de, servicios y contacto
- Y mucho más.
Empezar es rápido y fácil con kits completos de sitios web y plantillas de páginas de destino. Además, puedes personalizar cualquier diseño visualmente con bloques de WordPress como contadores de números animados, animaciones de texto, botones de llamada a la acción, galerías responsivas y personalizaciones de 1 clic.
Paso 1. Instalar y Activar SeedProd
Primero, ve a la página de precios de SeedProd y elige tu plan. Para esta guía, usaremos SeedProd Pro por su creador de temas de WordPress de arrastrar y soltar.
A continuación, inicia sesión en el panel de tu cuenta y haz clic en la pestaña Descargas. En esta pantalla, haz clic en el botón Descargar plugin SeedProd y copia tu clave de licencia.
Ahora dirígete a tu sitio web de WordPress y sube el archivo .zip del plugin. Si necesitas ayuda con este paso, sigue estas instrucciones sobre cómo instalar y activar un plugin de WordPress.
Después de instalar y activar el plugin, ve a Ajustes de SeedProd y introduce la clave de licencia que copiaste anteriormente.
Ahora haz clic en el botón Verificar clave para guardar los detalles de tu licencia.
Paso 2. 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 creador de páginas de arrastrar y soltar para personalizar tu diseño. Y puedes usar el bloque Contador de SeedProd en temas y páginas de destino.
Para ayudarte a decidir, piensa en la funcionalidad que quieres que tenga tu sitio web.
El Theme Builder es una excelente opción para crear un diseño de sitio web completo y personalizado desde cero sin necesidad de código.
Sin embargo, si quieres conservar tu tema actual de WordPress y usar SeedProd para crear páginas individuales, el Landing Page Builder es tu 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 selección de una plantilla y la comprensión del editor visual. Una vez que te familiarices con su funcionamiento, vuelve al paso 3 para obtener instrucciones sobre cómo añadir el bloque Contador a tu diseño.
Nota: Usaremos el Theme Builder con el kit de sitio web Headphone Shop para este tutorial.
Paso 3. Añadir el bloque Contador de SeedProd
El siguiente paso consiste en añadir el bloque Contador a tu página de destino o al diseño de tu tema de WordPress. Así que haz clic en Editar diseño en la página que quieras personalizar para abrirla en el editor visual.
Dado que estamos personalizando un tema de WordPress, empezaremos por editar la plantilla de la página de inicio:
Cuando abras tu diseño, verás un diseño similar a la siguiente captura de pantalla:
Tendrá bloques y secciones a la izquierda y una vista previa en vivo de tu página a la derecha.
Puedes hacer clic en cualquier lugar de tu vista previa para editar el contenido y personalizar cualquiera de los elementos de la plantilla.
También es súper fácil agregar nuevos elementos a tu página con arrastrar y soltar. Te mostraremos cómo hacerlo con el bloque Contador.
Desde el panel izquierdo, busca el bloque Contador y arrástralo a tu diseño de WordPress.
Una vez que el bloque esté en su lugar, puedes hacer clic en él para ver las diferentes opciones de personalización.
Con el bloque Contador, puedes:
- Añadir un valor de cuenta inicial y final
- Introducir un prefijo y sufijo numérico
- Establecer la duración de la animación
- Elegir un separador decimal o de espacios
- Añadir un título al contador
- Editar la alineación en móvil y escritorio
Además, al hacer clic en la pestaña Avanzado se ofrecen aún más ajustes para estilizar 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 escritorio.
Lo mejor es que no requiere CSS, HTML, Jquery o Javascript personalizados para que tu contador se vea exactamente como lo deseas. Simplemente apunta y haz clic para estilizar tu contador numérico, y tu hoja de estilos se actualiza automáticamente.
Continúa personalizando tu página hasta que estés satisfecho con el aspecto de todo. Luego haz clic en el botón Guardar en la esquina superior derecha para guardar tus personalizaciones.
Paso 4. Publica tus contadores de números animados
Después de añadir tus contadores de números animados a tu página personalizada y guardar tus cambios, estarás listo para publicarla para los visitantes de tu sitio web.
Si estás creando una página de destino independiente, simplemente haz clic en la flecha hacia abajo del botón Guardar y selecciona Publicar. Pero si estás utilizando el Theme Builder, hay un paso más.
Sal del constructor de páginas haciendo clic en el icono X, luego, desde el panel del constructor de temas, activa el interruptor Habilitar tema SeedProd a la posición "Sí".
¡Eso es todo! Ahora puedes previsualizar tu diseño para ver tu animación de contador numérico en acción:
2. Añadir animaciones de cuenta numérica usando Contador de Números
Si no te interesa usar un constructor de páginas de arrastrar y soltar para personalizar tu sitio de WordPress, hay otra forma de añadir animaciones de cuenta numérica a tu sitio sin escribir código.
En ese caso, puedes usar un plugin gratuito de contador de números para WordPress como el plugin Counter Number de WPShopMart. Te permite añadir contadores totalmente responsivos a tu sitio web para mostrar estadísticas numéricas en publicaciones, 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 contador numérico animado simple a tu sitio web con un shortcode.
Para empezar, descarga, instala y activa el plugin Counter Number en tu sitio de WordPress.
Luego ve a Contadores de Números » Todos los Contadores desde tu área de administración de WordPress, y haz clic en el botón Añadir Nuevo Contador.
En la siguiente pantalla, verás un constructor de contadores simple de arrastrar y soltar. Así que introduce un título para tu contador, luego desplázate hacia abajo hasta la sección Añadir Número Contador.
Ya hay 3 contadores configurados por defecto. Eliminaremos 2 de ellos haciendo clic en el icono de la papelera, luego editaremos el contador restante.
En la configuración del contador, puedes añadir un título, seleccionar un icono para el contador e introducir un valor numérico.
Luego, en el lado derecho, puedes cambiar lo siguiente:
- Color y tamaño del icono
- Color y tamaño del título del contador
- Color y tamaño del número del contador
- Pesos de fuente
- Familia de fuentes
También puedes ocultar el icono del contador si lo prefieres. Cuando estés satisfecho con el aspecto de tu contador, copia el shortcode y luego haz clic en Publicar.
Ahora estás listo para añadir tu contador a una publicación o página, así que crea o edita una página o publicación de WordPress. Luego, busca la sección de la página que desees y pega tu shortcode directamente en un nuevo bloque de párrafo.
Finalmente, haz clic en Actualizar o Publicar. Cuando previsualices tu página, el contador numérico contará automáticamente.
Preguntas frecuentes sobre contadores de números animados de WordPress
¡Ahí lo tienes!
Esperamos que esta guía te haya ayudado a encontrar el mejor método para añadir contadores de números animados a WordPress.
¿Listo para crear contadores de números personalizados sin código?
También te puede interesar leer los siguientes tutoriales de WordPress:
- Cómo agregar horarios comerciales a WordPress
- Cómo atenuar una imagen de fondo sin CSS
- Cómo añadir widgets de Twitter a tu sitio de WordPress
- Cómo añadir animaciones de texto en WordPress
- Los mejores plugins de WordPress para sitios web de negocios
¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.
Ojalá pudiera determinar si quiero que el decimal denote los miles o la décima parte. por ejemplo, 1.400 $M frente a 1,4 $M
Esto generalmente se reduce a tu preferencia personal, Kimber, y a lo que creas que tiene más sentido para tus usos. Personalmente, soy fan de 1,4 $M porque es más conciso.