Como inserir ou editar um CONTADOR PROGRESSIVO no GreatPages

O contador progressivo é um código que você adicionar para que um elemento de número seja exibido em animação de contagem progressiva dentro da página.

Separamos o tutorial em duas partes: Para caso você queira adicionar um contador progressivo ou para caso você apenas queira editar um contador já existente.

Editar um Contador Progressivo existente em uma página

1. No campo de texto, onde está o código que randomiza o contador, que você precisará editar os ID's dos elementos de texto que contém os números que sofrerão a animação. Para fazer isso, clique para Editar o elemento de texto;

2. Em seguida, acesse a aba de configurações Configurar e copie o ID informado no campo Seletor CSS do elemento. Repita esse processo em todos os número em que será aplicada a animação;

4. Depois disso, guarde os ID's copiados e volte novamente ao editor. Clique no ícone de engrenagem que fica localizado no canto superior direito da tela do editor de páginas;

5. Clique em "Javascript & CSS";

6. Clique no código chamado "Códigos de funcionamento" para editá-lo;

7. Depois disso, substitua todos os ID's de elementos que estão no código (**"#e_0000000"**) pelos ID's que você copiou na etapa 2 do tutorial;

8. Por último, clique em "Salvar".

Adicionar um Contador Progressivo em uma página

1. Acesse o editor de páginas;

2. Depois disso, insira os números do contador na sua página. Para isso, acesse a barra de ícones localizada no canto esquerdo da sua tela, e clique para adicionar um elemento de Título;

3. Quando ele estiver adicionado na página, configure os números que deseja que apareçam em seu contador e clique em Editar;

4. Em seguida, acesse a aba de configurações Configurar e copie o ID informado no campo Seletor CSS do elemento. Repita esse processo em todos os número em que será aplicada a animação;

5. Depois disso, guarde os ID's copiados e volte novamente ao editor. Clique no ícone de engrenagem que fica localizado no canto superior direito da tela do editor de páginas;

6. Clique em "Javascript & CSS";

7. Escolha um nome para seu código, selecione a opção "Funcionamento" e adicione no campo de texto todo o código abaixo e clique em "Salvar";

<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. Depois disso, substitua todos os ID's de elementos que estão no código (**"#e_0000000"**) pelos ID's que você copiou na etapa 2 do tutorial;

Ficou com mais alguma dúvida? Acione nosso suporte. Estamos sempre prontos para ajudar.

Atualizado em: 13/08/2026