Olá, Kangaroozinho, como vai? Se você tem um site WordPress, utiliza o Elementor, mas ainda não tem tanta familiaridade com a tela de criação/edição do plugin, neste artigo vamos te mostrar como criar um botão de chamada com o Elementor, tanto com a versão gratuita, como a versão PRO.
Se você está começando a usar o Elementor, ele é um plugin que te permite montar o seu site puxando elementos para a tela, sem a necessidade de usar códigos para a construção. E a principal ferramenta para essas construções são os contêineres, visto que eles basicamente estruturam o seu site de modo a ficar mais organizado e de melhor visualização.
Neste artigo não vamos mostrar como construir uma página inteira, o objetivo é apenas demonstrar – tanto com a versão gratuita, como a versão PRO do Elementor – como criar um botão de chamadas (CTA), focado em buscar conversões ou leads, de acordo com a sua necessidade.
Criando o botão com o Elementor (Gratuito)
- Acesse o painel administrativo do seu WordPress (wp-admin)
- Abra a página/post que você deseja editar com o botão, e clique para Editar com o Elementor
- Agora, após adicionar o contêiner, procure e adicione o elemento Botão (Button)
- Na aba “Conteúdo”, personalize o texto, link de destino e se quiser, você também pode adicionar um ícone que seja chamativo.
- Agora vamos para a aba “Estilo”, que é a mais importante. Aqui, centralize a posição do botão, em Tipografia altere o tamanho das letras, altere a cor do botão para uma que corresponda a sua marca/campanha
- Em seguida, clique na opção Ao passar o mouse, e configure a duração da transição, a animação ao passar o mouse (pode ser grow). Se quiser, você também pode mudar o raio da borda (para arredondar) e o preenchimento para deixar o botão maior.
Se você desejar, você pode acessar a aba Avançado para configurar um efeito de movimento e definir uma animação para o botão aparecer.
Esse é um exemplo de botão feito totalmente com o modelo da versão gratuita do Elementor. Se você tiver a versão PRO, abaixo mostramos uma forma mais prática para criar esse botão com foco em CTA.
Criando o botão com Elementor PRO
- Adicione o contêiner, e em seguida o elemento Chamada à ação (Call to action)
- Na aba “Conteúdo”, selecione uma imagem para o elemento do botão
- Ainda nessa aba, expanda a coluna “Conteúdo” e preencha o título, descrição e o botão com título e link.
Logo abaixo você pode adicionar uma “Fita”, fica a seu critério se deseja colocar esse elemento adicional ou não. - Agora, na aba “Estilo”, você pode editar alguns elementos da caixa e da imagem
- Na parte de conteúdo você pode editar as cores, tipografia e também o hover da seção do conteúdo do seu botão.
Hover é o efeito que acontece quando o usuário passa o mouse pelo botão, você pode definir cores diferentes para esse efeito. - Por fim, você pode editar individualmente a opção Botão, para mudar cores, borda, fundo, etc.
- Abaixo um exemplo com o botão da versão gratuita (em cima), e o botão com a versão PRO (em baixo)
Ao seguir os passos acima, agora você já sabe como fazer para criar botões com foco em CTA no Elementor, reforçamos que, o foco deste artigo é somente demonstrar como você pode criar os botões, e é claro que esse é apenas um elemento em meio a vários para criação da sua página. Além disso, mostramos também a diferença do nível de edição do plugin na versão gratuita e a PRO.
E antes de finalizar, uma dica: Se você é um cliente Kangaroo Host e possui um serviço de hospedagem ou revenda, você tem direito a pelo menos 1 licença do Elementor PRO. Sendo assim, caso deseje solicitar a instalação para o seu site WordPress, acesse este artigo: Como solicitar as licenças incluídas no seu plano.