Do you want to learn how to add a button to your WordPress header menus?
Adding a button in your WordPress header navigation menu lets you make a more eye-catching call to action. This approach not only draws attention but also enhances the navigation menu, helping visitors understand where to click next. It’s a simple way to test new features that could improve user engagement on your site.
Neste artigo, explicaremos passo a passo como adicionar um botão nos menus de cabeçalho do WordPress.
Por que adicionar um botão ao menu do cabeçalho do WordPress?
Os menus de navegação em sites do WordPress geralmente são links de texto com aparência semelhante. Dessa forma, cada item do menu tem a mesma importância, peso e urgência.
Se você adicionasse um URL a um formulário de pedido importante ou a uma página de registro, ele teria a mesma aparência dos outros links do seu menu. Ele não se destacará nem parecerá urgente o suficiente para que os usuários cliquem primeiro.
However, turning that important link into a button in WordPress will instantly make it more noticeable. Besides being able to find it more easily, a button in your WordPress header will improve visitors’ user experience and engagement with your WordPress website.
Apesar de ter blocos de botões para posts e páginas, o WordPress atualmente não oferece botões de menu por padrão. Felizmente, há algumas maneiras de adicionar botões ao seu menu, e elas são relativamente fáceis de implementar.
Com isso em mente, vamos dar uma olhada em duas maneiras de adicionar um botão nos menus de cabeçalho do WordPress sem escrever código HTML ou CSS.
Como adicionar um botão no menu do cabeçalho do WordPress com o SeedProd
First, we’ll show you how to add a button to your header menu using a powerful WordPress plugin called SeedProd. We recommend this method first because it offers the most customization options and lets you build your WordPrress header menu visually with drag-and-drop.
O SeedProd é um dos principais criadores de páginas de destino e sites para WordPress. Ele permite que você crie temas para WordPress, páginas de destino e sites completos flexíveis e compatíveis com SEO sem contratar um desenvolvedor ou adicionar códigos de acesso ao seu site.
Com o construtor de páginas de arrastar e soltar, você também pode criar um cabeçalho, rodapé ou barra lateral personalizados para o seu site e adicionar facilmente botões de cabeçalho com o bloco Button. Além disso, há inúmeros outros blocos do WordPress que você pode usar, inclusive widgets do WordPress, cronômetros de contagem regressiva, formulários de opt-in, galerias, controles deslizantes de antes e depois e muito mais.
Portanto, siga as etapas abaixo para adicionar botões ao cabeçalho do WordPress com o SeedProd.
Etapa 1. Instalar e ativar o SeedProd
Antes de mais nada, você precisará obter uma cópia do plug-in SeedProd e fazer o download para o seu computador. Usaremos o SeedProd Pro para este 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 plug-in. Também é uma boa ideia copiar sua chave de licença nesta etapa, pois você precisará dela em breve.
Depois de fazer o download do plug-in, vá para o painel do WordPress e carregue os arquivos do plug-in. Você sempre pode seguir este guia sobre como instalar e ativar um plug-in do WordPress se precisar de ajuda.
Depois de fazer isso, vá até a página SeedProd " Settings e cole sua chave de licença.
A partir daí, clique no botão Verify Key para desbloquear seus recursos Pro.
Etapa 2. Escolha um modelo predefinido
Com a chave de licença ativa, agora você pode decidir qual layout deseja criar com o SeedProd. Há duas abordagens diferentes que você pode adotar, que são as seguintes:
- Tema do WordPress: crie um tema personalizado do WordPress para substituir o design atual do seu site por um modelo de cabeçalho personalizado.(não é necessário código).
- Landing Page: crie uma única página e adicione um cabeçalho personalizado somente a essa página, mantendo o tema existente.
Neste guia, vamos orientá-lo na opção 1, pois ela substituirá o menu de navegação em todo o seu site. Mas se preferir a opção 2, você pode seguir este guia para criar uma página de destino 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 Themes (Temas ).
Isso abrirá uma biblioteca de kits de sites predefinidos que você pode importar com um único clique.
Você pode filtrar os modelos por WooCommerce, popularidade, do mais recente ao mais antigo e vice-versa. Quando você encontrar um tema de que goste, clique no ícone de marcação para iniciá-lo.
Quando a importação do tema for concluída, você verá automaticamente uma página como esta:
Ele inclui uma lista dos modelos que compõem o seu tema do WordPress, e você pode editar cada um deles com o construtor visual de arrastar e soltar do SeedProd.
Etapa 3. Personalize seu cabeçalho
Since you want to add a button to your header, let’s go ahead and edit the Header template. Scroll down until you find it in the list, then click the Edit Design link.
Ao abrir o modelo de cabeçalho, você verá um layout de 2 colunas como este:
Como você pode ver, há vários blocos do WordPress à esquerda e uma visualização 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.
When you look at the current header layout, you’ll see a column with an Image block and a column with the WordPress Menu block.
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 de cabeçalho até que ela tenha um contorno roxo e, em seguida, clique no ícone Duplicar seção.
Isso adicionará uma cópia de seu cabeçalho abaixo do primeiro.
Em seguida, passe o mouse sobre a coluna na primeira seção até que ela tenha um contorno azul e, em seguida, clique no ícone da Lixeira para excluí-la.
Agora você terá uma seção vazia com a opção de escolher um novo layout de coluna. Então, vá em frente e clique no layout de 3 colunas.
Now you can hover over the Move icon on your duplicated section and move the image and nav menu items blocks into your new section.
Isso deixará uma coluna vazia na qual você poderá adicionar um bloco de botões.
Antes de ir para a próxima etapa, certifique-se de excluir a seção de cabeçalho antiga clicando no ícone da Lixeira.
Agora você está pronto para criar um botão para o menu de cabeçalho do WordPress.
Etapa 4. Adicione um botão ao cabeçalho
Adicionar um botão ao seu cabeçalho com o SeedProd é fácil. Basta localizar o bloco Button na barra lateral esquerda e arrastá-lo para a coluna vazia em sua área de cabeçalho.
Quando o botão estiver no lugar, você poderá 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é mesmo adicionar ícones personalizados antes e depois do texto do botão, escolhendo na biblioteca de ícones do Font Awesome.
For even more customization options, click the Advanced settings tab. This is where you can edit the text color and typography, change the background color, add a box shadow, border radius, spacing, custom CSS classes, and even hide the button on specific devices.
Além disso, a opção Animação é uma maneira fantástica de fazer com que seu botão se destaque mais.
Quando estiver satisfeito com a aparência do botão de menu, não se esqueça de clicar no botão Save (Salvar ).
Agora você pode continuar a personalizar o restante do seu tema do WordPress. Por exemplo, você pode editar a página do blog, os modelos de página única e a barra lateral ou alterar o rodapé do WordPress.
Etapa 5. Publique suas alterações
Depois de personalizar o restante de seu site, a última etapa é tornar essas alterações efetivas. Para fazer isso, primeiro volte para a página do SeedProd " Theme Builder.
Em seguida, localize o botão de alternância Enable SeedProd Theme (Ativar tema SeedProd ) no canto superior direito e coloque-o na posição Yes (Sim).
Muito bom! Agora você pode visualizar seu tema do WordPress e ver seu botão de cabeçalho em ação.
Como adicionar um botão ao menu do cabeçalho do WordPress sem um plug-in
Algumas pessoas não precisam de toda a flexibilidade e das opções de personalização de um construtor de páginas, e outras preferem limitar a adição de mais plug-ins do WordPress ao site. Se você se enquadra em qualquer uma dessas categorias, o método a seguir é para você.
We’ll show you how to use the default WordPress full site editor to add a button to your header menu next without a plugin.
Primeiro, vá para Appearance " Editor no painel do WordPress. Isso abrirá o editor de site completo do WordPress, que usa blocos para criar 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 cabeçalho do WordPress. No editor, clique no cabeçalho Navigation (Navegação ).
You’ll see the navigation layout settings in the right sidebar, but first, click the (+) plus icon to start adding your menu items.
You can click and search for any page to add it to your menu in WordPress.
Com os links do menu no lugar, clique no ícone de adição (+) novamente para adicionar um novo bloco do WordPress. Dessa vez, procure o bloco Button e adicione-o ao 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. Em nosso caso, adicionaremos um link para nosso relatório gratuito.
In the block screen options on the right, you can customize your header menu button by changing the following settings:
- Estilo de botão de preenchimento ou contorno
- Porcentagem da largura
- Texto e cor de fundo
- Tamanho da tipografia
- Acolchoamento
- Raio da borda
- CSS adicional e nome da classe
- E mais.
Quando terminar de personalizar o botão, clique no botão Salvar menu no canto superior direito.
Agora, qualquer página que use a parte do modelo Header mostrará o botão de menu e os links de navegação.
Se estiver usando um tema que não inclua a funcionalidade do editor de sites, você poderá seguir este guia para adicionar um botão ao menu usando o antigo personalizador de menus.
No entanto, a melhor e mais fácil solução é usar o construtor de páginas de arrastar e soltar do SeedProd.
É isso aí!
Esperamos que este tutorial sobre como adicionar um botão nos menus de cabeçalho do WordPress tenha sido útil para você. Você também pode gostar dos seguintes tutoriais para personalizar seu site WordPress:
- Como adicionar horários comerciais ao WordPress
- Como criar facilmente uma caixa de luz de imagem no WordPress
- Como escurecer uma imagem de fundo no WordPress sem CSS
Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, fique à vontade para deixar um comentário com perguntas e feedback.
Você também pode nos seguir no YouTube, no X (antigo Twitter) e no Facebook para obter mais conteúdo útil para expandir seus negócios.
