Para configurar um botão acesse a engrenagem do elemento para disponibilizar as possibilidades de configuração que veremos nesse tutorial.
Em caso de dúvidas sobre como adicionar um botão em suas páginas, acesse nosso tutorial sobre como funcionam as configurações gerais de elementos no link abaixo:
Ajustes
· Visibilidade
Nas configurações de ajustes é possível configurar a visibilidade de um botão. Clicando no ícone que representa cada versão “Desktop | Tablet | Mobile” é possível ocultar ou mostrar o elemento de botão em cada um desses dispositivos. Para voltar a mostrar o botão que foi ocultado, basta clicar novamente no ícone do dispositivo desejado.
· Texto do botão
Na configuração de texto do botão você pode inserir o texto que deseja que apareça dentro no botão.
· Configurar ação
Nas configurações de ação você pode configurar qual ação deseja que o botão tenha, conforme abaixo:
1. Nenhuma ação > O botão não terá nenhuma ação.
2. Abrir link externo > Nessa opção poderá configurar uma URL externa para que quando o botão seja clicado o usuário seja direcionado para essa URL.
3. Rolar Página > Esse recurso pode ser utilizado em botões com a ação de rolar a página (âncora), selecionando na ação do botão o container/seção pela ID que configurou.
4. Submeter formulário > Caso tenha um formulário configurado na página, essa ação será disponibilizada para submeter os dados solicitados em um formulário. Para que a ação funcione corretamente é necessário selecionar o nome do formulário. Em seguida poderá configurar qual ação ou comportamento o botão deverá executar após submeter formulário.
Para mais detalhes sobre como configurar um formulário em suas páginas, acesse nosso tutorial no link abaixo:
https://help.rockfunnels.com/pt-BR/articles/5742851-como-inserir-formularios
5. 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 botão.
Posição
Nas configurações de “Posição” é possível configurar a posição do botão, tamanho, largura, margem (topo) e espaçamento interno (topo, baixo, esquerda, direita), 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.
Estilo
· Cor do botão > Nas configurações de estilo é possível configurar a cor da fonte utilizando a paleta de cores ou inserindo o código HEX da cor desejada.
· Borda | Radial | Sombra
Nas configurações de estilo é possível configurar borda ou sombra na seção. Para isso basta ativar as respectivas chaves que então será habilitada a possibilidade de inserir cor, ajustar o tamanho, deslocamento e esfumaçar.
Para ativar o radial basta ativar a respectiva chave e configurar os valores de radial conforme desejado.
Tipografia
· Fontes > Disponibilizamos centenas de tipos de fontes para você ter mais liberdade na criação de seus botões.
· Estilo > Em estilo você consegue estilizar a fonte de acordo com o objetivo que deseja destacar no texto. As opções de estilo disponíveis são: Light, Regular, Medium, Bold e Black.
· Cor do texto > Nas configurações de estilo é possível configurar a cor da fonte utilizando a paleta de cores ou inserindo o código HEX da cor desejada.
· Tamanho da fonte > É possível ajustar inserindo um valor manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.
Avançado
· Efeitos de movimento – Animação
Nas configurações avançadas é possível configurar efeitos de movimento/animação nos botões. 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 botão 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 botão.
Duração: É possível configurar a velocidade da animação entre “normal”, “devagar” ou “rápido”.
Atraso: É possível configurar um atraso no botão, ou seja, o botão 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 botão. 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
· Pixel do Facebook / Google
Nas configurações avançadas é possível configurar suas conversões do Pixel do Facebook e Google em cliques no botão.
Para mais detalhes sobre como fazer essa configuração, disponibilizamos tutoriais nos links abaixo:
