> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://ajuda.greatsoftwares.com.br/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-13-as-_fi59hp.png =650x417)

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;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-13-as-_1dahfp3.png =650x385)

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;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-10-as-_1oawssv.png =650x182)

5. Clique em **"Javascript & CSS"**;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-10-as-_wykwb5.png =650x407)

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

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_wns74e.png =650x451)

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;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-13-as-_nlwyow.png =650x202)

||| Não adicione ou exclua nenhum caracter a mais. Edite apenas o ID.

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

### Adicionar um Contador Progressivo em uma página

1. Acesse o editor de páginas;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-10-as-_i8ftag.png =650x385)

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**;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-10-as-_9x7a89.png =650x646)

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

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-13-as-_7z9oa0.png =650x417)

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;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-13-as-_1dahfp3.png =650x385)

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;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-10-as-_1oawssv.png =650x182)

6. Clique em **"Javascript & CSS"**;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-10-as-_wykwb5.png =650x407)

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"**;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-11-as-_1pqrwg8.png =650x738)

```
<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;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-13-as-_nlwyow.png =650x202)

||| Não adicione ou exclua nenhum caracter a mais. Edite apenas o ID.

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