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
- 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, acessar o botão "Pré-visualizar", como mostrado na imagem abaixo;
- Em seguida, dê um clique com o botão direito do seu mouse, e selecione a opção "Inspecionar elemento";
- Do lado direito da sua tela, irá abrir um aba onde você conseguirá identificar a ID deste elemento (repita o processo de identificação e cópia do ID em todos os números que serão animados);
- Em seguida, clique no ícone de engrenagem que fica localizado no canto superior direito da tela do editor de páginas;
- Clique em "Javascript & CSS";
- Clique no código chamado "Códigos de funcionamento" para editá-lo;
- Depois disso, substitua todos os elementos que dentro do código estão com o padrão "e_0000000" pelos ID's que você copiou na etapa 3 do tutorial;
- Por último, clique em "Salvar".
Adicionar um Contador Progressivo em uma página
- Acesse o editor de páginas;
- Clique no Ícone de engrenagem que fica localizado no canto superior direito da tela;
- Em seguida, clique em "Javascript & CSS";
- Clique para "Adicionar" um novo código;
- 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>
- Depois disso, você precisará inserir 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;
- Quando ele estiver adicionado na página, configure os números que deseja que apareçam em seu contador.
- O próximo passo é identificar os ID's dos elementos. Para isso, clique em "Pré-visualizar";
- Em seguida, dê um clique com o botão direito do seu mouse, e selecione a opção "Inspecionar elemento";
- Do lado direito da sua tela, irá abrir um aba onde você conseguirá identificar a ID deste elemento;
- Feito isso, copie o ID do elemento e altere dentro do código que foi instalado na página, bem neste local demarcado abaixo;
- Faça este mesmo processo com todos os números que configurar para rodarem no contador, e clique para "Atualizar" a página.
Ficou com mais alguma dúvida? Acione nosso suporte. Estamos sempre prontos para ajudar.
Atualizado em: 02/12/2021
Obrigado!