Botão

Como adicionar um botão?

Adicionar botões em seu site são sempre uma boa forma de guiar os seus visitantes e leads a completarem uma ação específica que você pretende, exemplos: se inscrever em um formulário, baixar um ebook, visitar outras páginas do site, entre outros. Além de atrativos, incentivam o visitante ao clique no local. Aprenda neste tutorial a como criar botões personalizados no Construtor de Sites Builderall Builder.botão.png



Como adicionar um Botão? 

Passo 1 - Acesse o site e a página que deseja adicionar o Botão no Construtor de Sites Builderall Builder.

Passo 2 - Escolha um painel em sua página ou adicione um novo para a configuração do elemento.

Passo 3 - Acesse o menu lateral direito do construtor de sites; selecione a opção Adicionar e clique na área de Elementos; selecione a opção "Botão". 




Passo 4 - Escolha um, entre os 38 modelos de botões que irão aparacer; clique no botão escolhido e arraste até o local do painel desejado.

baOGIF-botão.gif



Como editar o Botão escolhido?

Antes de aprendermos as opções de configurações, vamos conhecer o submenu indicado ao selecionar o botão. 




Salvar elemento - selecione para salvar o elemento criado como um "elemento pessoal" e utilizá-lo em outros sites e páginas sem a necessidade de repetir todas as configurações. 


Camada abaixo/acima - selecione para mover o elemento entre as camadas do painel e ajustar a sobreposição dos elementos. 


Elemento central - 
selecione para ajustar automaticamente o elemento no centro do painel/caixa que ele foi adicionado.


Ocultar elemento - selecione para adicionar o elemento na parte de "ocultados" do site, ocultar não é sinônimo de deletar o seu elemento, elementos ocultos constam no carregamento da página e podem ser adicionados novamente ao site quando desejar. 


Excluir - selecione para deletar o botão criado. 


Editar elemento - selecione para acessar o menu de opções de configurações externas do elemento. 



Opções de edição do Botão: 







Tamanho: configure a altura e largura do elemento adicionado
   na versão desktop.

• Largura máxima no tablet: configure a largura máxima do
   elemento na versão tablet, caso habilitada em seu site.   

• Cores em Geral: configure as cores do elemento adicionado.

• Borda: 
crie uma borda para o seu elemento de diferentes
   tamanhos, formas e cores. 

• Raio: configure os cantos do seu elemento, eles podem ser
   quadrados, arredondados ou completamente circulares. 

• Título: configure o texto principal do botão adicionado.













• Subtítulo:
configure o texto secundário do botão
   adicionado.

• Sombra:
crie e configure uma sombra para o botão
   adicionado.

• Animação:
configure uma ação/animação para o botão baseado
   em tempo, clique, ação do mouse ou visibilidade do local.

• Configuração de tags: 
função utilizada para tags em scripts
   externos. O atributo tag deve ser utilizado somente por
   usuários experientes. Com essa tag é possível manipular os
   elementos através do seletor data-tag.

• Avançado:
alternativa para as configurações de: camada de
   posicionamento e salvar como elemento pessoal.








Pronto! Finalizamos assim a configuração do nosso tutorial; configure quantos botões desejar em um único ou em diferentes painéis e aproveite da melhor forma possível esse recurso no Construtor de Sites Builderall Builder! Não se esqueça de salvar e republicar sua página antes de realizar os testes.


Avalie a nossa Central de Ajuda, sua opinião é importante para nós! 

Faça seu negócio decolar 🚀
Equipe Builderall



Como configurar animação de entrada por tempo no botão?


Deseja que seus clientes acompanhem o vídeo ou texto explicativo do seu conteúdo antes de clicar no botão de chamada para a ação? Botões com "delay" (atraso) são uma ótima estratégia para que o botão de chamada apareça apenas no momento exato do vídeo ou texto que você deseja que seu cliente realize determinada ação. 

Aprenda neste tutorial a como adicionar animações de tempo e criar botões com "delay" utilizando o Construtor de Sites Builderall Builder:

Tempo-botão.gif

Acompanhe no vídeo ao lado a configuração que iremos aprender neste tutorial
                                                Seta PNG

 

 

 

 



Passo 1
 - Acesse a página do seu site que será feita a configuração no Construtor de Sites Builderall Builder.

Passo 2 - Escolha um painel em sua página ou adicione um novo para a configuração do elemento. 

Passo 3 - Adicione o elemento do Botão ao painel do site e o configure como desejar.

Dúvidas em como adicionar e configurar o elemento do Botão? Assista o tutorial da nossa Central de Ajuda sobre "Como adicionar um botão?" e aprenda a como configurar agora: Clique aqui! 



Passo 4 - Clique no botão adicionado e selecione a opção de Editar elemento no submenu do elemento. 



Passo 5
- Selecione a opção Animação no menu de configurações. 



Passo 6
- Escolha a opção de animação por Tempo; para configurar o tempo de entrada, adicione no campo "Hora que começar" o tempo que deseja que o botão fique oculto, após o fim do tempo adicionado, o botão irá aparecer em sua página/painel através da animação escolhida. 

Importante! A medida de tempo utilizada no campo é em segundos, ou seja, ao adicionar o número 5, por exemplo, o botão irá aparecer 5 segundos após o cliente acessar sua página, caso deseje utilizar o tempo em minutos ou horas, converta os valores para segundos antes de adicionar ao campo.
Exemplo: 5 minutos (tempo desejado) = 300 segundos (tempo convertido para adicionar ao campo). 

 

 

 



Passo 7 - Para configurar animações de entrada por tempo corretamente, é obrigatório o uso de efeitos de animação também de entrada, ou seja, efeitos que possuem a sílaba IN no nome, exemplo: FadeIN. Selecione o efeito de entrada desejado.



Passo 8
- Além do efeito de animação, podemos configurar a velocidade do efeito na opção "Speed" e se a animação de entrada irá se repetir infinitamente; acompanhe todas as configurações na tela ilustrativa, dessa forma, é possível confirmar as animações escolhidas e a velocidade no mesmo local. 

Animação-botão.gif


Pronto! Finalizamos assim a configuração do nosso tutorial; configure quantos botões animados desejar em um único ou em diferentes painéis e aproveite da melhor forma possível esse recurso no Construtor de Sites Builderall Builder! Não se esqueça de salvar e republicar sua página antes de realizar os testes.


Avalie a nossa Central de Ajuda, sua opinião é importante para nós! 

Faça seu negócio decolar 🚀
Equipe Builderall



Como adicionar uma Tag de Rastreamento no botão

Neste tutorial, iremos aprender a como adicionar uma Tag de Rastreamento no botão do seu site utilizando as configurações de script do Builderall Builder e o código do Google Ads; atualmente, não é possível realizar o rastreio dos cliques no botão por uma função ou ferramenta nativa da Builderall, porém, com a configuração indicada abaixo, a cada clique identificado no botão, o código do Google Ads é acionado, permitindo o acompanhamento através da plataforma externa. 

Passo 1 - Acesse a página do seu site que será feita a configuração no Construtor de Sites Builderall Builder.

Passo 2 - Escolha um painel em sua página ou adicione um novo para a configuração do elemento. 

Passo 3 - Adicione o elemento do Botão ao painel do site e o configure como desejar.

Dúvidas em como adicionar e configurar o elemento do Botão? Assista o tutorial da nossa Central de Ajuda sobre "Como adicionar um botão?" e aprenda a como configurar agora: Clique aqui! 



Passo 4
 - Clique no botão adicionado e selecione a opção de Editar elemento no submenu do elemento. 



Passo 5
- Selecione a opção Configuração de Tag no menu de configurações e adicione o nome da tag que será vinculada ao clique no botão.
Exemplo: CLICOU



Passo 6 - Retorne para a página principal do site no Construtor de Sites Builderall Builder e acesse as Configurações da página que o botão foi configurado. 



Passo 7 - Localize o campo Script da Página e siga os passos a seguir: 

• Copie o script abaixo e cole no campo de script da página indicado acima. 

<script>
$(document).ready(function(){
$('[data-tag="NOME DA TAG"]').on('click', function() {
console.log('funcionou');
})
});
</script>


• Altere o texto "NOME DA TAG" no script e adicione o mesmo nome configurado no campo de Configuração de Tag no botão anteriormente.  

Atenção!
Não delete as aspas do script, altere apenas o nome da tag para o nome já configurado.



• Delete o texto console.log('funcionou'); do script e adicione no mesmo local o código do Google Ads. 

 

 

 

 

 



• Retorne ao topo da página e salve o script adicionado.




Pronto! Finalizamos assim a configuração do nosso tutorial; configure o rastreamento de quantos botões desejar em um único ou em diferentes painéis! Não se esqueça de salvar e republicar sua página antes de realizar os testes.


Avalie a nossa Central de Ajuda, sua opinião é importante para nós! 

Faça seu negócio decolar 🚀
Equipe Builderall