Como Adicionar e Estilizar um Botão no WordPress (4 Maneiras Fáceis)

Você quer aprender como criar e estilizar botões para o seu site WordPress?

Botões são poderosos e podem ser usados para chamar os usuários à ação para se inscrever na sua lista de e-mail, seguir você nas redes sociais e comprar seu produto.

Para criar botões personalizados, você pode usar um trecho de código ou simplesmente baixar um plugin que faz tudo por você.

Neste tutorial, mostraremos como adicionar e estilizar um botão em sua página da web e até mesmo adicionar efeitos de animação. Vamos começar.

Aqui está um índice que você pode usar para pular para o método que mais lhe interessa:

• Adicionar um botão no Editor de Blocos
• Adicionar um botão usando SeedProd
• Adicionar um botão usando Thrive Themes
• Adicionar um botão usando Código

Antes de começar, você pode querer ver esta folha de dicas detalhada sobre como criar um botão perfeito para o seu site.

Adicionar botões às suas postagens e páginas incentiva seus usuários a fazerem o que você quer que eles façam. Sem um botão ou CTA, seu site carece de uma estratégia otimizada e deixa suas taxas de conversão ao acaso.

Como diz o especialista em marketing Neil Patel, um botão ou CTA é a "ponte entre marketing e vendas". Você pode usar botões no WordPress para dar seu CTA final aos seus usuários, como Comprar Agora, Fale Conosco, Baixar, ou outros.

No entanto, é importante que você saiba como usar esses botões para maximizar suas conversões. Existem vários fatores que tornam alguns botões melhores do que outros.

Estes incluem:

• Conhecer seu objetivo de conversão
• Manter o texto do seu botão curto e cativante
• Usar palavras de ação
• Fornecer um incentivo

Agora, vamos ver como criar botões poderosos no WordPress para o seu site sem nenhum código.

Adicionar um Botão no WordPress com o Editor de Blocos

Por padrão, o editor de blocos do WordPress permite adicionar um botão simples ao seu site. Isso é gratuito e qualquer pessoa pode usar.

Primeiro, crie ou edite qualquer página ou post no WordPress. Em seguida, você pode usar o botão ‘+’ para adicionar um novo bloco. Procure por ‘botão’ e adicione o widget à sua página.

Agora você verá um botão adicionado ao seu post. Vamos personalizá-lo. Clique no botão para abrir as configurações dos botões.

Você verá um menu aparecer logo acima do botão. Você pode explorar essas configurações para alterar o alinhamento, adicionar um link, editar o texto e a fonte, e mais.

No painel direito, você pode alterar a largura, adicionar um link e uma âncora HTML também. Se você mudar para a aba Estilos, terá mais opções para personalizar o botão.

Você pode mudar o botão de um fundo sólido para um contorno. Existem opções para alterar o tamanho, o preenchimento e a borda.

Agora, este método é fácil, mas limitado em opções de personalização. Se você quiser estilizar o botão e adicionar efeitos de animação, precisará usar um construtor de páginas do WordPress. Em seguida, mostraremos como usar 2 construtores muito populares – SeedProd e Thrive.

Adicionar um Botão no WordPress usando SeedProd

Existem muitos plugins de construtor de páginas por aí que permitem personalizar sua página e adicionar botões com facilidade. Nossa principal recomendação é o SeedProd.

SeedProd é um construtor de sites e páginas de destino para WordPress. Ele vem com temas pré-fabricados que já possuem botões estrategicamente posicionados para você. Você simplesmente precisa escolher um tema e editá-lo para atender às suas necessidades.

Com o SeedProd, você pode adicionar todos os tipos de elementos poderosos como:

• Perfis sociais
• Botões de compartilhamento social (Curtir, Tweetar, Seguir)
• Tabela de preços e botão de pagamento
• Cronômetro regressivo
• Menu de navegação
• Avaliações e depoimentos
• Galeria de imagens
• Google Maps

…e muito mais.

Existe um construtor de arrastar e soltar com uma interface visual. Isso significa que você editará o front-end do seu site. Simplesmente clique e edite qualquer coisa que precisar, e arraste e solte novos elementos para onde desejar.

Nunca há necessidade de codificação. Veja como alteramos o texto em nosso design de exemplo aqui:

Chegando às opções de personalização avançada para botões, o SeedProd inclui:

• Estilos de botão pré-fabricados
• Tamanho, forma e cor personalizáveis
• Fontes e tipografia personalizadas
• Ícones para o botão
• Efeitos de animação
• Recurso de duplicação para transferir o estilo do botão para outros blocos
• Salvar o layout como um modelo personalizado
• Mostrar/ocultar em dispositivos
• Visualizar em celular e tablet
• Elementos amigáveis para SEO como tags no-follow e abrir em nova aba

Com o SeedProd, você terá tudo o que precisa para projetar um botão impressionante para fazer com que os usuários cliquem e tomem ação em seu site.

A primeira coisa que você precisará fazer é baixar e instalar o SeedProd em seu site.

Assim que você ativar o plugin, vá para o painel de administração do WordPress e abra o SeedProd. Se você estiver construindo um novo site, pode selecionar um kit de tema pronto e personalizá-lo. Isso criará todas as páginas e posts que seu site pode precisar.

Para este tutorial, mostraremos como adicionar um botão a uma página de destino. Navegue até a aba SeedProd » Landing Pages. Aqui, você pode adicionar uma nova página de destino.

Escolha um modelo e adicione um nome para sua página, então o construtor será aberto. Você verá uma prévia ao vivo do seu design com um painel de edição à esquerda.

Dos blocos padrão disponíveis, basta arrastar e soltar o bloco de botão em seu design. Ao fazer isso, mais opções para editar o botão serão abertas à esquerda. Você pode simplesmente clicar no texto do botão e adicionar sua própria chamada para ação. Veja como adicionamos e editamos um botão em nossa página facilmente:

Ao selecionar o botão, no painel esquerdo, na aba Conteúdo, você pode editar o texto, tamanho, alinhamento, adicionar um link e muito mais. Estas são as opções padrão disponíveis no editor de blocos do WordPress também.

Ao adicionar um link, você terá opções para adicionar elementos de SEO como 'no follow' e 'abrir em uma nova janela'.

Agora há mais. Você não precisa estilizar o botão sozinho. Se você mudar para a aba Modelos, verá designs de botões prontos para escolher. Você pode escolher um design de botão plano ou em pílula.

Há também muitas cores para escolher. Se você quiser mais controle sobre o estilo do seu botão, vá para a aba Avançado. Aqui, você pode ajustar o preenchimento, raio, largura, cor e muito mais.

Na aba Avançado, role para baixo e você verá Efeitos de Animação. Você pode fazer seu botão quicar, pulsar, tremer e muito mais. Isso ajudará você a chamar a atenção do seu leitor.

Na parte inferior do construtor de páginas, há uma opção para visualizar no celular e tablet para garantir que o design do seu botão fique bom em todos os dispositivos.

Assim, você pode personalizar toda a sua página de destino com o SeedProd. Quando estiver pronto, você pode salvar e publicar sua página.

Adicionar um Botão no WordPress usando Thrive

O Thrive Themes possui um poderoso construtor de temas e construtor de páginas de destino que você pode usar para personalizar seu site WordPress.

Para este tutorial, mostraremos como usar o Thrive Architect – o construtor de páginas de destino. Os passos para o construtor de temas seguem passos semelhantes.

O Thrive Architect é amigável para iniciantes e fácil de usar para qualquer pessoa. Este plugin é uma ferramenta premium, então você precisará inscrever-se em uma conta Thrive primeiro.

Em seguida, você pode instalar este plugin em seu site. Saiba como fazer isso em nossa Análise do Thrive Architect.

Uma vez instalado em seu site, comece criando ou editando qualquer página usando o construtor Thrive Architect.

Quando o construtor de páginas de destino Thrive abrir, você verá uma prévia da sua página junto com as opções de edição à direita e à esquerda do construtor.

No painel esquerdo, clique no ícone '+' e um menu de blocos será aberto. Aqui você pode selecionar o bloco 'Botão' e arrastá-lo e soltá-lo em seu design.

Ao fazer isso, você verá o botão aparecer na prévia junto com as opções de edição à direita. Você pode alterar a cor, tamanho, alinhamento e muito mais. Você também pode adicionar um link e adicionar tags 'no follow' ou 'abrir em nova aba'.

No menu à esquerda, há uma aba ‘Botão de Modelo’. Ao abri-la, você verá diferentes estilos de botão para escolher. Há tantas opções aqui que você nunca mais precisará estilizar um botão por conta própria.

De volta à aba Opções Principais, role para baixo para encontrar mais opções.

Essas opções incluem:

• Tipografia
• Estilo de Fundo
• Layout e Posição
• Animação e Ação
• Responsivo
• Atributos HTML

…e muito mais.

Para dar vida ao seu botão, abra a aba Animação e Ação. Você verá efeitos de animação para fazer seu botão deslizar, aumentar, crescer, diminuir, desaparecer e muito mais.

Quando você tiver personalizado toda a sua página e estiver pronto para publicar, abra o ícone de configurações no topo do construtor. Aqui, você pode publicar sua página para que ela fique ativa em seu site.

É isso! Você aprendeu a criar um botão usando o editor de blocos e construtores de página de terceiros. Em seguida, também mostraremos como usar codificação personalizada para adicionar um botão.

Adicionar um Botão usando Código

Se você entende de código e quer adicionar/estilizar um botão por conta própria, então você vai querer conferir o WPCode.

WPCode oferece trechos de código pré-fabricados que você pode usar em seu site. Há uma biblioteca de trechos gratuitos e profissionais que você pode acessar em seu site.

Você pode pré-visualizar o snippet e baixá-lo para usá-lo em seu site.

Você também pode instalar o plugin em seu site e você receberá trechos pré-fabricados, juntamente com uma opção para inseri-los automaticamente em sua página. Há também uma opção de shortcode que você pode usar para adicionar facilmente o botão em qualquer lugar que desejar em seu site.

Com o WPCode, você nunca mais terá que passar horas tentando descobrir como criar/adicionar novos elementos. Você pode encontrar rapidamente os snippets de código que precisa e adicioná-los ao seu site.

É tudo o que temos para você. Esperamos que este tutorial tenha ajudado você a adicionar um botão ao seu site. Se você está procurando adicionar um botão personalizado a um popup em seu site, então o OptinMonster é a ferramenta para você. Veja nossa Análise do OptinMonster para mais informações.

Em seguida, você também pode querer ver nossos outros guias úteis:

• Como Criar um Layout Personalizado no WordPress
• Como Personalizar um Site WordPress
• Como Rastrear Cliques em Links e Botões no WordPress

Estes tutoriais ajudarão você a personalizar seu site WordPress. O último ajudará a rastrear o desempenho dos seus botões.