Cómo insertar o editar un CONTADOR PROGRESIVO en GreatPages

El contador progresivo es un código que debes agregar para que un elemento numérico se muestre en animación de conteo progresivo dentro de la página.

Hemos separado el tutorial en dos partes: para el caso de que quieras agregar un contador progresivo o para el caso de que simplemente quieras editar un contador ya existente.

Editar un Contador Progresivo existente en una página

1. En el campo de texto donde se encuentra el código que aleatoriza el contador, deberás editar los ID de los elementos de texto que contienen los números que tendrán la animación. Para hacerlo, haz clic en Editar el elemento de texto;

2. A continuación, accede a la pestaña de configuración Código y copia el ID indicado en el campo Selector CSS del elemento. Repite este proceso en todos los números en los que se aplicará la animación;

4. Después de eso, guarda los ID copiados y vuelve nuevamente al editor. Haz clic en el ícono de engranaje ubicado en la esquina superior derecha de la pantalla del editor de páginas;

5. Haz clic en "Javascript & CSS";

6. Haz clic en el código llamado "Códigos de funcionamiento" para editarlo;

7. Después de eso, reemplaza todos los ID de elementos que aparecen en el código (**"#e_0000000"**) por los ID que copiaste en el paso 2 del tutorial;

8. Por último, haz clic en "Guardar".

Agregar un Contador Progresivo en una página

1. Accede al editor de páginas;

2. Después de eso, inserta los números del contador en tu página. Para hacerlo, accede a la barra de iconos ubicada en el lado izquierdo de la pantalla y haz clic para agregar un elemento de Título;

3. Cuando esté agregado en la página, configura los números que deseas que aparezcan en tu contador y haz clic en Editar;

4. A continuación, accede a la pestaña de configuración Configurar y copia el ID indicado en el campo Selector CSS del elemento. Repite este proceso en todos los números en los que se aplicará la animación;

5. Después de eso, guarda los ID copiados y vuelve nuevamente al editor. Haz clic en el ícono de engranaje ubicado en la esquina superior derecha de la pantalla del editor de páginas;

6. Haz clic en "Javascript & CSS";

7. Elige un nombre para tu código, selecciona la opción "Funcionamiento" y agrega en el campo de texto todo el código que aparece a continuación y haz clic en "Guardar";

<script>
	var contadores = $('#e_3756946, #e_3756947, #e_3756948, #e_3756949');
	function Contador() {
		if (contadores.length) {
			var janela_top = window.scrollY;
			var janela_bottom = janela_top + $(window).height();
			for (var i = 0; i < contadores.length; i++) {
				var elemento = $(contadores[i]);
				var elemento_top = elemento.offset().top;
				var elemento_bottom = elemento_top + elemento.height();
				if (elemento_bottom > janela_top && elemento_top < janela_bottom) {
					(function(index) {
						var elemento_contador = $(contadores[index]);
						contadores.splice(index, 1);
						elemento_contador.html(elemento_contador.html().replace('.', ''));
						var numero = parseInt(elemento_contador.text().match(/[0-9]+/g));
						elemento_contador.find("span").html(elemento_contador.find("span").html().replace(/[0-9]+/, 0));
						var contador = 0;
						var contar = setInterval(function() {
							contador++;
							elemento_contador.find("span").html(elemento_contador.find("span").html().replace(/[0-9]+/, contador));
							if (contador == numero) {
								clearInterval(contar);
							}
						}, (2000 / numero));
					})(i);
					Contador();
					break;
				}
			}
		}
	}
	$(document).ready(function() {
		setTimeout(function() {
			Contador();
		}, 250);
	});
	$(document).on('resize scroll', function() {
		setTimeout(function() {
			Contador();
		}, 250);
	});
</script>

8. Después de eso, reemplaza todos los ID de elementos que aparecen en el código (**"#e_0000000"**) por los ID que copiaste en el paso 2 del tutorial;

¿Te quedó alguna duda? Contacta con nuestro equipo de soporte. Estamos siempre listos para ayudarte.

Actualizado el: 14/08/2026