O elemento Contador é um recurso interessante para utilizar em suas páginas, pois por meio dele é possível criar senso de urgência em seus clientes e isso ajuda a converter mais.

Para configurar um contador em suas páginas acesse o ícone de engrenagem do elemento para disponibilizar as possibilidades de configuração que veremos nesse tutorial.

Em caso de dúvidas sobre como adicionar o contador em suas páginas, acesse nosso tutorial sobre como funcionam as configurações gerais de elementos no link abaixo:

https://help.rockfunnels.com/pt-BR/articles/6004116-como-funcionam-as-configuracoes-gerais-de-elementos-no-rockfunnels

· Visibilidade

Nas configurações de ajustes é possível configurar a visibilidade do elemento. Clicando no ícone que representa cada versão “Desktop | Tablet | Mobile” é possível ocultar ou mostrar o elemento em cada um desses dispositivos. Para voltar a mostrar o elemento que foi ocultado, basta clicar novamente no ícone do dispositivo desejado.

· Configurar ação

Nas configurações de ação você pode configurar qual ação deseja que o contador tenha, conforme abaixo:

1. Nenhuma ação > O contador não terá nenhuma ação.

2. Abrir link externo > Nessa opção poderá configurar uma URL externa para que quando o contador seja clicado o usuário seja direcionado para essa URL.

3. Rolar Página > Esse recurso pode ser utilizado com a ação de rolar a página (âncora), selecionando na ação do contador o container/seção pela ID que configurou, para que ao clicar no contador, role até esse container.

4. Ir para página do funil > Nessa opção poderá escolher uma página do funil para qual deseja direcionar o usuário ao clicar no contador.

· Tipo de Contador

Data Futura > Nas configurações de data futura é possível inserir uma data nos moldes dia / mês / ano para que o contador faça uma contagem regressiva dos dias que faltam para chegar até a data configurada.

Data Fixa > Nas configurações de data fixa é possível configurar uma contagem regressiva baseada em dias, horas, minutos e segundos, sendo possível escolher qualquer uma das opções para que tenha ação no contador.

Nas configurações de posição é possível configurar a posição (esquerda, centro, direita), tamanho, margem (topo) e espaçamento interno (topo, baixo), inserindo um valor manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.

​Atenção: Recomendamos não utilizar margens negativas, pois elas podem gerar conflitos com outros elementos da página. Se for usar para deslocar algum elemento de forma intencional, use com moderação e evite margens negativas com valores muito grandes.

· Background

Para inserir uma cor de fundo no contador, clique no elemento de cor que então será habilitada a possibilidade de inserir a cor através da paleta de cores ou inserindo o código HEX da cor desejada. Para excluir uma cor, clique no ícone de lixeira.

· Borda | Radial | Sombra

Nas configurações de estilo é possível configurar borda e sombra no elemento. Para isso basta ativar a respectiva chave que então será habilitada a possibilidade de inserir a cor da borda ou da sombra através da paleta de cores ou inserindo o código HEX da cor desejada. Para excluir uma cor, clique no ícone de lixeira.

Para ajustar o tamanho da borda, deslocar o efeito da sombra ou esfumaçar, insira um valor manualmente na caixa representada pelo número ou ajustando a barra conforme desejado. Para excluir uma cor, clique no ícone de lixeira.

Para configurar o radial basta ativar a respectiva chave e configurar os valores de radial manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.

· Fontes > Disponibilizamos centenas de tipos de fontes para você ter mais liberdade na criação do elemento.

· Estilo do Número > Para inserir uma cor nos números do contador, clique no elemento de cor que então será habilitada a possibilidade de inserir a cor através da paleta de cores ou inserindo o código HEX da cor desejada. Para excluir uma cor, clique no ícone de lixeira.

Para alterar o tamanho do número insira um valor manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.

· Estilo do Texto > Para inserir uma cor nos textos do contador, clique no elemento de cor que então será habilitada a possibilidade de inserir a cor através da paleta de cores ou inserindo o código HEX da cor desejada. Para excluir uma cor, clique no ícone de lixeira.

Para alterar a posição insira um valor manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.

· Efeitos de movimento – Animação

Nas configurações avançadas é possível configurar efeitos de movimento/animação no elemento. Basta selecionar um dos efeitos da lista, conforme desejado. Para excluir uma animação clique no ícone em formato de lixeira a frente do nome da animação.

Quando uma animação é selecionada será disponibilizado a possiblidade de configurar algumas ações relacionado ao comportamento da animação, conforme abaixo:
​
​Comportamento:

- Uma vez > o efeito de animação será apresentado apenas uma vez.

- Infinito > o efeito de animação irá ser apresentado enquanto o usuário estiver na página (loop).

Ativação:

- Animação de entrada > ao acessar a página o elemento começará a ter o efeito de animação selecionado.
​
​- Ao passar o mouse > A animação só acontecerá quando o cursor do mouse passar pelo elemento.

Duração: É possível configurar a velocidade da animação entre “normal”, “devagar” ou “rápido”.

Atraso: É possível configurar um atraso no elemento, ou seja, a imagem irá aparecer na tela após o tempo de atraso configurado. Valores até 1000 segundos podem ser inseridos na caixa representada pelo número ou através das setas < >.

· CSS Classes

Nas configurações avançadas é possível configurar CSS para o elemento. O recurso é útil para ativar recursos de estilo através de código utilizando o elemento de Script.

É necessário inserir um nome para o CSS no campo “Insira ou Selecione” e através do elemento de Script utilizar essa referência de nome inserindo o código relacionado ao CSS Classes que deseja aplicar.

Para mais detalhes sobre o CSS Classes, acesse nosso tutorial dedicado a esse recurso no link a seguir:
​
​https://help.rockfunnels.com/pt-BR/articles/6891608-como-funciona-a-configuracao-css-classes-no-rockfunnels