En resumen: Cómo añadir un contador de números animado a WordPress (sin código)
Dos métodos para añadir contadores de números animados a cualquier página de WordPress, sin necesidad de codificación.
- Instalar SeedProd: Descarga el plugin, introduce tu clave de licencia y actívalo en tu sitio de WordPress.
- Crear un diseño: Elige el Theme Builder para crear un sitio completo personalizado o el Landing Page Builder para añadir un contador a una sola página.
- Añadir el bloque Contador: Busca "Contador" en el editor visual de SeedProd, arrástralo a tu diseño y configura el valor de inicio, el valor final y la duración de la animación.
- Publicar: Para las páginas de destino, haz clic en Publicar. Para los diseños de temas, activa el tema SeedProd desde el panel del theme builder.
- Método 2 (shortcode): Instala el plugin Counter Number, crea un contador con tus estadísticas, copia el shortcode y pégalo en cualquier publicación o página.
¿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.
¿Qué son los contadores de números animados?
Un contador de números animado es un efecto visual en el que un número cuenta hacia arriba (o hacia abajo) en tiempo real, típicamente para resaltar estadísticas como clientes totales, proyectos completados o años en el negocio.
Probablemente hayas visto esta animación de contador en sitios web de empresas y agencias, junto a señales de confianza como testimonios y estudios de caso.
Los estudios sobre atención y diseño web demuestran consistentemente que el movimiento atrae la mirada. Un contador de estadísticas que se anima al aparecer llama la atención de una manera que un número estático simplemente no lo hace. Esa es la diferencia entre "2.400 clientes" sentados en la página y ver cómo cuentan en vivo.
Aquí tienes algunos ejemplos de animaciones de números que puedes usar:
- 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 utilizado, un bloque de estadísticas de WordPress que muestra tus números reales actúa como una señal silenciosa: "Este negocio sabe lo que hace".
¿Qué método deberías usar?
Ambos métodos a continuación añaden animaciones de conteo a tu sitio sin código. Aquí te explicamos cómo elegir:
| M extasciitildeetodo | Mejor para | Personalización |
|---|---|---|
| Bloque de contador de SeedProd | Creando una nueva página o tema y quieres control visual total sobre fuentes, colores, espaciado y diseño móvil | Control visual total, estilo avanzado, sin código |
| Plugin Counter Number | Manteniendo tu tema existente y solo necesitas insertar un simple contador de estadísticas con un shortcode | Estilo básico, basado en shortcode |
1. Añadir animaciones de contadores de números con SeedProd
Para el primer método, te mostraré cómo añadir contadores de números animados a tu sitio de WordPress usando SeedProd.
SeedProd es un constructor de sitios web de arrastrar y soltar para WordPress que te permite diseñar sitios completos, páginas de destino y temas personalizados sin código.
Puedes añadir el bloque Contador a cualquier página, página de destino o tema personalizado que crees con SeedProd.
Los kits de sitio web completos y las plantillas de páginas de destino te permiten obtener un diseño terminado rápidamente. 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, usaré SeedProd Pro por su Theme Builder de WordPress de arrastrar y soltar.
A continuación, inicie sesión en el panel de su cuenta y haga clic en la pestaña Descargas. En esta pantalla, haga clic en el botón Descargar plugin SeedProd y copie su clave de licencia.
Ahora diríjase a su sitio web de WordPress y cargue el archivo .zip del plugin. Si necesita ayuda con este paso, siga estas instrucciones sobre cómo instalar y activar un plugin de WordPress.
Después de instalar y activar el plugin, vaya a Ajustes 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
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 utilizan el editor visual de SeedProd para personalizar su diseño. Y puede 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 desea mantener su tema actual de WordPress y usar SeedProd para crear páginas individuales, el Constructor de páginas de destino es su mejor solución.
¿Necesita una guía? Siga una de estas guías para configurar su diseño y luego vuelva al Paso 3 para agregar el bloque Contador: Cómo crear un tema personalizado de WordPress o Cómo crear una página de destino de WordPress.
Paso 3. Añadir el bloque Contador de SeedProd
El siguiente paso consiste en agregar el bloque Contador a su página de destino o al diseño de su tema de WordPress. Por lo tanto, haga clic en Editar diseño en la página que desea personalizar para abrirla en el editor visual.
Como estoy personalizando un tema de WordPress, comenzaré editando 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.
Agregar nuevos elementos a su página lleva unos segundos. Simplemente arrastre desde el panel izquierdo y suéltelo donde lo desee.
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 opciones para estilizar su contador. Por ejemplo, puede cambiar las fuentes y los colores del contador y el título, agregar 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 ni Javascript personalizados para que su contador se vea exactamente como lo desea. Apunte y haga clic para estilizar su contador numérico, y su hoja de estilos se actualizará 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á creando una página de destino independiente, haga clic en la flecha hacia abajo en el botón Guardar y seleccione Publicar. Pero si está 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:
El mejor lugar para una animación de contador es justo debajo de su sección principal o junto a un bloque de testimonios, donde la prueba social es más probable que impulse a un visitante a actuar.
Un contador que muestra "2400 clientes atendidos" junto a un botón de llamada a la acción supera constantemente a la misma llamada a la acción sin él. Sus números ya están haciendo el trabajo en su negocio, solo necesitan aparecer en la página.
2. Añadir animaciones de cuenta numérica usando Contador de Números
Si prefiere agregar un contador sin un constructor de sitios web completo, hay otra forma de agregar animaciones de recuento numérico a su 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 agregar contadores totalmente adaptables 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 Counter Numbers » All Counters desde tu área de administración de WordPress y haz clic en el botón Add New Counter.
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. Elimina 2 de ellos haciendo clic en el icono de la papelera, luego edita 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
¿Qué plan necesito para usar el bloque Counter en SeedProd?
El bloque Counter es un bloque PRO, disponible en los planes Plus, Pro y Elite de SeedProd. La versión gratuita de SeedProd no incluye el bloque Counter.
Si estás en el plan gratuito y deseas contadores de estadísticas animados, el plugin Counter Number (Método 2 anterior) es una sólida alternativa gratuita.
¿Puedo agregar un contador animado a cualquier página de WordPress o solo a las páginas de destino?
Con SeedProd, puedes agregar el bloque Counter a cualquier tipo de página, incluidas las plantillas completas de temas de WordPress, páginas de destino, páginas de "próximamente" y páginas personalizadas de error 404.
Con el plugin Counter Number, puedes agregar tu contador a cualquier publicación, página o área de widgets usando el shortcode que genera.
¿Cómo hago que el contador de números solo se anime cuando se desplaza a la vista?
El bloque Counter de SeedProd se anima automáticamente cuando el bloque entra en el viewport. No hay una configuración adicional que activar. Tan pronto como la sección se desplaza a la vista, comienza la animación de conteo.
Si tu contador se activa antes de ser visible, generalmente es un plugin de caché que está limpiando el disparador del viewport. Intenta limpiar la caché de tu sitio después de publicar.
¿El contador animado funciona en dispositivos móviles?
Sí. El bloque Counter de SeedProd es totalmente adaptable. También puedes establecer opciones de alineación separadas para móvil y escritorio directamente en el panel de configuración del bloque Counter.
El plugin Counter Number también se describe como totalmente adaptable, aunque ofrece menos controles específicos para dispositivos que SeedProd.
¿Puedo usar el bloque Counter de SeedProd sin crear un tema completo?
Sí. El bloque Counter funciona en páginas de destino independientes de SeedProd, por lo que no necesitas usar el Theme Builder en absoluto.
Crea una nueva página de destino en SeedProd, arrastra el bloque Counter al lienzo y publícala. Tu tema de WordPress existente permanece en su lugar en el resto de tu sitio.
Tus estadísticas merecen más que un número estático en la página. Con cualquiera de los métodos anteriores, puedes tener un contador animado funcionando en menos de 10 minutos.
¿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.