Passar para o conteúdo principal
Todas as coleçõesConstrutor de Sites/BuilderElementos
Como funciona o Elemento Botão na Rockty
Como funciona o Elemento Botão na Rockty

Descubra como configurar e personalizar botões em suas páginas na Rockty para direcionar ações e melhorar a interação com seus usuários

Sylas avatar
Escrito por Sylas
Atualizado há mais de uma semana

Introdução

Os botões são elementos essenciais para guiar as ações dos usuários em suas páginas, seja para redirecionar para um link, submeter um formulário ou navegar entre páginas do funil. Neste tutorial, você aprenderá como configurar e estilizar botões na Rockty, aproveitando ao máximo suas funcionalidades para criar uma experiência de navegação mais fluida e atrativa.


1. Como adicionar um Botão

Para adicionar um botão à sua página na Rockty, siga estes passos:

  1. Adicione um novo elemento em sua página.

  2. Selecione o elemento 'Botão' na lista de opções disponíveis no menu lateral esquerdo.

💡 Dica: Caso precise de mais detalhes sobre como adicionar elementos, confira nosso tutorial Gerenciando Elementos na Rockty: Adicionar, Excluir e Personalizar para orientações iniciais.


2. Como Acessar as Configurações do Elemento

Para acessar as configurações de um botão, clique no ícone de engrenagem do elemento ou clique com o botão direito do mouse sobre o elemento para abrir o menu de opções. Isso disponibilizará todas as possibilidades de configuração que veremos neste tutorial.


3. Configurações do Botão

Ajustes

  • Visibilidade

Você pode definir em quais dispositivos o botão será exibido (Desktop, Tablet, Mobile) clicando nos ícones correspondentes. Para ocultar o botão em um dispositivo, clique no ícone; para reexibi-lo, clique novamente.

  • Texto do Botão

Insira o texto desejado para exibir dentro do botão.

  • Configurar Ação

Selecione a ação que o botão executará ao ser clicado:

  • Nenhuma ação: O botão não executará nenhuma ação.

  • Abrir link externo: Direcione o usuário para uma URL externa ao clicar no botão.

  • Rolar Página: Use o botão para rolar a página para uma seção específica configurada por ID (âncora). Para mais detalhes veja nosso tutorial sobre Como configurar âncoras (rolar a página) na Rockty

  • Submeter Formulário: Se você tiver um formulário na página, configure o botão para submeter os dados. Certifique-se de selecionar o formulário correto e definir o comportamento após a submissão. Para mais detalhes sobre a configuração de formulários, veja nosso tutorial sobre como Como Personalizar e Configurar Formulários na Rockty

  • Ir para página do funil: Escolha uma página do funil para direcionar o usuário ao clicar no botão.

  • Abrir Pop-up: Caso exista um pop-up configurado na página, essa opção permite definir o botão para abrir o pop-up específico ao ser clicado. Selecione o pop-up desejado a partir da lista disponível. Para mais detalhes veja nosso tutorial sobre como configurar pop-ups na Rockty.


Posição

Ajuste a posição, tamanho, largura, margens e espaçamento interno do botão inserindo valores manualmente ou ajustando as barras de controle.

💡 Dica: Evite margens negativas para prevenir conflitos com outros elementos da página.


Estilo

  • Cor do Botão: Configure a cor do botão usando a paleta de cores ou inserindo um código HEX. Para excluir uma cor, clique no ícone de lixeira.

  • Borda, Radial e Sombra: Ative bordas, sombras e efeitos radiais, ajustando os parâmetros conforme necessário.


Tipografia

  • Fontes e Estilos: Escolha entre diversas fontes disponíveis e defina o estilo do texto (Light, Regular, Medium, Bold, Black).

  • Cor do Texto: Defina a cor do texto do botão através da paleta de cores ou insira o código HEX desejado. Para excluir uma cor, clique no ícone de lixeira.

  • Tamanho da Fonte: Ajuste o tamanho da fonte do texto do botão conforme preferir.


Avançado

  • Efeitos de Movimento e Animação: Adicione animações aos botões, como entrada, loop contínuo, ou ativação ao passar o mouse. Configure a duração, velocidade e atraso das animações conforme desejado.

  • CSS Classes: Personalize ainda mais o botão aplicando CSS personalizado. Insira um nome para o CSS e utilize o elemento Script para referenciar e aplicar o código CSS. Para mais detalhes, consulte nosso tutorial sobre configuração CSS Classes.

  • Pixel do Facebook / Google: Configure conversões de cliques no botão para Pixel do Facebook ou Google Tag Manager. Veja nossos tutoriais sobre configuração do Pixel do Facebook e Google Tag Manager.


Conclusão:

Configurar botões na Rockty é uma tarefa simples, mas essencial para direcionar o fluxo de navegação e interações do usuário em suas páginas. Utilize as configurações e personalizações disponíveis para criar botões que se destaquem e ofereçam uma experiência de navegação otimizada e intuitiva.


Dicas Adicionais

  1. Crie CTAs (Call-to-Action) Claros: O texto do botão deve ser direto e chamar o usuário para uma ação específica, como "Saiba Mais", "Comprar Agora" ou "Assinar". Evite textos vagos para garantir que o usuário entenda o próximo passo.

  2. Escolha Cores de Destaque: Use cores contrastantes para o botão, de forma que ele se destaque no design da página, mas mantenha harmonia com a paleta de cores geral. Isso pode aumentar a taxa de cliques.

  3. Tamanho e Espaçamento Adequados: Garanta que o botão tenha um tamanho adequado para ser facilmente clicado, especialmente em dispositivos móveis. Certifique-se também de que há espaço suficiente ao redor do botão para evitar cliques acidentais.

  4. Use Links Externos ou Âncoras: Aproveite as funcionalidades do botão para redirecionar usuários a links externos, âncoras dentro da página ou mesmo iniciar uma ação específica, como abrir o WhatsApp.

  5. Acessibilidade: Lembre-se de que botões devem ser acessíveis a todos. Certifique-se de que o contraste de cores atenda às diretrizes de acessibilidade e que o botão seja facilmente navegável para usuários de teclado.

  6. Efeitos de Hover com CSS: Para criar efeitos de hover personalizados para seus botões, consulte nosso tutorial detalhado sobre como configurar efeitos de hover usando CSS. Veja o tutorial aqui.


Precisa de Ajuda?

Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte!

Respondeu à sua pergunta?