Como Adicionar um Botão no Menu de Cabeçalho do Seu WordPress

Adicionar um botão ao menu de navegação principal permite que você destaque a chamada para ação do seu site, direcionando mais tráfego para suas páginas mais importantes. É também uma maneira fácil de adicionar o mesmo botão a todas as páginas e posts.

Vimos como o WPForms, uma de nossas marcas parceiras, adicionou um botão “Obter WPForms” diretamente no cabeçalho do WordPress. Essa adição simples ajudou a aumentar as conversões e impulsionar as vendas.

Ao colocar o botão em um local de destaque, o WPForms facilitou a ação dos visitantes, resultando em melhor engajamento e mais leads.

Neste artigo, mostraremos como adicionar facilmente um botão ao menu do cabeçalho do seu WordPress.

Por que adicionar um botão no menu do cabeçalho do WordPress?

Os menus de navegação do WordPress são tipicamente links de texto simples, onde tudo parece igual e nada realmente se destaca.

No entanto, alguns links são mais importantes do que outros. Por exemplo, você pode querer adicionar um link para um formulário de pedido online ou para a página de registro do site de associação do seu WordPress.

Por padrão, esses links importantes parecem iguais aos outros links do menu do cabeçalho.

Você pode tornar esses links mais chamativos transformando-os em botões. Isso pode gerar mais cliques e conversões.

Por padrão, você pode adicionar botões em posts e páginas do WordPress usando o bloco de Botões, mas você não pode adicioná-los a menus de navegação.

Dito isso, vamos ver como você pode adicionar um botão ao seu menu de cabeçalho do WordPress.

Adicionando um Botão ao seu Menu de Cabeçalho do WordPress

Para começar, você precisa adicionar o link que deseja transformar em um botão.

Simplesmente vá para a página Aparência » Menus no seu painel do WordPress e adicione o link ao seu menu de navegação. Para instruções detalhadas, consulte nosso guia sobre como adicionar um menu de navegação no WordPress.

Depois disso, você deve clicar no botão Opções de Tela na parte superior da tela.

Isso revelará um painel com muitas novas opções. Simplesmente marque a caixa ao lado de 'Classes CSS'.

Agora, clique para expandir o item do menu que você deseja transformar em um botão.

Você notará uma nova opção de classe CSS onde você pode digitar um nome de classe. Você pode chamar a classe CSS como quiser, mas neste guia, usaremos menu-button.

Após digitar um nome, clique no botão 'Salvar Menu' para armazenar suas alterações.

Agora você adicionou uma classe CSS personalizada ao item do menu. Você pode alterar sua aparência usando código CSS personalizado. Você pode adicionar este código através do personalizador integrado do WordPress ou usando um plugin de snippets de código.

Adicione um Botão ao seu Menu de Cabeçalho do WordPress Usando WPCode (Recomendado)

A melhor maneira de adicionar código personalizado ao WordPress é usando WPCode. É o melhor plugin de snippets de código que permite adicionar CSS personalizado, PHP, HTML e muito mais.

Como você não está editando os arquivos do tema diretamente, pode evitar muitos erros comuns do WordPress. Você também pode atualizar seu tema ou mudar para um tema completamente diferente sem perder seu código personalizado.

Se você quiser remover o botão a qualquer momento, poderá desativá-lo com um único clique.

Primeiro, você precisará instalar e ativar o plugin gratuito WPCode. Para mais informações, consulte nosso guia passo a passo sobre como instalar um plugin do WordPress.

Assim que o plugin for ativado, visite a página Code Snippets » + Add Snippet no painel do WordPress.

Aqui, você verá todos os trechos de código WPCode prontos que você pode adicionar ao seu site. Estes incluem um trecho que permite que você desative completamente os comentários, carregue tipos de arquivo que o WordPress normalmente não suporta, desative páginas de anexo, e muito mais.

Agora, basta passar o mouse sobre a opção ‘Add Your Custom Code (New Snippet)’ e clicar no botão ‘+ Add Custom Snippet’ quando ele aparecer.

Em seguida, você precisa selecionar ‘CSS Snippet’ como o tipo de código na lista de opções que aparecem na tela.

Na tela seguinte, você precisa digitar um título para o trecho de código.

O nome é apenas para sua referência, então você pode usar o que quiser.

Com isso feito, você está pronto para colar um trecho de código CSS na caixa ‘Code Preview’:

.menu-button {
background-color:#eb5e28;
border:1px;
border-radius:3px;
-webkit-box-shadow:1px 1px 0px 0px #2f2f2f;
-moz-box-shadow:1px 1px 0px 0px #2f2f2f;
box-shadow:1px 1px 0px 0px #2f2f2f;
}
.menu-button a,  .menu-button a:hover, .menu-button a:active {
color:#fff !important;
}

Ao adicionar o trecho de código acima, certifique-se de substituir menu-button pelo nome da sua classe CSS.

O trecho de código acima cria um botão laranja com um efeito de sombra, como você pode ver na imagem a seguir.

Sinta-se à vontade para experimentar o trecho de CSS para ver quais efeitos diferentes você pode criar. Por exemplo, você pode alterar a cor de fundo, a cor do texto do link, adicionar uma borda e muito mais.

Se você quiser usar uma cor diferente, precisará saber o código hexadecimal dessa cor. Se não tiver certeza de quais códigos usar, pode usar um recurso como o Color Hex.

Quando estiver satisfeito com o código, clique no alternador 'Inativo' para que ele mude para 'Ativo' e, em seguida, clique no botão 'Salvar Snippet'.

Agora, se você visitar seu site WordPress, verá o novo botão do menu de cabeçalho em ação.

Adicionar um Botão no Menu do Cabeçalho do Seu WordPress Usando o Personalizador

Se você não quiser usar um plugin, então pode adicionar código usando o personalizador integrado.

Simplesmente vá para Aparência » Personalizar, e você verá uma prévia do seu site à direita, além de várias configurações do tema na coluna da esquerda.

Para começar, clique na opção ‘CSS Adicional’.

Agora você verá uma caixa onde pode adicionar código CSS personalizado.

Mais uma vez, você pode usar o trecho de código acima como ponto de partida.

Quando estiver satisfeito com a aparência do botão, clique em ‘Publicar’ para tornar suas alterações visíveis.

Tutorial em Vídeo

Se você aprende melhor visualmente, confira nosso tutorial em vídeo sobre como adicionar um botão no menu do cabeçalho do seu WordPress:

Bônus: Adicionar um Botão Clique para Ligar no Cabeçalho do WordPress

Se você tem um site de pequena empresa, então você também pode querer adicionar um botão de clique para ligar no seu menu de navegação. Isso facilitará o contato dos visitantes com você e pode até mesmo melhorar suas classificações nos mecanismos de busca, tornando seu site mais amigável para SEO.

Para adicionar este botão, visite a página Aparência » Menus no painel do WordPress e expanda a aba ‘Links Personalizados’ à direita.

Aqui, adicione seu número de telefone VOIP no URL e adicione um rótulo para ele. Depois disso, clique no botão ‘Adicionar ao Menu’.

Uma vez que o botão de clique para ligar tenha sido adicionado à sua lista de links de navegação, não se esqueça de clicar no botão ‘Salvar Menu’ para armazenar suas configurações.

Para instruções detalhadas, você pode gostar de ver nosso tutorial sobre como adicionar um botão de clique para ligar no WordPress.

Esperamos que este artigo tenha ajudado você a aprender como adicionar um botão ao menu do cabeçalho do seu WordPress. Você também pode conferir nosso guia sobre como criar um menu de navegação flutuante fixo no WordPress e nosso tutorial sobre como adicionar lógica condicional a menus no WordPress.

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