Adicionando um botão no menu de navegação do cabeçalho

O menu de navegação do cabeçalho é o WordPress é uma parte muitas vezes não utilizada de imóveis do site. Enquanto a maioria dos gerenciadores da web o usa apenas para navegação, você também pode adicionar uma barra de pesquisa ou até mesmo conteúdo promocional. Mas, para fazer isso de forma eficaz, você deve considerar adicionar um botão no menu de navegação do cabeçalho . Neste artigo, detalharemos por que isso é benéfico e como fazê-lo corretamente.

O benefício de adicionar um botão no menu de navegação do cabeçalho

Ter um botão no menu de navegação do cabeçalho pode parecer uma coisa trivial. Afinal, não parece haver muita diferença entre um hiperlink padrão e um botão. Bem, na verdade, ter um botão em vez de texto simples pode gerar resultados surpreendentes . Isso se deve principalmente à forma como a atenção humana funciona e quão notáveis ​​são seus botões.

Como as pessoas geralmente experimentam o menu de navegação do cabeçalho

O menu de navegação do cabeçalho geralmente é a segunda coisa que as pessoas notam. Se você projetou bem o seu site e adicionou o menu de navegação corretamente, o título do seu post deve ser a primeira coisa que chama a atenção do espectador. Mas, depois disso, seu olhar deve naturalmente dirigir-se ao menu de navegação para ver o que está disponível. Se eles decidirem permanecer na página atual, que assim seja. Mas, se houver outros pontos de interesse em seu site, eles devem estar claramente visíveis no menu de navegação do cabeçalho.

Afinal, seu objetivo deve ser manter as pessoas o maior tempo possível em seu site . E ter um menu fácil de entender pode ser de grande ajuda. Então, onde os botões vêm em tudo isso?

A vantagem de adicionar um botão

A ideia principal de adicionar um botão é enfatizar algo importante. Embora o menu de cabeçalho contenha links interessantes, nem todos têm a mesma importância. Algumas são ferramentas de navegação simples para ajudar na leitura. E outros são conteúdos promocionais mais diretos, que servem para guiar seus leitores à conversão. Bem, quando se trata do último conteúdo, os botões devem ser sua escolha . Como você pode alterá-los da maneira que achar melhor, eles naturalmente se destacarão e chamarão a atenção. Portanto, se você entender a jornada do seu cliente pelo seu site, poderá usar botões facilmente para atraí-los para as mídias sociais ou para uma conversão bem-sucedida.

Dicas de personalização

Personalizar seus botões para ter o efeito adequado pode ser um pouco complicado. Por um lado, você não quer que eles se destaquem muito, pois arruinarão a aparência da página da web. Mas você também não quer que eles se misturem muito, pois não chamarão a atenção. Então, o que você precisa encontrar é o meio termo, que é mais fácil falar do que fazer. Nosso conselho é procurar sites que usem com sucesso os botões no menu de navegação do cabeçalho e ver como eles utilizam as cores. Lembre-se, você pode alterar a forma, o contorno, a fonte e a cor do seu botão. Portanto, use essa variedade na personalização a seu favor. Idealmente, você encontrará o estilo que combina bem com a estética geral do seu site . Ao mesmo tempo que chama a atenção.

Como adicionar um botão no menu de navegação do cabeçalho

Felizmente, adicionar um botão no menu de navegação do cabeçalho do WordPress é surpreendentemente simples. Em primeiro lugar, você precisa ir ao menu de navegação e adicionar o link que deseja converter em um botão. Você pode fazer isso na página Aparência -> Menu . Depois de fazer isso, clique no botão Opções de tela próximo ao topo. Ao fazer isso, você obterá um menu suspenso com algumas opções. Para este caso, você só precisa marcar a opção 'Classes CSS' .

Depois de ter passado por isso, role para baixo e clique em expandir o item de menu que você deseja converter em um botão. Lá você terá uma nova opção de classe CSS nas configurações do item. Nele, você pode inserir o nome da classe. Teoricamente, você pode nomear sua classe da maneira que achar melhor. Mas, para este artigo, daremos o nome da classe “menu-button” para facilitar o entendimento. Depois de inserir seu nome, lembre-se de clicar no botão 'Salvar menu' .

Adicionando código CSS

Depois de adicionar nossa classe CSS personalizada, podemos prosseguir para adicionar o código CSS. Aqui você precisa ir para Aparência -> Personalizar e iniciar o personalizador de temas do WordPress. Ao fazer isso, você terá uma prévia do seu site e uma lista de configurações de temas. O que você precisa fazer é clicar na guia CSS Adicional e expandi-la. Aqui você receberá uma caixa onde poderá adicionar seu código CSS personalizado. Para começar, sugerimos que você simplesmente cole o seguinte código:

.botão de menu {
cor de fundo:#eb5e28;
borda: 1px;
raio da borda: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 !importante;
}

Depois de adicionar o código CSS, o personalizador de temas o aplicará à visualização do seu site. Isso permitirá que você veja as alterações feitas. E não se preocupe, as mudanças não são permanentes. Se você sentir a necessidade, vá em frente e experimente CSS e veja o que você pode fazer. Para salvar suas alterações, clique no botão Publicar.

E com isso, você terminou de adicionar um botão no menu de navegação do cabeçalho.

Pensamentos finais

Considerando tudo, os botões podem ser um ótimo complemento para o seu menu de cabeçalho. Mas, é primordial que você encontre o design certo . Na verdade, uma das principais razões pelas quais as pessoas evitam adicionar um botão é que elas simplesmente não conseguem encaixar o botão no design do site. Se você ficar preso, sugerimos fortemente que você consulte um designer gráfico profissional e valorize sua contribuição. Como você pode ver, não é preciso muito para adicionar um botão, uma vez que você tenha o design descoberto.