Cómo mostrar una animación de contador de números en WordPress

Es probable que tu sitio web tenga números impresionantes que compartir, como la cantidad de clientes, años de experiencia, proyectos exitosos o premios ganados.

El desafío es hacer que los visitantes noten y se preocupen por estos logros en lugar de simplemente desplazarse por ellos. Ahí es donde brillan los contadores de números animados.

Cuando tus estadísticas cuentan desde cero a medida que los visitantes llegan a esa sección, se crea una mini-celebración de tu éxito. Este movimiento capta la atención y hace que tus logros se sientan más significativos y confiables.

A través de nuestra experiencia optimizando sitios de WordPress para un mejor compromiso, hemos descubierto que agregar estas animaciones es más fácil de lo que la mayoría de la gente piensa.

Te mostraremos exactamente cómo agregarlas usando 2 métodos sencillos.

Antes de agregar una animación de contador de números en WordPress... 📊

Antes de sumergirnos en el "cómo", consideremos rápidamente dónde funcionan mejor estos contadores animados en tu sitio web de WordPress:

• Secciones principales de la página de inicio para mostrar logros importantes
• Páginas de productos para resaltar las tasas de satisfacción del cliente
• Páginas "Acerca de" para mostrar hitos de la empresa
• Páginas de destino para enfatizar la prueba social
• Secciones de precios para mostrar la base de clientes o los ahorros

Por nuestra experiencia, hemos descubierto que la colocación estratégica es tan importante como la animación en sí. Por ejemplo, OptinMonster utiliza eficazmente un contador de números para mostrar las sesiones de visitantes mensuales optimizadas, colocándolo justo donde los clientes potenciales están tomando sus decisiones.

Agregar y personalizar un contador de números en WordPress generalmente requiere editar código. Esto puede ser complicado para principiantes que no saben cómo escribir código.

Dicho esto, veamos cómo puedes mostrar un contador de números animado en WordPress. Cubriremos 2 métodos sencillos utilizando un constructor de sitios web premium y un plugin gratuito.

Puedes hacer clic en los enlaces a continuación para saltar a tu sección preferida:

Opción 1: Crea una Página de Destino con Animaciones de Números (Recomendado)

Si estás creando una página de destino y quieres tener control total sobre cómo se ven y se comportan tus contadores de números, un constructor de páginas es tu mejor opción.

Hemos probado docenas de constructores de páginas de WordPress a lo largo de los años, y SeedProd se destaca consistentemente por sus amplias opciones de personalización, especialmente para elementos dinámicos como los contadores de números.

Para más información, puedes consultar nuestra reseña detallada de SeedProd.

Lo primero que necesitarás hacer es instalar y activar SeedProd. Si necesitas ayuda, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Al activar, SeedProd te pedirá que ingreses la clave de licencia. Puedes encontrar la clave de licencia en el área de tu cuenta y en el correo electrónico de confirmación de compra.

A continuación, deberás dirigirte a SeedProd » Landing Pages desde tu panel de administración de WordPress.

SeedProd te permite crear páginas de destino personalizadas diseñadas profesionalmente, incluyendo una página de próxima apertura, página de modo de mantenimiento, página de inicio de sesión y página 404.

Haz clic en el botón ‘Agregar nueva página de destino’.

Después de eso, puedes seleccionar una plantilla de SeedProd para tu página de destino y mostrar el contador de números animado.

Simplemente pasa el cursor sobre una plantilla y haz clic en el botón de verificación naranja.

Ahora se abrirá una ventana emergente. Simplemente ingresa un nombre de página y una URL de página.

Después de eso, haz clic en el botón ‘Guardar y empezar a editar la página’.

Esto iniciará el constructor de arrastrar y soltar de SeedProd.

A continuación, puedes editar tu plantilla de página agregando diferentes bloques o haciendo clic en los elementos existentes en la página.

Para agregar un contador de números animado, simplemente arrastra el bloque Contador desde el menú de tu izquierda y suéltalo en la plantilla.

Después de eso, puedes seleccionar el bloque Contador para personalizarlo aún más.

Por ejemplo, hay opciones para cambiar los números de inicio y fin del contador, ingresar un prefijo y sufijo de número, y editar el título.

A continuación, puedes cambiar a la pestaña ‘Avanzado’ en la configuración del bloque Contador a tu izquierda.

Aquí, encontrarás más opciones para cambiar el estilo, esquema de color, espaciado, fuente y más para tu bloque Contador.

A continuación, haz clic en el interruptor ‘Guardar’ en la parte superior.

Ahora puedes elegir ‘Publicar’ del menú desplegable.

Para ver el contador de números animado en acción, haz clic y visita tu blog de WordPress.

Así es como se veía en nuestro sitio de demostración.

Opción 2: Agregar una animación rápida de contador de números a cualquier página usando un plugin

A veces, un page builder es demasiado trabajo solo para agregar un simple contador de números. Esto es especialmente cierto si deseas agregar el contador a una publicación de blog o página existente.

Ahí es donde el plugin Counter Number ayuda. Es una solución gratuita que te permite agregar animaciones de números en cualquier lugar de tu sitio usando shortcodes.

Primero, necesitarás instalar y activar el plugin Counter Number. Para más detalles, por favor consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Tras la activación, puedes ir a Counter Numbers » All counters desde tu panel de WordPress y hacer clic en el botón ‘Add New Counter’.

Después de eso, puedes ingresar un título para tu número contador.

En la versión gratuita, solo puedes seleccionar la plantilla de diseño simple.

A continuación, puedes agregar los detalles del número contador. Hay opciones para editar el título del contador, seleccionar un ícono y ingresar el valor del número contador.

Puedes agregar tantos números contadores como desees haciendo clic en el botón ‘Add New Counterbox’ en la parte inferior.

Además de eso, obtienes más opciones de personalización desde el panel de tu derecha.

Por ejemplo, el plugin te permite cambiar el color del título del contador, el color del número, el tamaño del ícono, el tamaño de la fuente, la familia de fuentes, y más.

Después de hacer los cambios, desplázate hacia arriba y publica tu contador.

A continuación, puedes ir a Counter Numbers » All counters desde tu panel de WordPress.

Adelante y copia el código corto del contador. Se verá algo así:

[COUNTER_NUMBER id=41]

Después, puedes colocar este elemento de diseño de WordPress en cualquier parte de tu sitio web, desde publicaciones y páginas hasta barras laterales.

Simplemente agrega una nueva publicación o página, o edita una existente. Una vez que estés en el editor de contenido, haz clic en el signo ‘+’ y agrega un bloque de Shortcode.

A continuación, puedes pegar el shortcode del contador numérico en el bloque.

Desde aquí, previsualiza y publica tu página o publicación para ver el conteo animado de números en acción.

Extra: Agregar un cautivador fondo animado 🌟

Después de mejorar tu sitio con atractivos contadores numéricos, te recomendamos elevar su atractivo visual con un fondo animado.

Este elemento hace que tu página sea más interactiva y capta la atención de tu audiencia tan pronto como llega. Además, le da un aspecto de alta calidad sin abrumar tu contenido.

Una forma sencilla de agregar un fondo animado es utilizando la biblioteca particle.js. Esta ligera biblioteca de JavaScript permite efectos visuales impresionantes con partículas personalizables.

Puedes usar el sitio web particle.js de Vincent Garreau para editar tu configuración y generar el código.

Puedes ajustar su tamaño, color, forma y movimiento, y responden a las interacciones del usuario como movimientos del ratón o clics.

En WPBeginner, hemos encontrado impresionante la función de fondo de partículas incorporada de SeedProd. Con SeedProd, integrar particle.js en tus páginas es fácil y no requiere codificación.

Simplemente selecciona el estilo Personalizado y haz clic en el enlace proporcionado en SeedProd para generar tu fondo de partículas personalizado.

Para profundizar en este método, consulta nuestra guía detallada sobre cómo agregar un fondo animado en WordPress.

Preguntas Frecuentes sobre cómo agregar animación de contador de números

Aquí tienes algunas preguntas que nuestros lectores han hecho con frecuencia antes de agregar animación de conteo de números en WordPress:

¿Cómo agrego un contador en WordPress?

La forma más fácil es usar un plugin como SeedProd o Counter Number. Estas herramientas te permiten arrastrar y soltar contadores de números en tus páginas sin escribir código.

¿Cómo agrego animación en WordPress?

Puedes agregar animaciones usando un constructor de páginas como SeedProd. Simplemente selecciona un elemento en tu página y elige un efecto como desvanecer, acercar o deslizar.

¿Cómo hacer una cuenta regresiva en WordPress?

Puedes hacer una cuenta regresiva usando el bloque de cuenta regresiva en SeedProd. Esto es ideal para crear urgencia en páginas de ventas o páginas de "próximamente".

¿Cómo agregar un contador en CSS?

Puedes usar la propiedad CSS counter-increment, pero es compleja para principiantes. Recomendamos usar un plugin de WordPress para agregar contadores animados sin codificación.

¿Cómo agregar iconos animados en WordPress?

Puedes usar un constructor de páginas como SeedProd para agregar iconos con efectos de animación. Simplemente elige un icono y selecciona un estilo de animación en el menú de configuración.

¿Cómo hacer una lista numerada en WordPress?

Puedes usar el bloque de Lista predeterminado en el editor de WordPress. Simplemente selecciona la opción de lista numerada en la barra de herramientas y agrega tus elementos.

Esperamos que este artículo te haya ayudado a aprender cómo mostrar una animación de contador de números en WordPress. También puedes ver nuestro tutorial sobre cómo agregar un fondo animado en WordPress y nuestra selección experta de los mejores constructores de temas de WordPress para diseñar tu tema perfecto.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.