Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

¿Está buscando una forma de mostrar un contador numérico animado en su sitio de WordPress?

Mostrar un recuento de números ayuda a captar la atención de sus visitantes y le permite mostrar hitos, clientes satisfechos, proyectos finalizados correctamente y otras estadísticas importantes en su sitio web.

En este artículo, le mostraremos cómo mostrar una animación de conteo de números en WordPress.

How to show a number count animation in WordPress

¿Por qué añadir una animación de recuento de números en WordPress?

Mostrar un contador de números en su sitio web WordPress es una excelente forma de conseguir la participación de los usuarios y captar su atención.

Puede utilizarlo para mostrar estadísticas importantes de su sitio, como el número de visitantes mensuales o el número de artículos de un blog de WordPress.

Del mismo modo, puede utilizar un recuento numérico animado para mostrar los proyectos finalizados, el número de clientes satisfechos, el número de clientes, los hitos alcanzados por su empresa y otra información crucial.

Por ejemplo, OptinMonster utiliza un contador numérico para mostrar las sesiones mensuales optimizadas de los visitantes.

Number counter at OptinMonster

Añadir y personalizar un contador de números en WordPress normalmente requiere editar código. Esto puede ser complicado para los principiantes que no saben cómo escribir código.

Dicho esto, vamos a ver cómo se puede mostrar un contador de números animado en WordPress. Cubriremos 2 métodos simples usando un maquetador de sitios web premium y un plugin gratuito.

Puede enlazar los siguientes enlaces para saltar a la sección que prefiera:

La mejor manera de añadir un contador numérico animado en WordPress es utilizando SeedProd. Es el mejor maquetador de páginas de WordPress que ofrece un montón de opciones de personalización.

Para este tutorial, utilizaremos la versión SeedProd Pro porque incluye bloques avanzados y permite añadir un contador. También hay una versión SeedProd Lite que puedes probar gratis.

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

Tras la activación, SeedProd le pedirá que introduzca la clave de licencia. Encontrará la clave de licencia en el área de su cuenta y en el correo electrónico de confirmación de la compra.

Entering the SeedProd license key

A continuación, deberá dirigirse a SeedProd ” Páginas de destino desde su panel de administrador de WordPress.

SeedProd le permite crear páginas de destino personalizadas con un diseño profesional, incluyendo una página próximamente disponible, una página de modo de mantenimiento, una página de acceso y una página 404.

Siga adelante y haga clic en el botón “Añadir nueva página de destino”.

Click the Add New Landing Page button

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

Basta con pasar el cursor sobre una plantilla y hacer clic en el botón naranja de marcar / comprobar.

Select a page template

Se abrirá una ventana emergente. Introduzca el nombre y la URL de la página.

A continuación, haga clic en el botón “Guardar y empezar a editar la página”.

Enter a Page Name and Page URL

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

A continuación, puede editar la plantilla de su página añadiendo diferentes bloques o haciendo clic en los elementos existentes en la página.

Para añadir un recuento numérico animado, sólo tienes que arrastrar el bloque Contador del menú de la izquierda y soltarlo en la plantilla.

Add the counter block

A continuación, puede seleccionar el bloque Contador para personalizarlo aún más.

Por ejemplo, hay opciones para cambiar los números inicial y final del contador, introducir un prefijo y un sufijo numérico y editar el título.

Edit the title of the counter

A continuación, puede cambiar a la pestaña “Avanzado”, debajo de los ajustes del bloque Contador, a la izquierda.

Aquí encontrarás más opciones para cambiar el estilo, el color, el espaciado, el tipo de letra y mucho más para tu Bloque contador.

Edit the color and style of the block

A continuación, haz clic en el conmutador “Guardar” de la parte superior.

Ahora puede elegir “Publicar” en el menú desplegable.

Save and publish your changes

Para ver el contador numérico animado en acción, visite su sitio WordPress.

Este es el aspecto que tenía en nuestro sitio de demostración.

Number counter preview

Método 2: Mostrar una Animación de Recuento de Números Usando el Número Contador

Otra forma de añadir animaciones de conteo de números en WordPress es usando el plugin Counter Number.

Es un plugin gratuito para WordPress que es fácil de usar y te permite crear contadores de números sencillos para tu sitio.

En primer lugar, tendrá que instalar y activar el plugin Counter Number. Para más detalles, consulte nuestra guía sobre cómo instalar un plugin de WordPress.

Una vez activado, puede ir a Números de contador ” Todos los contadores desde su escritorio de WordPress y hacer clic en el botón “Añadir nuevo contador”.

Add a new counter

A continuación, puede introducir un título para su número de contador.

En la versión gratuita, solo puede seleccionar la plantilla de diseño simple. Si desea más plantillas y opciones de personalización, le sugerimos que utilice SeedProd.

Enter a name for the counter and select a template

A continuación, puede añadir detalles sobre el número del contador. Hay opciones para editar el título del contador, seleccionar un icono e introducir el valor del número del contador.

Puede añadir tantos números de contador como desee al hacer clic en el botón “Añadir nuevo contador” de la parte inferior.

Add counter details

Además, tiene más opciones de personalización en el panel de la derecha.

Por ejemplo, el plugin permite cambiar el color del título del contador, el color de los números, el tamaño de los iconos, el tamaño de la fuente, la familia de fuentes, etc.

Después de hacer los cambios, desplázate de nuevo a la parte superior y publica tu contador.

Publish your counter number

A continuación, puede dirigirse a Números de contador ” Todos los contadores desde su escritorio de WordPress.

Siga adelante y copie el shortcode Counter. Se verá algo como esto:

[COUNTER_NUMBER id=41]

Copy the shortcode for counter

Después, puede colocar su recuento de números animado en cualquier lugar de su sitio web, desde entradas y páginas hasta barras laterales.

Simplemente añade una nueva entrada o página o edita una existente. Una vez que estés en el editor de contenido, simplemente haz clic en el signo ‘+’ y añade un bloque shortcode.

Adding a shortcode block to WordPress

A continuación, puedes pegar el shortcode del número del contador en el bloque.

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

Free plugin counter number preview

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

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

Comentarios

  1. Felicidades, tienes la oportunidad de ser el primer comentarista de este artículo.
    ¿Tiene alguna pregunta o sugerencia? Por favor, deje un comentario para iniciar la discusión.

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.