A inclusão de botões de call-to-action em seus posts ou páginas do WordPress pode aumentar as conversões. Esses botões são atraentes e direcionam os usuários a realizar ações específicas.
Por exemplo, você pode usá-los para enviar visitantes a uma página de preços, página de produto ou página de serviços. Eles também podem promover ofertas especiais, novos produtos ou links de afiliados.
Neste artigo, mostraremos a você como adicionar belos botões de call-to-action no WordPress. A melhor parte é que você não precisará escrever nenhum código.
Vamos explorar a maneira fácil de aprimorar seu site WordPress com esses botões eficazes.
Observação: este artigo se refere à adição de botões de call-to-action personalizados no WordPress. Se quiser adicionar botões de mídia 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.
Mostraremos várias maneiras de adicionar botões de call-to-action a 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
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
Em nossa experiência, esse método é fácil e recomendado para todos os usuários. Ele usa o bloco “Buttons” 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).
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.
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.
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.
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.
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).
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.
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 para que os usuários criem 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:
- Adicionar um botão no WordPress com código HTML/CSS.
- Adicione botões com um plug-in de código de atalho de botão do WordPress.
- 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 chamado “Insert Button” (Inserir botão) no editor visual.
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.
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.
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.
Depois disso, clique no menu suspenso para escolher o estilo do botão.
Há oito estilos diferentes de botões prontos para uso.
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.
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.
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.
Primeiro, você verá as configurações do botão Sticky Call. 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 seu 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 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.
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.
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.
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.
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.
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.
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 facilmente no WordPress. 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.
Jiří Vaněk
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
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
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.
sandra
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
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
Shahzaib
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
WPBeginner Support
For the button size, at the moment you would need to use CSS. We have a guide on how to use inspect element that will help you below:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Administrador
Daniel Piggott
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?
WPBeginner Support
You would want to ensure you are targeting the button block and not the specific button to see the alignment options
Administrador
Daniel Piggott
Hi,
Oh wow! I feel silly
Thanks for your help. It’s much appreciated!
Cheers, Dan
WPBeginner Support
You’re welcome
Carolyn R Cox
What about a button that performs an action on the page. For example executes a query, reloading the page with the query data (without replacing the page, in other words: no urls.) Is there a simple way to accomplish this without loading a different page? Thanks.
WPBeginner Support
That would be something that heavily depends on your specific use case and would likely require developer assistance.
Administrador
Roger Meachem
Finally, a clear instruction that works! Thank you. I’ve spent hours trying all manner of things and failing – perhaps they were out-of-date posts but this solved my problem and did so in minutes. It was perfect. I now have buttons that work on the Wordpress site.
WPBeginner Support
Glad our guide was able to help
Administrador
Meha Jain
Hi,
Any idea how I can add read more button on the theme modules?
The theme which i am using is not giving me the option to read more button in the modules on the home page.
How I can add read more button there?
Regards
Meha
(I am a non-technical person.)
WPBeginner Support
You would want to first reach out to your theme’s support and they may have a recommended method for adding that to your theme.
Administrador
Dreamlife
Thanks for the post. How can I create download button with wordpress premium?
WPBeginner Support
Sadly, for WordPress.com you would need to check with their support for what is currently allowed
Administrador
Rick Hoffarth
I need to add code to a button in order for the button to take the user to a merchant services portal to make secure payments. So far, the button creators want a URL, not code. How can I connect a button to another site that requires code in order to do it?
Daniel
Ok, so I know how to make a download button now, but how do I actually make that download happen ?
Thank you!
Mark Bologna
This was just what I needed. Read the article, downloaded the plugin, and had a working button all within ten minutes. Thanks!
Debbie
Super quick – just what I needed! Thank you so much. I had mucked around with some that were so hard to setup… I needed a button and this got the job done quick and easy!
Nina
Not great… styling is very limited
Utkarsh Agarwal
How to create links to sections on the same page? For example, I need to create a button after the completion of my post which points to the Comments section down below.
Jen Lewis
Can this plugin be installed on a site that’s on a free plan? In general, do you have to be on one of the paid plans to install additional plugins to your Wordpress site?
WPBeginner Support
Hi Jen,
You are probably using WordPress.com’s free plan. Please see our guide on the difference between self hosted WordPress.org vs free WordPress.com blog.
Administrador
Daniel
It works on sidebar as well? I need to know, thanks!
Mike Ritter
This plugin has been pulled from the library.
Jolynn Powers
Mike dose that mean that we can no longer add buttons this way and if so where do we look for other information on how to add buttons?? I need to add three buttons to my work website for a listing of dinning locations, entertainment locations and hotel locations and want to put them on a page rather than a post so that they are always on the site at the same location.
Furquan
I am searching for button , I have found your post at top in Google but the plugin you have mentioned is no more on Wordpress. Could you please help me
Aachal
Hey.. I want a button “Apply” instead of the page “Apply” on the homepage of my website.
How can that be done. Any lead on this?
bill
can i add buttons and then deactivate and delete the url and the buttons are still there ???
or is there a way to put in the css codes to function so i have them without a plugin ???
Bridget
Hi!
Can I link this to plugin contact form 7? If so, how?
Thanks!
Alysha
Thanks for this! Looks great, but is there anyway to use this plugin to add a button to the header on the homepage?
Toni
This is a really great plugin! It allows for a lot more customization than the standard shortcakes without having to write your own css!
One question though – why doesn’t it work in the visual text editor of the widgets? This would be so helpful it if also worked in widgets!
Thanks,
Toni
Wolf
Thank you!! Spent ages looking for something simple like this. Should have known to come here first
mohamed
thanks for your article…i install it and worked well except for the url. for example : when i write in the url (www.example.com) and publish my post and go to press the button , i found the button rfere to (www.example.net/www.example.com). how to solve this problem?
WPBeginner Support
Yep, seems like an issue with the plugin. Please try adding full url like this https://www.wpbeginner.com
Administrador
Altaf
Thank You Bhai i am Done Now and Solve my Wordpress issue
John
Thank you. This is exactly what I was looking for!
Alec
Hi! – is it possible to place several buttons side by side in a row? (with different items) – and how does the reference work?
Eric
I want to allow users to upload any image using Insert Image button. Will this work in that case?
Yonatan
Will this work on a sidebar as well ?
Jenny
Hello there!
This is very useful, but is there any way to use a custom image as a button rather than the options that come with the plugin? I have button images that I’ve downloaded from, and I’d like to use those instead because the logo is familiar to my site visitors.
Warmly,
Jenny
Karan Bhagat
Hey, I have been using this plugin for more than 2 of my sites and installed it on one more, it was working fine till yesterday, but suddenly now it has stopped working, it is showing any button in the toolbar to add these buttons to post. I deleted and reinstalled it, still facing the issue. Help please
Blake
How can i add things to the dropdown menu in the editor? i want things like Font size, buttons, or what ever else i chose to put there without using a plugin, is there anyway to do this?
WPBeginner Support
You can use TinyMCE Advanced plugin for that.
Administrador
Nancy
Thank you! Again! I was searching all over the internet for help with button shortcodes. Couldn’t get them to work. As always, you have the simple answer. I can stop looking any place else for WordPress help!
bryan midgett
How do I get the buttons on one line instead of vertical? I tried putting between buttons, but the tag prints. When I put my buttons side by side, they run together. Help!
Sacha
Thanks for the helpful information!
Prasad Saxena
I want a button to be displayed with each post on the main page of the website, which says go to the website. It should be just beside read more. I did get the button, but i dont know how to configure it so that each post has a different linking url.
Also the url can be inserted from the post itself. I mean while writing it. Just a box below, a text box where you can put the link to the button.
Please help….
WPBeginner Staff
Please make sure you are writing your post in the Visual Editor mode. The button does not appear in the text editor.
CEA
I installed the plugin and activated it, but am not seeing any change to my editor. I am using WP 4.0. What am I missing? Please help!
Bal Chandra Dhawan
I added this button today but URL didn’t work.
I added to page xyz.com/policies and add URL xyz.com/registration,
on clicking it says page not found and in address bar I see. xyz.com/policies/xyz.com/registration. Its adding existing page URL ?
Don’t know why?
Sarah McLain
Very helpful! Thank you
WPBeginner Staff
It could be. Did you check by switching to a default theme?
Bill Gibson
One problem: I guess it is a link underline that is going through the button text (almost like a strikeout). I have tried smallest and largest button sizes and the line is always through the text. I even tried to add “no decoration” to the style manually and that was ignored. Could this be theme specific? Thanks.
Seo service
I just installed this plugin and I adore it! I
already am putting it to good use on my blog. Thanks so much for the heads-up
on this.
WPBeginner Staff
No sorry this plugin is not supposed to do that.
Prishan Latchman
Is there a button that will allow me to add a specific amount of money to it so that when it is clicked it will increase the current value by that set amount?
E.G. The button is set to an amount for R20.00 and the item (a pair of shoes) for R100.00 and every time someone clicks on the button the price for the shoes goes up by R20.00 to R120.00
bucur
very good this plugin, I like it 5 stars
Brenda Malone
Thanks for the heads-up on this excellent plugin! I have installed on my sites AND donated to the author.
Rostislav Sofronov
This plugin is useful tool, rated to 5
WPBeginner Staff
Thanks for writing such a useful plugin.