O senhor deseja oferecer aos futuros visitantes de seu website um menu de navegação perfeito? Parabéns! O senhor está no lugar certo, porque lhe oferecerei todas as dicas, ferramentas e passos a seguir para obter o resultado certo para suas necessidades. Na verdade, o menu de um website é um elemento muito importante para os visitantes, e contribui para uma boa experiência do usuário. E por bons motivos, o menu permite que o senhor tenha uma visão global, assim como todas as seções do site. É, portanto, um elemento que permite aos usuários da Internet determinar se vão ou não continuar sua visita. O senhor deve, portanto, oferecer um cardápio impecável. Para que o senhor possa fazer isso, acrescentei um vídeo a este artigo que lhe mostra visualmente os passos aqui descritos.
Criação de um menu no WordPress
Neste vídeo
, mostro-lhe como criar um menu em WordPress, usando o tema Avada:O menu: Uma ferramenta essencial para a navegação
O menu de um website ou a barra de navegação é o elemento que permite ao senhor navegar facilmente pelas páginas de um website, mesmo que ele seja muito denso. Se o senhor der uma olhada no topo deste artigo, verá os seguintes títulos:
- TWAINO: Esta página o redireciona automaticamente para a página inicial;
- SEO AGENCY : Apresentação da minha Agência SEO Twaino ;
- SERVIÇOS : Esta página apresenta meus diferentes serviços;
- FORMAÇÕES: Nesta seção, mostro aos visitantes os treinamentos que ofereço;
- BLOG: Esta página inclui todos os meus artigos e vídeos;
- AUDITORIA LIVRE: Isso o leva a um formulário.
Como o senhor pode ver, um simples clique em uma dessas seções o levará automaticamente à sua página, de modo que é uma navegação simples e eficiente que os visitantes apreciarão. Esse é exatamente o papel principal do menu ou da barra de navegação em um website.
Onde é o melhor lugar para posicionar seu cardápio?
Sempre colocado no mesmo lugar de uma página a outra, o menu de navegação é geralmente colocado em dois lugares:
- Horizontalmente, no topo da página;
- Verticalmente à esquerda da página.
Esse arranjo lhe dá o privilégio de estar sempre visível e de ser rapidamente acessível, qualquer que seja o tamanho da janela do navegador. Pode-se dizer, portanto, que a localização do menu desta maneira se tornou a norma, e facilita a viagem do usuário.
Observe, porém, que a ementa também pode ser disposta verticalmente à direita. Mas recomendo-lhe vivamente que não escolha essa opção, pois os usuários já se acostumaram aos dois layouts anteriores, sobretudo ao primeiro. Mostrar originalidade não será necessariamente uma coisa positiva, na medida em que só os confundirá e os fará fugir.
Por outro lado, às vezes é útil inserir áreas de navegação que são independentes do menu principal de navegação. Na verdade, essas áreas podem ser específicas a certas páginas e oferecer aos usuários elementos adicionais para aprofundar sua navegação. Por exemplo, essas são opções para refinar os critérios de compra em um site de comércio eletrônico com, por exemplo, a presença de filtros: tamanho, preço, cor, gênero e muitos outros.
Melhores práticas para um menu de navegação perfeito
Pense na estrutura de seu site com antecedência
Antes de criar meu cardápio, tive a oportunidade de projetar o layout do site Twaino.com. Aconselho-o a fazer o mesmo por várias razões que mencionei em meu artigo sobre o assunto, o que inclui também o processo a seguir para projetar com sucesso seu website.
Esse passo permite ao senhor criar a estrutura em árvore de seu website e identificar os diferentes títulos que terá em seu menu de navegação.
Escolher o local mais apropriado
O senhor pode escolher entre os três layouts que mencionei acima:
- Ementa horizontal ;
- Ementa vertical à esquerda;
- Direito vertical.
O senhor pode fazer combinações, mas procure evitar redundâncias, a fim de maximizar a experiência do usuário.
Limitar o número de ligações
Em um menu de navegação, o senhor pode acrescentar quantos títulos quiser. Mas sugiro-lhe que não exceda sete seções diferentes. Com efeito, demasiados títulos levarão a uma menor legibilidade e poderão aumentar a confusão do usuário que fugirá de seu website.
Ao invés disso, pense em criar sub-menus e usar seu rodapé para integrar certas páginas estáticas como “Sobre nós”, “Aviso Legal”, etc. Além disso, certifique-se de que seu cardápio não contenha nenhuma redundância, tal como colocar a seção “Home” quando seu logotipo puder ser clicado e levado de volta a esta página.
Escolha nomes explícitos
Outro elemento muito importante é a escolha dos nomes de suas seções e o senhor deve assegurar-se de que eles sejam explícitos. O senhor precisa certificar-se de que o visitante de seu site saiba imediatamente o que vai encontrar na página, e uma palavra geralmente é suficiente. Por exemplo, em vez de escolher “The blog of ….”, escolha “blog” ou “our rentals” em vez de “our furniture rentals …..”.
Além disso, escolha nomes que sejam realmente significativos para seus negócios. Por exemplo, se eu colocar apenas “Serviços”, isso não deixa os visitantes saberem à primeira vista que eu ofereço serviços de SEO, treinamento.
Encomendar bem seu cardápio
Outro aspecto muito importante é a ordem pela qual os links são exibidos em seu menu de navegação. Sugiro que o senhor coloque em primeiro lugar as páginas mais importantes ou o cerne de seus negócios. É costume colocar as páginas “Encontre-nos” ou “Contate-nos” no final e os usuários já se acostumaram a esse esquema.
Permanecer consistente nas diferentes páginas de seu site
É possível ter ementas em certas páginas que diferem em termos de layout e ordem.
Mas recomendo que o senhor mantenha a ementa principal e, se necessário, acrescente uma ementa secundária específica a certas páginas. Assim, o senhor criará um local coerente e tornará mais fácil para as pessoas seguirem o senhor.
Crie seu próprio menu no WordPress: os passos a seguir com o tema Avada
Vou usar o modelo que criei com o Adobe Illustrator para criar o menu do meu site Twaino.com. Na verdade, essa maquete me permite ter uma idéia precisa do resultado esperado e, conseqüentemente, saber como proceder exatamente.
Observe também que vou usar o tema “Avada” que instalei e que todo o processo se baseia nele. Dependendo do tema que o senhor tiver, provavelmente não terá exatamente as mesmas interfaces que eu. No entanto, o senhor pode adaptar o processo de acordo com seu próprio tema.
É importante notar que há dois passos principais na criação do menu de navegação:
- Acrescentando seu logotipo;
- A criação dos títulos do seu menu de navegação e seu desenho.
Mostrar-lhe-ei, portanto, em primeiro lugar, como acrescentar seu logotipo à barra de navegação. Em segundo lugar, mostrar-lhe-ei como configurar e projetar as seções do seu menu de navegação.
Vamos lá então!
Entrar na conta “Admin” de seu site
Antes de iniciar uma das duas etapas principais, o senhor deve primeiro entrar na conta administrativa de seu website para acessar o Painel de Controle WordPress. Para fazer isso, basta acrescentar “…./wp-admin” à URL do seu site. Em seguida, preencha as caixas com suas credenciais e apresente-as.
Acrescentar seu logotipo ao menu de navegação: passos a seguir
Para meu tema de demonstração “Avada SEO”, já existe um logotipo por padrão. Portanto, o que vou fazer é mudar esse logotipo e colocar o meu em seu lugar.
1) Vá a suas opções temáticas
No meu painel, vou para “Avada”, que é meu tema, e no menu que aparece, escolho “Opções Temáticas”, que me oferece um espaço de configuração com vários itens.
2) Escolher o tipo de logotipo a ser mudado
Nesta nova página, clique na opção “Logotipo” na segunda barra lateral esquerda. O senhor terá então duas subseções, incluindo :
- Logotipo: este é o logotipo clássico do menu de navegação;
- Favicon: este é o pequeno ícone que aparece nas abas do navegador. Isso permite ao usuário identificar a guia do seu website, mesmo que ele esteja em outro website.
3) Mudar o logotipo padrão e suas variações
3-1) Mudar o “Logotipo por defeito
Para mudar o logotipo padrão, clique na subseção “Logotipo” e desça para a opção “Logotipo padrão”. Aí, clique no botão “Upload” para, em vez disso, carregar seu logotipo.
Gostaria de salientar aqui que na interface que aparece, o senhor pode ver diretamente o tamanho do logotipo atual para ter uma idéia precisa do tamanho que seu logotipo precisa para preencher corretamente o espaço que ocupa.
Para isso, veja seus detalhes, que são mostrados na barra lateral direita
No meu nível, tenho 165 x 41 pixels e se o senhor mesmo projetou seu logotipo, pode facilmente mudar seu tamanho, como farei com o Adobe Illustrator no vídeo
Se o senhor não a desenhou, basta dar os tamanhos ao seu desenhista gráfico para que o faça.
Caso seu logotipo já esteja pronto, pressione a janela “Upload Files”, que lhe permite ir diretamente a seu computador para obter o logotipo. O senhor tem duas opções:
- Arraste e solte o arquivo do logotipo diretamente sobre a página;
- Clique no botão “Selecionar Arquivos” para ir buscar manualmente o logotipo de suas pastas.
Escolho a segunda opção e meu logotipo é colocado na “Media Library” do meu site. Aqui o senhor tem a oportunidade de nomear seu logotipo, o que eu faço indicando “Twaino-logo 1x”, depois aperto o botão azul na parte inferior “Select”.
Meu logotipo toma o lugar do logotipo padrão.
3-2) Mudar as outras variações do logotipo padrão
3-2-1) Logotipo da Retina Default
Vá então para o nível de “Retina Default Logo” e clique em “Upload” para mudá-lo. Procedo da mesma maneira que antes, tomando as dimensões exatas para ajustar meu logotipo. Eu o carrego na “Biblioteca da Mídia”, nomeio-o “Twaino-logo 2x” e o seleciono.
Guardo-o primeiro para ver se as mudanças foram levadas em conta. Para fazer isso, tenho que ir à página inicial de meu site e, é claro, a outra guia.
Para fazer isso, basta ir até o canto superior esquerdo e clicar no ícone da casa, seguido do nome do tema de demonstração “Avada SEO”. Em seguida, pressione “Go to Site”, que o leva diretamente à página inicial em outra guia do navegador.
Posso ver que o logotipo padrão foi substituído pelo meu logotipo.
3-2-2) Logotipo do cabeçalho adesivo
Continuo as modificações com este tempo “Sticky Header Logo”. Na verdade, um cabeçalho pegajoso é um menu que permanecerá “fixo” no topo de sua página, e isto mesmo quando o senhor desce durante a navegação / leitura.
Nesse nível, tenho duas opções, entre as quais “Sticky Header Logo” e “Retina Sticky Header Logo”. Note que os adesivos são elementos muito interessantes em um website e serão objeto de outro artigo.
Procedo da mesma maneira que antes para substituir esses logotipos por default. Só que desta vez só preciso selecionar os logotipos correspondentes na “Biblioteca da Mídia”. Tente selecionar o logotipo escolhido entre “Logotipotipo padrão” para “Logotipo de cabeçalho adesivo” e “Logotipo padrão da retina” para “Logotipo de cabeçalho adesivo da retina”.
3-2-3) Logotipo móvel
Logo abaixo de “Sticky Header Logo”, há “Mobile Logo”, e o senhor deve também mudar os logotipos padrão que ele inclui.
Proceder exatamente da mesma maneira que no passo anterior e ter o cuidado de escolher o mesmo logotipo entre “Logotipo Default” para “Logotipo Mobile” e o logotipo entre “Logotipo Retina Default” para “Logotipo Retina Mobile” Em seguida, salve clicando no botão azul “Salvar”, na parte inferior.
4) Mudar o Flavicon
Em seguida, clique na subseção “Flavicon” do menu “Logo” para mudar o Flavicon de seu website. Um Flavicon é uma pequena imagem que pode ser encontrada na barra do seu navegador de busca. É uma pequena imagem que ajudará os usuários da Internet a identificar seu site muito facilmente em um navegador.
Na página que se abre, o senhor verá três opções diferentes com as dimensões apropriadas para cada uma. Estes são :
- Flavicon: um tamanho de 16px x 16px ou 32px x 32px ;
- Apple iPhone Icon Upload: 57 px x 57 px ;
- Apple iPad Icon Upload: 72 px x 72 px ;
Portanto, o senhor procederá a modificar o tamanho de seu logotipo para ter esses três formatos diferentes. No meu caso, faço-o rapidamente com o Adobe Illustrator.
Em seguida, basta clicar em cada botão “Upload” para carregar o logotipo correspondente a cada opção.
Ao acrescentar esses logotipos, o senhor vai ver que há mais opções acrescentadas. O senhor só tem que modificar novamente seu logotipo para carregá-los também. Aconselho o senhor a fazer tudo de uma só vez, para que não deixe nada que provavelmente lhe possa causar problemas mais tarde.
Depois de ter carregado todos os logotipos, clique no botão azul “Salvar mudanças”, na parte inferior, para salvar as mudanças. Se o senhor for à página inicial de seu website, verá que seu logotipo aparece na guia de seu navegador.
Meu logotipo aparece em meu navegador e como tudo parece estar perfeito, passo à criação dos itens de meu menu de navegação.
Criação dos itens do menu de navegação: os passos a seguir
Há duas maneiras diferentes de criar o menu de navegação:
- Da página inicial;
- Do tema “Avada”.
A primeira é na verdade uma navegação padrão proposta pelo WordPress e pessoalmente não uso necessariamente esse método, mas acho interessante apresentá-la ao senhor.
Da página inicial
Ainda conectado à sua conta administrativa, o senhor irá à página inicial.
Em seguida, clique no botão “Personalizar”, seguido de um pincel, que se encontra na parte superior esquerda do ícone de atualização.
Na interface que aparece, clique na seção “Menu”, na barra lateral esquerda.
Clico então no nome do menu “Menu principal da SEO” em minha situação.
Isso cria uma interface com todas as categorias do menu de navegação padrão. Ao clicar em “+ Adicionar itens” o senhor pode acrescentar mais categorias às já existentes. O senhor também pode reordená-las clicando em “Rearranjo”.
Configuração do menu de navegação com Avada
Esse método permite que o senhor configure seu menu de navegação com muito mais precisão. Esta é a principal razão pela qual, pessoalmente, prefiro isso do que o anterior. Note-se que eu distingo aqui dois passos principais, incluindo :
- A criação do cardápio (com o texto);
- O desenho do cardápio.
1) A criação do menu (com o texto)
Esta medida permite ao senhor criar os diferentes títulos que deseja ter em seu menu de navegação.
1-1) Ir para a página de configuração do menu
Há duas maneiras de se chegar à página de configuração do menu:
-Na página inicial, clique na janela “Avada SEO” e, no menu que aparece, selecione “Menu”;
-No Painel, clique na seção “Aparência” e depois na opção “Ementa”.
1-2) Criar um novo menu principal
Na interface de configuração, clique em “Criar um novo menu”, que se encontra na parte inferior da janela “Editar menus”. Em seguida, digite o nome do menu que deseja acrescentar e pressione o botão azul “Create Menu” (criar menu), à direita. Para meu site, estou criando o menu “Twaino”.
O senhor pode agora configurar seu novo cardápio e várias opções estão disponíveis:
- Navegação principal: Permite que o senhor faça dela seu menu principal;
- Navegação superior: Permite ao senhor fazê-la aparecer na barra que se encontra logo acima da barra do menu de navegação
- Navegação móvel: Permite ao senhor criar menus específicos para navegação móvel;
- 404 páginas úteis: Para 404 páginas de erro;
- Navegação com cabeçalho adesivo: Permite que o senhor o integre ao menu que aparece quando o senhor navega pelo site.
No meu caso, seleciono a primeira opção e a última para meu cardápio “Twaino”.
1-3) Em seguida, criar as ementas
Depois de criar o menu principal, o senhor pode criar os menus que aparecerão na barra de navegação.
Há várias opções para acrescentar itens ao cardápio:
- Acrescentar uma página recente : O senhor poderá escolher nesta seção uma página que deseja integrar ao seu cardápio;
- Acrescentar um artigo: O WordPress lhe dá a possibilidade de acrescentar um artigo em seu cardápio com essa opção;
- Adicionar um link personalizado: Se o senhor quiser enviar seus visitantes a uma página específica de seu site ou a um site externo, poderá usar essa opção acrescentando o URL de sua escolha;
- Acrescentar uma categoria: Para navegar em um site, pode ser interessante acrescentar uma categoria no menu.
No meu caso, como meu site acaba de ser criado, não tenho necessariamente as páginas e artigos que existem. Portanto, para lhe mostrar como proceder, acrescentarei “links personalizados”. É claro que, uma vez que todas as minhas páginas tenham sido construídas corretamente, terei a oportunidade de mudar meu cardápio para que fique perfeitamente limpo.
Para os fins de meu vídeo e deste tutorial, vou clicar em “Links personalizados” que está localizado logo abaixo de “Artigos” na barra lateral à esquerda e tem “Adicionar itens de menu” no topo.
Certifique-se de inserir primeiro o link de seu website na seção “Endereço da Web”. Não esqueça de acrescentar os “s” a “http” se o senhor já tiver mudado para HTTPS.
Na seção “Texto de ligação”, digite os nomes dos menus que o senhor deseja ter. Em meu nível, eu entro” https://twaino.com “e sucessivamente os seguintes nomes:
- AGÊNCIA SEO ;
- SERVIÇOS ;
- FORMAÇÃO
- BLOG ;
- AUDITORIA LIVRE.
Em seguida, clique no botão azul “Save Menu”, no final da página, para dar uma primeira olhada
Se o senhor for à página inicial de seu website, notará que os menus realmente apareceram como eu na página inicial de meu website. O próximo passo é modificar o projeto atual do cardápio para obter o resultado desejado
2) O desenho de seu cardápio
Para ter o desenho desejado para seu cardápio, o senhor irá às opções de seu tema.
Para isso, vá até “Avada” na barra lateral esquerda de seu painel e clique em “Opções de temas” e depois em “Ementa”
Na interface que aparece, o senhor tem todas as opções para “desenhar” seu cardápio.
2-1) Mudar a cor do texto do menu
Primeiro clique em “Menu principal” e depois desça até “Menu principal Fonte Hover/Active Color”.
Pressione “Selecione uma cor” e escolha a cor que deseja dar a seu menu nomes.
Eu escolhi o branco por causa da maquete que fiz anteriormente. Valide essa modificação clicando no botão “Save Changes” e vá até a página inicial de seu website para ver essa modificação. No meu caso, tenho todos os nomes dos meus cardápios em branco.
2-2) Colocar um botão colorido sob um menu
Para o meu menu “AUDITORIA LIVRE”, quero colocar um botão colorido por baixo para distingui-lo dos outros menus. Se o senhor também quiser fazer isso, vá para a seção “Aparência”, na barra lateral esquerda do painel. Em seguida, clique em “Menus” e, na barra de menu em questão, pressione a seta do lado direito para rolar para baixo.
Selecione o botão azul “Avada Menu Option”, que o leva à interface de configuração. Sob “Menu First Level Style”, o senhor pode escolher o tamanho do botão. Eu escolho “Button Medium” para ter um tamanho médio.
O senhor também pode acrescentar um ícone e mudar a cor do botão. Para o último ponto, clique em “Selecione uma cor” na frente da opção “Menu Highlight Label Bacel Background Color”. Escolha a cor que lhe convém, mas como já tenho uma cor para usar, simplesmente copio seu código e o colo na parte correspondente para ter exatamente a cor que eu quero.
Depois dessas configurações, valide-as pressionando “Save menu”.
Atualize sua home page e o senhor verá que o botão apareceu de fato
Tenho o menu “AUDITORIA LIVRE” em um botão colorido. No entanto, às vezes a cor não corresponde ao que o senhor quer ter.
2-3) Mudar a cor e a fonte de seu botão de menu
Se o senhor tiver seguido os passos anteriores sem conseguir a cor desejada, talvez tenha uma opção que ainda esteja ativa. Para fazer isso, vá ao menu de Opções Temáticas de seu tema e clique em Elementos de Construção de Fusão e depois em Elemento de Botão
O senhor tem então as diferentes configurações para os botões em seu website.
Primeiramente, vou mudar a fonte do botão “AUDITORIA LIVRE”. Para isso, vá a “Tipografia de botões” e selecione a “Família de fontes” que lhe convém. Vou usar “Gudea” por causa do layout do meu site.
Na segunda posição, mudo a cor do botão indo para o “Botão Gradien” diferente para escolher a cor que eu quero ter. Eu guardo as mudanças e houve uma mudança na cor do botão e na fonte do menu.
2-4) Selecionar o estilo de seu cardápio
Vá ao menu “Opções Temáticas” de seu tema e clique em “Cabeçalho” e depois em “Conteúdo do Cabeçalho”
O senhor tem a escolha entre vários estilos de cardápio, cabe ao senhor fazer a escolha de acordo com o que quiser ter
Além disso, há algumas configurações que o senhor já pode fazer aqui.
Isso inclui acrescentar seu número de telefone e e-mail, indo às opções “Número de telefone para informações de contato” e “Endereço de e-mail para informações de contato”.
Além disso, em “Conteúdo de cabeçalho 2”, selecione “Links sociais” se o senhor, como eu, desejar inserir os links para suas contas de rede social diretamente na parte superior de seu website.
No final, valide as mudanças clicando no botão azul “Salvar mudanças”.
2-5) Ativar o cabeçalho adesivo
Ainda no nível de “Cabeçalho”, clique em “Sticky Header” e pressione “On”
Em seguida, salve e vá à página inicial de seu website para ver as mudanças que foram feitas.
2-6) Mudar a cor de seu cabeçalho
Para mudar a cor de seu cabeçalho, vá para “Header Styling” e desça para “Header Background Color”.
Selecione a cor que deseja ter e vá para a cor de fundo do cabeçalho para mudar a cor do cabeçalho superior, incluindo os links da rede social.
Economize as mudanças, economizando.
2-7) Alterar o tamanho e as cores dos textos no cabeçalho superior
Para fazer isso, clique na opção “Secondary Top Menu” na seção “Menu” do “Theme Options” (Opções Temáticas). Uma vez na página, desça e escolha as cores que o senhor deseja ter nos três parâmetros:
- Cor da fonte do menu secundário ;
- Cor da fonte do menu secundário ;
- Menú Secundário Dropdown Font Hover Color.
Para mudar o tamanho do texto, basta ir ao parâmetro “Tamanho da fonte do menu secundário”
Especifique o tamanho que deseja e sinta-se livre para experimentar a fim de obter o melhor resultado. Depois, guarde essas mudanças para ter uma prévia.
É isso aí! Acabo de criar o menu de navegação para o meu site. Como o senhor pode ver, o resultado é quase o mesmo que o da maquete do meu site.
Conclusão
O menu de navegação é um dos primeiros elementos a serem colocados em prática quando o senhor começar a criar um website. Mas, embora sua criação não seja extremamente complicada, como o senhor viu, ela continua sendo um elemento muito importante que não deve ser levado de ânimo leve. Por esse motivo, recomendo vivamente que o senhor faça uma maquete de seu site com antecedência, o que lhe poupará muito tempo durante esta etapa. O senhor saberá exatamente o que deseja alcançar, e tudo o que tem a fazer é usar o processo descrito acima para obter o resultado desejado. Não tenha medo de experimentar um pouco, pois às vezes opções diferentes afetam o mesmo cenário, como foi o caso da cor do botão do meu menu “AUDITORIA LIVRE”.
