Os botões podem parecer uma coisa pequena, mas podem fazer muito trabalho pesado em seu site. Os botões são uma das maneiras mais simples de orientar os visitantes para a ação que você deseja que eles realizem.
Desde direcionar as pessoas para a página do seu produto até solicitar que leiam mais ou se inscrevam, um botão de boa aparência pode fazer toda a diferença. A boa notícia é que você não precisa de habilidades de codificação para projetá-los.
O WordPress tem opções integradas e, com uma pequena ajuda de um plug-in de bloco, você pode ter ainda mais controle sobre a aparência dos seus botões.
Nesta postagem, mostrarei três métodos fáceis para criar botões elegantes no WordPress.
Começaremos com o editor padrão, passaremos para um plug-in que oferece mais flexibilidade e terminaremos com um método bônus para adicionar botões dentro de tabelas. Vamos começar.
Criar mesas bonitas
Com o Block Editor
Método 1: Usando o bloco de botões padrão
O WordPress tem um bloco de botões embutido que funciona bem na maioria dos casos. Você o encontrará no editor de blocos quando clicar no pequeno ícone (+) e procurar por "Buttons".
Quando o bloco de botões for inserido, ele lhe dirá para adicionar texto dentro do botão.
Depois de inserir o bloco, você pode adicionar um ou vários botões lado a lado. Cada botão pode ser personalizado diretamente na barra lateral direita. Você encontrará opções para:
- Largura do botão (total ou automático)
- Texto e cor de fundo
- Acolchoamento e alinhamento
- Raio da borda (para cantos arredondados)
É um bom ponto de partida, especialmente se você optar por um design minimalista. ⚠️Mas você atingirá rapidamente um limite se precisar de mais opções de estilo, como efeitos de foco, gradientes ou espaçamento responsivo.
🛠️ Dica profissional: Deseja um botão perfeitamente arredondado? Defina o raio da borda como 100 para um botão do tipo pílula.
Método 2: Usando o bloco de botões da Ultimate Blocks
Se você quiser mais controle sem escrever CSS, Blocos definitivos é um fantástico plug-in do Gutenberg para experimentar. Ele adiciona um Bloco de botões que é construído com a personalização em mente.
A instalação do Ultimate Blocks é uma tarefa fácil.
-
Navegue até Plugins
-
Clique em Add Plugins
-
Pesquisar por "Tableberg"
-
Clique em Instalar, então Ativar
Depois de instalar e ativar o Ultimate Blocks, adicione o bloco "Buttons (Ultimate Blocks)".
Para inserir os botões dos blocos Ultimate, clique no pequeno ícone (+) e procure por "Button (Improved)".
Você notará imediatamente a diferença quando adicionar o botão Ultimate Blocks. Veja o que você pode ajustar nas configurações do bloco:
-
Justificativa e orientação do botão
-
Tamanho do botão
-
Largura do botão
-
Suporte a ícones (antes ou depois do texto) com várias outras opções
-
Suporte à animação
Na seção Button Styles (Estilos de botão), você terá as seguintes personalizações:
-
Opção de cor para os estados Normal e Hover
-
Borda do botão
-
Estilo do botão
-
Acolchoamento, espaçamento de bloco e margem ajustáveis em Dimension Settings
-
Opção de CSS personalizado
Todas as funcionalidades padrão do bloco de botões estão incluídas no bloco Button da Ultimate Blocks. Abaixo está um botão personalizado projetado pela Ultimate Blocks, embora ele seja funcional.
Esse bloco é excelente para profissionais de marketing, blogueiros e qualquer pessoa que queira que seus botões de call-to-action se destaquem. Você obtém flexibilidade em nível de design sem escrever uma única linha de código.
🎯 Dica profissional: Use cores de foco contrastantes para criar uma resposta visual satisfatória quando os usuários interagirem com seus botões.
🧩 Bônus: Adicionando botões dentro de uma tabela
Às vezes, você precisa de botões dentro de um layoutcomo uma tabela de preços ou uma comparação de recursos. É aí que um plugin de tabela baseado em blocos, como o Tableberg brilha.
Melhor oferta |
||
 |
 |
 |
Apple AirPods Pro 2ª geração |
SAMSUNG Galaxy Buds 2 Pro |
Google Pixel Buds Pro |
|
|
|
Com o Tableberg, cada célula da tabela funciona como uma mini tela. Isso significa que você pode soltar o bloco de botões dedicado bem dentro de uma célula. Você não está mais preso ao texto simples - pode adicionar botões de CTA como "Comprar agora", "Ver detalhes" ou "Experimentar gratuitamente" diretamente nas linhas de preços.
Os recursos do botão do Tableberg são os mesmos do botão do Ultimate Blocks.
Deseja personalizar a aparência do botão dentro da tabela? Não tem problema. Você pode alterar o raio da borda, o preenchimento e até mesmo adicionar ícones, tudo no editor de blocos.
🛠️ Dica profissional: Combine seu botão com uma classificação por estrelas ou uma faixa de opções dentro da mesma linha para obter um impacto visual extra e melhores conversões.
Considerações finais!
A criação de botões bonitos no WordPress não requer CSS personalizado nem a ajuda de um desenvolvedor. Com o bloco nativo Buttons, a versão aprimorada do Ultimate Blocks e a flexibilidade de ferramentas como o Tableberg, você pode criar layouts totalmente interativos que têm ótima aparência e funcionam em todos os dispositivos.
Não há mais links simples ou códigos de acesso desatualizados. Agora você tem controle total, diretamente no editor.
Leia mais!
