Botão
- Como adicionar um botão?
- Como configurar animação de entrada por tempo no botão?
- Como adicionar uma Tag de Rastreamento no 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.
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.
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.
Definir link - selecione para abrir o menu de opções de configurações de redirecionamento ou ação para o botão.
Elemento clone - selecione para duplicar o botão criado.
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!
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:
Acompanhe no vídeo ao lado a configuração que iremos aprender neste tutorial
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.
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!
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!
Equipe Builderall