Como Adicionar um Botão ao Cabeçalho do Seu WordPress (3 Maneiras) 

Quando tentei adicionar um botão ao meu cabeçalho do WordPress pela primeira vez, eu queria algo que se destacasse, um call to action claro onde as pessoas o veriam primeiro.

Se você está vinculando a uma página de inscrição, um brinde ou um formulário de reserva, um botão no seu menu do WordPress pode guiar os visitantes exatamente para onde você deseja que eles vão. Nos meus testes, adicionar um botão a um cabeçalho do WordPress com SeedProd leva menos de 5 minutos e não requer mexer nos arquivos do seu tema.

Neste tutorial, mostrarei como adicionar um botão ao seu cabeçalho do WordPress de 3 maneiras diferentes, passo a passo.

Por que Adicionar um Botão ao Menu do Cabeçalho do Seu WordPress?

Os menus de navegação em sites WordPress são tipicamente links de texto que parecem todos iguais. Como tal, cada item do menu tem a mesma importância, peso e urgência.

Se você fosse adicionar um URL a um formulário de pedido importante, ou a uma página de registro, ele pareceria o mesmo que os outros links no seu menu. Ele não se destacaria nem pareceria urgente o suficiente para os usuários clicarem primeiro.

No entanto, transformar esse link importante em um botão no WordPress o tornará instantaneamente mais perceptível. Um botão no seu cabeçalho do WordPress melhorará a experiência do usuário e o engajamento dos visitantes com o seu site WordPress.

Apesar de ter blocos de botão para posts e páginas, o WordPress não oferece botões de menu por padrão atualmente. Felizmente, existem algumas maneiras de adicionar botões ao seu menu, e eles são relativamente fáceis de implementar.

Com isso em mente, vamos ver 3 maneiras de adicionar um botão ao seu menu de cabeçalho do WordPress.

SeedProd é a melhor opção se você deseja controle visual e planeja personalizar todo o layout do seu cabeçalho. O método de classe CSS funciona com qualquer tema clássico e leva cerca de 3 minutos se você se sentir confortável em colar CSS. O Editor Completo do Site do WordPress é integrado aos temas de blocos e não requer plugins adicionais.

Como Adicionar um Botão a um Cabeçalho do WordPress com SeedProd?

Com o SeedProd, você pode adicionar um botão de call-to-action estilizado ao seu cabeçalho do WordPress em cerca de 5 minutos, arrastando um bloco de Botão para o seu modelo de cabeçalho, sem necessidade de código.

Recomendamos este método primeiro porque ele oferece as opções de personalização mais avançadas e permite que você crie seu menu de cabeçalho do WordPress visualmente com arrastar e soltar.

SeedProd é um dos melhores construtores de landing pages e construtores de sites para WordPress. Ele permite que você crie temas flexíveis e otimizados para SEO para WordPress, landing pages e sites completos sem contratar um desenvolvedor ou adicionar shortcodes ao seu site.

O construtor de arrastar e soltar do SeedProd permite que você crie um cabeçalho, rodapé ou barra lateral personalizados e insira um botão onde fizer sentido.

Você também pode adicionar contadores regressivos, formulários de inscrição, galerias e sliders de antes e depois ao mesmo layout de cabeçalho.

Portanto, siga as etapas abaixo para adicionar botões ao seu cabeçalho do WordPress com o SeedProd.

Passo 1. Instale e Ative o SeedProd

Primeiro de tudo, você precisará obter uma cópia do plugin SeedProd e baixá-lo para o seu computador. Usaremos o SeedProd Pro neste tutorial porque ele inclui o recurso Theme Builder.

No painel da sua conta, você verá um grande botão de download para salvar o arquivo .zip do plugin. Também é uma boa ideia copiar sua chave de licença nesta etapa, pois você precisará dela em breve.

Após baixar o plugin, vá para o seu painel do WordPress e carregue os arquivos do plugin. Você sempre pode seguir este guia sobre como instalar e ativar um plugin do WordPress se precisar de ajuda.

Depois de fazer isso, vá para a página SeedProd » Configurações e cole sua chave de licença.

A partir daí, clique no botão Verificar Chave para desbloquear seus recursos Pro.

Passo 2. Escolha um Modelo Pré-fabricado

Com sua chave de licença ativa, você agora pode decidir qual layout deseja criar com o SeedProd. Existem 2 abordagens diferentes que você pode seguir, que são as seguintes:

• Tema WordPress: crie um tema WordPress personalizado para substituir o design atual do seu site por um modelo de cabeçalho personalizado. (sem necessidade de código).
• Landing Page: crie uma única página e adicione um cabeçalho personalizado apenas para essa página, mantendo seu tema existente.

Para este guia, vamos guiá-lo pela opção 1 porque ela substituirá o menu de navegação em todo o seu site. Mas se você preferir a opção 2, pode seguir este guia para criar uma landing page no WordPress e, em seguida, retornar a este tutorial a partir da etapa 4.

Como estamos escolhendo a opção de tema do WordPress, você precisará ir para SeedProd » Theme Builder e clicar no botão Temas.

Isso exibirá uma biblioteca de kits de sites pré-fabricados que você pode importar com um único clique.

Você pode filtrar os modelos por WooCommerce, popularidade, do mais novo para o mais antigo e vice-versa. Quando encontrar um tema que goste, vá em frente e clique no ícone de tique para ativá-lo.

Assim que seu tema terminar de importar, você verá automaticamente uma página como esta:

Ele inclui uma lista dos modelos que compõem seu tema WordPress, e você pode editar cada um com o construtor visual de arrastar e soltar do SeedProd.

Passo 3. Personalize Seu Cabeçalho

Como você quer adicionar um botão ao seu cabeçalho, vamos editar o modelo Cabeçalho. Role para baixo até encontrá-lo na lista e clique no link Editar Design.

Adicionar um botão ao seu cabeçalho com o SeedProd é fácil. Encontre o bloco Botão na barra lateral esquerda e arraste-o para a coluna vazia na área do seu cabeçalho.

Como você pode ver, existem vários blocos do WordPress à esquerda e uma prévia do seu design à direita. Você poderá clicar em qualquer lugar do seu design para alterar o conteúdo e arrastar blocos do painel esquerdo para adicionar mais recursos à sua página.

Ao olhar o layout atual do cabeçalho, você verá uma coluna com um bloco de Imagem e uma coluna com o bloco de Menu do WordPress.

Para adicionar um botão ao cabeçalho, você precisará adicionar uma terceira coluna, o que mostraremos como fazer agora.

Primeiro, passe o mouse sobre a seção do seu cabeçalho até que ela tenha um contorno roxo e, em seguida, clique no ícone Duplicar Seção.

Isso adicionará uma cópia do seu cabeçalho abaixo do primeiro.

Em seguida, passe o mouse sobre a coluna na sua primeira seção até que ela tenha um contorno azul e, em seguida, clique no ícone Lixeira para excluí-la.

Agora você terá uma seção vazia com a opção de escolher um novo layout de coluna. Clique no layout de 3 colunas.

Agora você pode passar o mouse sobre o ícone Mover na sua seção duplicada e mover os blocos de imagem e menu de navegação para sua nova seção.

Isso deixará uma coluna vazia onde você pode adicionar um bloco de Botão.

Antes de ir para a próxima etapa, certifique-se de excluir a seção antiga do cabeçalho clicando no ícone Lixeira.

Agora você está pronto para criar um botão para o seu menu de cabeçalho do WordPress.

Passo 4. Adicione um Botão ao Seu Cabeçalho

Adicionar um botão ao seu cabeçalho com o SeedProd é fácil. Encontre o bloco Botão na barra lateral esquerda e arraste-o para a coluna vazia na área do seu cabeçalho.

Assim que o botão estiver no lugar, você pode clicar nele para personalizar o texto do link do botão, o subtexto do botão, o link, o alinhamento no celular e no desktop, e o tamanho do botão.

Você pode até adicionar ícones personalizados antes e depois do texto do botão escolhendo na biblioteca de ícones do Font Awesome.

Para ainda mais opções de personalização, clique na aba de configurações Avançado. É aqui que você pode editar a cor do texto e a tipografia, alterar a cor de fundo, adicionar uma sombra de caixa, raio da borda, espaçamento, classes CSS personalizadas e até ocultar o botão em dispositivos específicos.

Além disso, a opção Animação é uma maneira fantástica de fazer seu botão se destacar mais.

Na aba Avançado, o controle deslizante Ocultar no Celular controla se o botão aparece na sua navegação móvel. Por padrão, ele é exibido em todos os dispositivos.

Quando estiver satisfeito com a aparência do seu botão de menu, certifique-se de clicar no botão Salvar.

Agora você pode continuar personalizando o restante do seu tema do WordPress. Por exemplo, você pode editar a página do seu blog, modelos de página única e barra lateral ou alterar o rodapé do seu WordPress.

Passo 5. Publique Suas Alterações

Depois de personalizar o restante do seu site, o último passo é tornar essas alterações públicas. Para fazer isso, primeiro volte para a página SeedProd » Theme Builder.

Em seguida, encontre o seletor Enable SeedProd Theme no canto superior direito e mude-o para a posição Sim.

Agora você pode visualizar seu tema WordPress e ver seu botão de cabeçalho em ação.

Como Adicionar um Botão de Cabeçalho do WordPress Usando uma Classe CSS

O método de classe CSS funciona com qualquer tema WordPress clássico e não requer um plugin. Eu usei essa abordagem quando um construtor visual completo não era necessário.

Primeiro, vá para Aparência » Menus no seu painel do WordPress. Selecione o menu que deseja editar no menu suspenso na parte superior da tela.

Em seguida, clique na aba Opções de Tela no canto superior direito da tela. Marque a caixa ao lado de Classes CSS. Isso adiciona um novo campo a cada item do menu.

Agora expanda o item do menu que você deseja estilizar como um botão. Digite um nome de classe no campo Classes CSS. Eu uso header-button, mas qualquer nome funciona, desde que não tenha espaços. Clique em Salvar Menu quando terminar.

Agora você precisa adicionar CSS que transforme essa classe em um botão. A maneira mais fácil é através do WPCode, que permite adicionar trechos de código sem editar seus arquivos de tema diretamente. Vá para Code Snippets » Add Snippet, escolha CSS como o tipo de snippet e cole isto:

li.header-button > a {
    display: inline-block !important;
    background-color: #0073aa !important;
    color: #ffffff !important;
    padding: 12px 28px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    line-height: normal !important;
}
li.header-button > a:hover {
    background-color: #005177 !important;
    color: #ffffff !important;
}

Salve e ative o snippet. Seu item de menu agora será exibido como um botão estilizado no cabeçalho do seu WordPress.

Altere background-color para corresponder às cores da sua marca. Ajuste os valores de padding para controlar o tamanho do botão. Se preferir não instalar o WPCode, o mesmo CSS funciona em Aparência » Personalizar » CSS Adicional.

Lembre-se que essa abordagem só funciona com temas WordPress clássicos que usam Aparência » Menus. Se o seu site usa um tema de bloco com o Editor de Site Completo, use o método na próxima seção.

Como Adicionar um Botão de Cabeçalho do WordPress Sem um Plugin?

Se o seu tema WordPress usa o Editor de Site Completo, você pode adicionar um botão de cabeçalho sem nenhum plugin. Este método funciona apenas com temas de bloco.

Primeiro, vá para Aparência » Editor no seu painel do WordPress. Isso abrirá o Editor de Site Completo do WordPress, que usa blocos para construir seu site.

Em seguida, abra a barra lateral, clique no título Partes do Modelo e selecione a opção Cabeçalho no lado direito.

Depois de fazer isso, você verá um layout visual do seu cabeçalho WordPress. Dentro do editor, clique no título Navegação.

Você verá as configurações de layout de navegação na barra lateral direita, mas primeiro, clique no ícone (+) de mais para começar a adicionar seus itens de menu.

Você pode clicar e pesquisar qualquer página para adicioná-la ao seu menu no WordPress.

Com os links do seu menu no lugar, clique no ícone (+) de mais novamente para adicionar um novo bloco do WordPress. Desta vez, pesquise pelo bloco Botão e adicione-o ao seu cabeçalho.

Agora insira o texto do botão e clique no ícone de link para adicionar o link no qual você deseja que os visitantes cliquem. No nosso caso, adicionaremos um link para nosso relatório gratuito.

Nas opções de tela do bloco à direita, você pode personalizar o botão do seu menu de cabeçalho alterando as seguintes configurações:

• Estilo do botão preenchido ou contornado
• Porcentagem de largura
• Cor do texto e do plano de fundo
• Tamanho da tipografia
• Preenchimento
• Raio da borda
• CSS adicional e nome da classe
• E mais.

O botão aparecerá no seu cabeçalho, tanto no desktop quanto no mobile. Dentro do bloco de navegação, você também pode controlar como ele é exibido quando o menu é recolhido em telas menores.

Quando terminar de personalizar seu botão, clique no botão do menu Salvar no canto superior direito.

Agora, qualquer página que use a parte do modelo de Cabeçalho mostrará seu botão de menu e links de navegação.

Se você estiver usando um tema que não inclui funcionalidade para o editor de sites, pode seguir este guia sobre adicionar um botão ao seu menu usando o personalizador de menu mais antigo.

Pessoalmente, achei o construtor de arrastar e soltar do SeedProd a maneira mais simples de fazer isso, especialmente se você quiser mais controle sem mexer no código.

Perguntas Frequentes

Como adiciono um botão ao cabeçalho no WordPress?

Você tem três opções: usar o SeedProd para arrastar um bloco de Botão para o seu modelo de cabeçalho visualmente, usar o Editor de Site Completo do WordPress para adicionar um bloco de Botão dentro do seu bloco de Navegação se você tiver um tema de blocos, ou atribuir uma classe CSS a um item de menu e estilizar como um botão com uma regra CSS curta. O SeedProd é a opção mais rápida se você quiser controle de estilo sem escrever código.

Como faço meu botão de cabeçalho aparecer no mobile?

No SeedProd, abra as configurações do bloco Botão e vá para a aba Avançado. A opção Ocultar no Mobile está desativada por padrão, o que significa que seu botão aparece em todos os dispositivos. No Editor de Site Completo do WordPress, o botão herda o comportamento responsivo do bloco de Navegação, então ele é recolhido com seu menu no mobile, a menos que você o configure separadamente.

Posso adicionar vários botões ao meu cabeçalho do WordPress?

Sim. Com o SeedProd, você pode arrastar vários blocos de Botão para o seu modelo de cabeçalho e estilizar cada um de forma diferente. No Editor de Site Completo, você pode adicionar mais de um bloco de Botão dentro do bloco de Navegação. Para o método de classe CSS, atribua nomes de classe diferentes a itens de menu diferentes e estilize cada classe separadamente.

Adicionar um botão de cabeçalho funciona com qualquer tema do WordPress?

Depende do método. O SeedProd substitui completamente o cabeçalho do seu tema, então funciona independentemente do seu tema atual. O método de classe CSS funciona com temas clássicos que usam Aparência » Menus. O método do Editor de Site Completo requer um tema de blocos. Se você não tem certeza de qual tipo de tema você tem, vá para Aparência no seu painel do WordPress. Se você vir uma opção de Editor, você tem um tema de blocos.

Espero que você tenha achado este tutorial sobre como adicionar um botão nos menus de cabeçalho do WordPress útil. Você também pode gostar dos seguintes tutoriais para personalizar seu site WordPress:

• Como Adicionar Horário de Funcionamento ao WordPress
• Como Criar Facilmente um Lightbox de Imagem no WordPress
• Como escurecer uma imagem de fundo no WordPress sem CSS

Obrigado por ler! Adoraríamos saber sua opinião, então sinta-se à vontade para participar da conversa no YouTube, X e Facebook para mais conselhos e conteúdo úteis para expandir seus negócios.