Quando tentei adicionar um botão em meu cabeçalho do WordPress pela primeira vez, eu queria algo que se destacasse, uma chamada à ação clara, bem onde as pessoas a veriam primeiro.
Quer você esteja vinculando uma página de inscrição, um brinde ou um formulário de reserva, um botão no menu do WordPress pode orientar os visitantes exatamente para onde você quer que eles vão. Essa é uma das maneiras mais fáceis de aumentar os cliques sem alterar todo o design.
Neste tutorial, mostrarei a você como adicionar um botão nos menus de cabeçalho do WordPress, passo a passo.
Resumo rápido: Para adicionar um botão no cabeçalho do WordPress, você pode usar um construtor visual como o SeedProd para arrastar um bloco de botões diretamente para o layout de navegação. Para temas de blocos, você também pode usar o Full Site Editor para colocar um botão ao lado do menu, sem necessidade de plug-ins adicionais.
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.
Entretanto, transformar esse link importante em um botão no WordPress o tornará instantaneamente mais visível. Além de poder encontrá-lo mais facilmente, um botão no cabeçalho do WordPress melhorará a experiência do usuário e o envolvimento dos visitantes com o seu site WordPress.
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
Primeiro, mostraremos como adicionar um botão ao seu menu de cabeçalho usando um poderoso plug-in do WordPress chamado SeedProd. Recomendamos esse método primeiro porque ele oferece o máximo de opções de personalização e permite que você crie seu menu de cabeçalho do WordPrress visualmente com o recurso arrastar e soltar.
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.
O construtor de páginas de arrastar e soltar do SeedProd permite que você crie um cabeçalho, um rodapé ou uma barra lateral personalizados e insira um botão onde quer que faça sentido.
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 optin, galerias, controles deslizantes de antes e depois e muitos outros.
Portanto, siga as etapas abaixo para adicionar botões ao cabeçalho do WordPress com o SeedProd.
Etapa 1. Instalar e ativar o SeedProd
Em primeiro lugar, você precisará obter uma cópia do plug-in SeedProd e fazer o download em 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á até 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 novo 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 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
Como você deseja adicionar um botão ao cabeçalho, vamos editar o modelo Header. Role para baixo até encontrá-lo na lista e clique no link Edit Design (Editar design ).
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.
Ao observar 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 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. Portanto, vá em frente e clique no layout de 3 colunas.
Agora, passe o mouse sobre o ícone Move (Mover ) na seção duplicada e mova os blocos de imagem e de itens do menu de navegação para a nova seção.
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.
Para obter ainda mais opções de personalização, clique na guia Advanced settings (Configurações avançadas ). É aqui que você pode editar a cor e a tipografia do texto, alterar a cor do plano de fundo, adicionar uma sombra de caixa, raio de borda, espaçamento, classes CSS personalizadas e até mesmo ocultar o botão em dispositivos específicos.
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 deixe de clicar no botão Save (Salvar ).
Agora você pode continuar a personalizar o restante do 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ê.
Mostraremos como usar o editor de site completo padrão do WordPress para adicionar um botão ao menu do cabeçalho em seguida, sem um plug-in.
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 ).
Você verá as configurações do layout de navegação na barra lateral direita, mas primeiro clique no ícone de adição (+) 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 menu no lugar, clique novamente no ícone de adição (+) para adicionar um novo bloco do WordPress. Dessa vez, procure o bloco Button e adicione-o ao cabeçalho.
Agora, digite 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.
Nas opções da tela de bloco à direita, você pode personalizar o botão do menu do cabeçalho alterando as seguintes configurações:
- 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 inclui a funcionalidade do editor de sites, você pode seguir este guia para adicionar um botão ao menu usando o antigo personalizador de menus.
Pessoalmente, descobri que o construtor de arrastar e soltar do SeedProd é a maneira mais simples de fazer isso, especialmente se você quiser mais controle sem tocar no código.
Perguntas frequentes
Posso adicionar um botão ao meu menu do WordPress sem código?
Sim! Você pode usar o Full Site Editor (FSE) ou um construtor visual como o SeedProd para adicionar um bloco de botões diretamente ao cabeçalho, sem necessidade de codificação.
Como faço para destacar um link em minha navegação do WordPress?
A melhor maneira é transformá-lo em um botão estilizado usando o SeedProd ou o bloco de botões do WordPress. Isso chama a atenção e melhora a experiência do usuário do seu site.
Espero 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.
