Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Como adicionar botões de chamada para ação no WordPress (sem código)

Nota editorial: Ganhamos uma comissão de links de parceiros no WPBeginner. As comissões não afetam as opiniões ou avaliações de nossos editores. Saiba mais sobre Processo editorial.

Deseja adicionar botões de call-to-action em seus posts ou páginas do WordPress?

Os botões são uma ótima maneira de aumentar as conversões. Eles são altamente perceptíveis, o que os torna excelentes para redirecionar a atenção dos usuários para uma interação desejada.

Por exemplo, você pode usar um botão de call to action para enviar os usuários para uma página transacional, como uma página de preços, uma página de produto, uma página de serviços e outras em seu site.

Você também pode usar botões de call-to-action para promover ofertas especiais, novos produtos ou links de afiliados que apontem para sites de parceiros.

Neste artigo, mostraremos a você como adicionar facilmente belos botões de call-to-action no WordPress sem escrever nenhum código.

Adding Buttons in WordPress Step by Step

Observação: este artigo se refere à adição de botões de call-to-action personalizados no WordPress. Se quiser adicionar botões de compartilhamento social, consulte nosso guia sobre como adicionar botões de compartilhamento social no WordPress.

Adição de botões em posts e páginas do WordPress (passo a passo)

O WordPress facilita muito a adição de botões com um bloco de botões integrado. Esse é um recurso que foi introduzido com o editor de blocos do WordPress Gutenberg.

Neste artigo, mostraremos três maneiras de adicionar botões de call-to-action em posts e páginas de blogs do WordPress. Você pode escolher a solução que melhor atenda às suas necessidades.

Sinta-se à vontade para usar o índice abaixo para navegar facilmente por este artigo:

Índice:

Tutorial em vídeo

Subscribe to WPBeginner

Se você não gostar do vídeo ou precisar de mais instruções, continue lendo.

Adição de botões em posts/páginas do WordPress usando o editor padrão

Esse método é fácil e recomendado para a maioria dos usuários. Ele usa o bloco Button incorporado no editor de blocos do WordPress. Se você ainda usa o editor clássico mais antigo, pode pular para a próxima seção.

Primeiro, você precisa criar uma nova postagem ou editar uma postagem existente na qual deseja adicionar um botão.

Na tela de edição da postagem, clique no ícone “+” e selecione o bloco Buttons na seção Layout Elements (Elementos de layout).

Add button block

Em seguida, você poderá ver o bloco de botões adicionado ao editor de conteúdo.

Basta clicar na área “Adicionar texto…” e digitar o texto do botão.

Add button text

Depois disso, clique no botão Link na barra de ferramentas para adicionar um link.

Você pode pesquisar um post ou uma página ou simplesmente copiar e colar um URL no campo de link.

Add button link

Depois disso, pressione “Enter” ou pressione o ícone “Aplicar” para salvar o link.

Se quiser exibir o botão no centro, você pode clicar no ícone “Justificar” e selecionar “Justificar centro”. Você também pode alterar o alinhamento vertical do botão na barra de ferramentas.

Change button alignment

Em seguida, você pode personalizar o estilo do botão e alterar as cores do texto e do plano de fundo no painel de configurações do bloco, no lado direito.

Basta alternar para a guia “Estilo” nas configurações de bloco para ajustar o estilo do botão.

Change button style

Há três estilos de botão que você pode escolher: padrão, contorno e quadrado. Você pode experimentar cada um deles clicando neles e escolhendo o que parecer melhor.

A seção Color Settings (Configurações de cores) inclui cinco variações de cores para o fundo e o texto do botão. Além disso, você também pode usar uma cor personalizada de sua escolha clicando na opção “Custom Color” (Cor personalizada).

Button style settings

Quando estiver satisfeito com o design do botão, você poderá salvar sua postagem ou publicá-la para ver uma visualização ao vivo.

Veja como ficou em nosso site de demonstração.

Call to action button preview

Bônus: se quiser ver o desempenho dos seus botões, use o MonsterInsights. Ele tem rastreamento de eventos integrado para links de afiliados, links de saída e eventos personalizados, para que você possa ver o desempenho dos seus botões. Para obter mais detalhes, consulte as métricas de marketing importantes que você deve rastrear no WordPress.

Criação de um botão do WordPress no Editor Clássico

O editor de blocos padrão do WordPress é moderno, mais rápido e mais fácil. Alguns usuários ainda usam o antigo editor clássico do WordPress.

Não recomendamos o uso do editor clássico do WordPress. Ele está desatualizado e não tem recursos suficientes de que os usuários precisam para criar conteúdo incrível. Se ainda o estiver usando, recomendamos desativá-lo e começar a usar o editor de blocos.

Por outro lado, alguns usuários ainda podem querer usá-lo. Nesse caso, você precisará de uma solução alternativa para adicionar botões em seu site WordPress.

Há três opções disponíveis para adicionar botões no Editor clássico do WordPress:

  1. Adicionar um botão no WordPress com código HTML/CSS.
  2. Adicione um botão no WordPress com um plug-in de código de atalho de botão do WordPress.
  3. Adicionar um botão no WordPress sem usar códigos de acesso.

Das três opções, a primeira é o método de codificação. Você precisará escrever um código HTML/CSS e adicioná-lo ao seu site sempre que precisar de um botão. Não é fácil para iniciantes.

A segunda opção é o método mais comumente usado. Isso ocorre porque a maioria dos plug-ins de botão do WordPress fornece códigos de acesso para adicionar botões.

A terceira opção é a melhor, pois permite que você adicione facilmente botões aos seus posts e páginas sem precisar se lembrar do shortcode.

Vamos dar uma olhada em como adicionar botões no WordPress sem usar códigos de acesso.

A primeira coisa que você precisa fazer é instalar e ativar o plug-in Forget About Shortcode Buttons. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Depois de ativar o plug-in, crie uma nova postagem ou edite uma já existente. No editor, você verá um novo botão no editor visual chamado “Insert Button” (Inserir botão).

Insert Button Icon in Classic WordPress Editor

Para inserir um novo botão em sua postagem, você precisa clicar no ícone “Insert Button” (Inserir botão).

Isso abrirá uma janela pop-up na qual você poderá criar seu novo botão.

Enter Button Text and URL in Classic Editor

Primeiro, você precisa adicionar o texto e o URL do botão. Ao adicionar o texto do botão, você poderá ver uma visualização ao vivo na caixa abaixo.

Em seguida, você pode adicionar uma tag nofollow ao seu link e abrir o link em uma nova guia clicando nas opções de caixa de seleção abaixo.

Depois disso, você pode selecionar um ícone para o seu botão. Se você clicar na guia “Icons” (Ícones), poderá ver os ícones que podem ser adicionados antes ou depois do texto nos botões.

Add Icon to your Button in Classic Editor

Esses ícones são, na verdade, fontes de ícones (saiba como usar fontes de ícones no editor de postagens do WordPress).

Em seguida, você pode escolher a cor do texto e a cor do plano de fundo do botão clicando no ícone da caixa de cores.

Change Button Background Color in WordPress Classic Editor

Depois disso, clique no menu suspenso para escolher o estilo do botão.

Há oito estilos diferentes de botões prontos para uso.

Choose a Button Style in Classic WordPress Editor

Da mesma forma, você também pode escolher o tamanho do botão, de extra pequeno a extra grande.

Quando estiver satisfeito com o visual, basta clicar no botão “Update” (Atualizar).

Você poderá ver o botão como ele aparece em sua postagem, diretamente no editor de postagens.

Você também pode definir o alinhamento do botão simplesmente selecionando o texto do botão e usando os botões da barra de ferramentas no editor clássico.

Center Align Your Button in Classic Editor

Clicar duas vezes no botão abrirá a janela pop-up Inserir botão, e você poderá reeditar o botão, se desejar.

Quando estiver satisfeito com o design, você poderá publicar ou atualizar sua postagem e vê-la em ação. Foi assim que o botão sofisticado apareceu em nosso site de demonstração do WordPress.

Button Preview - Built in Classic Editor

Adição de um botão Click-to-Call no WordPress

Além dos botões de call-to-action comuns, você também pode adicionar botões click-to-call em seu site para aumentar os leads e as conversões.

Um botão click-to-call é um tipo específico de botão de call-to-action que permite que os usuários façam uma chamada telefônica para a sua equipe com apenas um toque.

Usando os botões “tap-to-call”, os visitantes do site podem falar instantaneamente com a sua equipe pessoalmente e obter as informações de que precisam. Seja para discutir uma solicitação de orçamento, informações de pré-venda ou um problema de suporte, as chamadas telefônicas são rápidas.

Como o número de usuários de smartphones está crescendo, adicionar botões de chamada agora é ainda mais relevante hoje em dia.

Se você não tiver um telefone comercial, talvez queira considerar a possibilidade de obter um número de telefone comercial virtual.

Dito isso, vamos ver como adicionar botões click-to-call no WordPress, passo a passo.

A primeira coisa que você precisa fazer é instalar e ativar o plug-in WP Call Button. Para obter instruções detalhadas, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Após a ativação, você precisa visitar a página Settings ” WP Call Button para definir as configurações do plug-in e projetar seu botão click-to-call.

Sticky Call Button Settings in WordPress

Primeiro, você verá as configurações do Sticky Call Button. O botão de chamada fixo é um recurso otimizado para conversão que move o botão de chamada junto com os usuários à medida que eles navegam no site.

Você pode começar ativando o status do botão Ligar agora. Basta clicar no botão de alternância para ativá-lo.

Depois disso, você precisa digitar seu número de telefone. O WP Call Button tem um campo de número de telefone inteligente com o código do seu país. Basta selecionar seu país e inserir o número de telefone comercial.

Se você não tiver um número comercial, poderá obter um da Nextiva. Ela é um provedor de VoIP empresarial confiável.

Em seguida, você pode editar o texto do botão de chamada e escolher a posição e a cor do botão de chamada.

Além disso, você pode selecionar onde exibir o botão de chamada fixo em seu site. Por padrão, ele mostra o botão de chamada em todas as páginas e em todos os dispositivos. Você pode exibir ou ocultar o botão em determinadas páginas e exibi-lo somente em dispositivos móveis.

Depois de revisar todas as opções, você pode clicar no botão “Save Changes” (Salvar alterações) na parte inferior. Depois disso, você pode visitar seu site e ver o botão fixo “call now” em ação.

WordPress Click to Call Button

Além dos botões de chamada fixos, você também pode adicionar botões de chamada estáticos em suas páginas, posts e barras laterais do WordPress usando esse plug-in.

Se estiver usando o editor de blocos do WordPress, você poderá adicionar facilmente o botão call now às suas páginas usando o bloco WP Call Button.

Crie uma nova página ou edite uma página existente e adicione o bloco WP Call Button usando o editor de páginas.

Adding WP Call Button Block in WordPress

Depois disso, você pode personalizar o texto do botão, a cor do botão, a cor do texto, o tamanho da fonte e mostrar ou ocultar o ícone do telefone.

Quando estiver satisfeito com o design, você poderá publicar ou atualizar sua página.

Customizing Call Button in WordPress Page Editor

Se você estiver usando o editor clássico do WordPress, precisará usar o gerador Static Call Button para obter um shortcode.

Vá para Settings ” WP Call Button e clique no menu “Static Call Button” na parte superior.

Static Call Buttons in WordPress Settings

Basta personalizar as opções do botão e, em seguida, copiar o shortcode. Depois disso, você pode usar o shortcode em qualquer post ou página de seu site.

O plug-in WP Call Button também permite que você adicione o botão de chamada na barra lateral do WordPress e em outras áreas prontas para widgets.

Basta acessar Appearance ” Widgets e arrastar o widget WP Call Button para uma área pronta para widgets onde você deseja exibir o botão de chamada.

WordPress Call Button Sidebar Widget

Agora você pode adicionar um título, uma descrição e personalizar o botão de chamada na seção Advanced Settings (Configurações avançadas). Quando terminar, salve o widget.

É isso aí! Se você quiser ver um tutorial mais detalhado, consulte nosso guia passo a passo sobre como adicionar um botão click-to-call no WordPress.

Dica bônus para adicionar botões personalizados no WordPress

Adicionar apenas um botão de call to action nem sempre é suficiente. Talvez você também queira personalizar a página ou o post com uma imagem de herói, menus e um layout personalizado.

Nesse caso, recomendamos o uso de um plug-in do construtor de páginas do WordPress do tipo arrastar e soltar, como o SeedProd ou o Thrive Architect.

SeedProd add button

Esses construtores de páginas o ajudarão a criar páginas de destino personalizadas com botões de call-to-action sofisticados exatamente como você deseja.

Independentemente do que fizer, é importante que você acompanhe o desempenho dos seus botões, pois adivinhar não é a melhor estratégia de crescimento dos negócios.

Recomendamos o uso do MonsterInsights. Ele tem rastreamento de eventos integrado para links de afiliados, links de saída e eventos personalizados, para que você possa ver o desempenho dos seus botões. Para obter mais detalhes, consulte as métricas de marketing importantes que você deve rastrear no WordPress.

Esperamos que este artigo tenha ajudado você a aprender como adicionar botões no WordPress com facilidade. Talvez você também queira ver nosso guia completo sobre rastreamento de conversões no WordPress ou nossa lista dos melhores plug-ins do WordPress para aumentar seu site.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Veja como o WPBeginner é financiado, por que isso é importante e como você pode nos apoiar. Aqui está nosso processo editorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

O kit de ferramentas definitivo WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Reader Interactions

70 ComentáriosDeixe uma resposta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jiří Vaněk says

    Is it possible to track some statistics of the button, only with Google Analytics? Unfortunately, I don’t have monstesight, but I do have Google Analytics on my website.

    • WPBeginner Support says

      It is possible but you would need to set up the event tracking in Google Analytics which is why we recommend using MonsterInsights :)

      Administrador

      • Jiří Vaněk says

        Thanks for the reply and explanation. I plan to dive a bit more into Google Analytics, as the only things I currently track with them are the number of users, geolocation and backlinks. I know that GA can do an awful lot. However, I have already seen and read several articles on your website, so I believe that thanks to them I will finally understand this tool a little better. Thank you for your great work. She moved me forward in many ways.

  3. sandra says

    How can I add a form (first name / email address) to my call to action button?
    Or is there a way to adjust a contact form (remove textbox) to do the trick?
    I do not code.

    • WPBeginner Support says

      You would want to check with the support for your form plugin, depending on the one you are using there are different possible methods to do what you are wanting.

      Administrador

  4. Shahzaib says

    I have added a button thanks alot but it appears very small and i can’t figure out how to increase its size in block editor

  5. Daniel Piggott says

    Hi,

    I am currently trying to make a button on WordPress. But there is no option to align in the centre.

    Has the latest wordpress omitted the alignment feature of a button?

Deixe um comentário para Jiří Vaněk Cancelar resposta

Obrigado por deixar um comentário. Lembre-se de que todos os comentários são moderados de acordo com nossos política de comentários, e seu endereço de e-mail NÃO será publicado. NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.