A navegação no site é fundamental para ajudar seus usuários a chegar onde eles querem ir. Um menu bem desenhado pode contribuir muito para melhorar a Experiência do Usuário (UX), e até mesmo diminuir a sua taxa de ressalto. No entanto, um mal feito pode fazer exatamente o contrário.

Felizmente, o WordPress permite que você crie menus personalizados para atender às necessidades do seu site. Você pode até mesmo usar funções nativas para adicionar um menu suspenso WordPress compacto que economiza espaço, enquanto ainda fornece uma direção clara para os seus visitantes.

Neste post, discutiremos por que a navegação no site é importante e como os menus suspensos podem ser particularmente úteis. Em seguida, vamos mostrar como criá-los no WordPress, e partilhar alguns plugins que podem ajudar.

Vamos mergulhar!

Uma Introdução à Navegação por WordPress e Menus Dropdown

Embora possam ser despretensiosos, os menus de navegação são um elemento vital de qualquer website. Eles ajudam os usuários a encontrar rapidamente as páginas mais relevantes para atingir seus objetivos, ao mesmo tempo em que dão aos primeiros visitantes uma idéia do que você tem a oferecer:

esempio di menu

O menu principal de navegação do site Kinsta

Ter um menu de navegação bem desenhado é fundamental para impulsionar as conversões e diminuir a sua taxa de ressalto. Quando os usuários podem encontrar facilmente as páginas onde seu produto, formulário de inscrição por e-mail ou outro conteúdo de conversão está localizado, você terá um tempo mais simples para conseguir que eles façam uma compra ou inscrição.

Além disso, se os utilizadores conseguirem encontrar o seu caminho através do seu site com confiança, não terão de saltar das suas páginas porque acabaram no sítio errado. Ajudá-los a acertar da primeira vez pode tanto melhorar o UX como minimizar a frustração.

No WordPress, os menus são uma característica inerente. Qualquer site criado com a plataforma pode exibir um ou mais deles. No entanto, os temas do WordPress também desempenham um papel importante quando se trata de estilizar e colocar o seu menu ou menus.

Por este motivo, o seu menu WordPress pode assumir muitas formas diferentes. O mais familiar é o menu de cabeçalho standard:

Um exemplo de um menu de cabeçalho típico

Um exemplo de um menu de cabeçalho típico

Muitas vezes você também pode incluir um menu de rodapé adicional no final das páginas. Ele pode exibir o mesmo conteúdo do seu menu principal, ou oferecer opções ligeiramente diferentes:

Um exemplo de um menu de rodapé

Um exemplo de um menu de rodapé

Outro estilo é a sobreposição do menu, que os usuários podem abrir e fechar à vontade:

Um exemplo de um menu de sobreposições

Um exemplo de um menu de sobreposições

Alternativamente, você pode considerar o uso de um menu de barras laterais:

Um exemplo de um menu lateral

Um exemplo de um menu lateral

Ou você pode incorporar um menu suspenso, também chamado por vezes de menu “aninhado”:

Um exemplo de um menu suspenso

Um exemplo de um menu suspenso

Este tipo de navegação é ideal para muitos tipos de sites. Não vai obscurecer o seu conteúdo como um menu de sobreposição, mas não é tão intrusivo como uma grande barra de cabeçalho ou um menu de barra lateral.

Ao esconder algum conteúdo até que seja necessário, você economizará espaço na tela e, ao mesmo tempo, oferecerá aos usuários uma maneira fácil de se locomover.

Como criar um menu suspenso no WordPress (Em 5 passos)

Se você decidiu que um menu suspenso pode ser um bom ajuste para o seu site WordPress, configurar um é bastante simples. Usando os recursos do menu nativo disponíveis no WordPress, você pode criar um sistema de navegação personalizado que atenda às suas necessidades em apenas cinco etapas.

Passo 1: Crie os seus itens de menu

O primeiro passo para criar um menu é decidir o que incluir no mesmo. Comece navegando para Appearance > Menus no seu painel do WordPress:

Menu WordPress

Aceder ao editor de menus no painel de controle do WordPress

O que você vê no editor de menu irá variar ligeiramente dependendo do seu tema.

No entanto, o que é importante notar por agora é a primeira opção no separador Editar Menus. Você deve ver uma opção onde você pode selecionar um de seus menus existentes para editar, bem como uma opção para criar um novo menu:

A criação de um novo link de menu na parte superior do editor de menus do WordPress

A criação de um novo link de menu na parte superior do editor de menus do WordPress

Para este exemplo, vamos escolher a última opção e criar um novo menu. Isto envolve adicionar um título e depois clicar no botão Criar Menu:

Nomear e criar o novo menu

Nomear e criar o novo menu

Agora você está pronto para começar a adicionar itens ao seu menu do WordPress. Na maioria dos casos, é melhor manter o seu menu o mais simples possível, ao mesmo tempo que dá aos usuários informações suficientes para chegar onde eles querem ir.

A incorporação de demasiadas páginas pode sobrecarregar os visitantes e tornar a navegação mais difícil em vez de mais fácil.

Existem algumas maneiras diferentes de adicionar os seus itens de menu. As duas primeiras são Páginas e Posts, e funcionam de forma muito semelhante.

Acrescentar páginas ao menu

Acrescentar páginas ao menu

Na barra lateral do editor de menus, simplesmente selecione as caixas de seleção para cada página ou post que você deseja incluir, e clique no botão Adicionar ao Menu:

A sua próxima opção é incorporar Links Personalizados. Isso envolve fornecer a URL da página para a qual você quer direcionar os usuários e, em seguida, criar uma etiqueta curta, mas descritiva para ela. Depois disso, você pode clicar em Adicionar ao Menu novamente:

Adicionando um link personalizado ao menu

Adicionando um link personalizado ao menu

Finalmente, você também pode adicionar Categorias de Páginas e Postais ao seu menu de navegação. Isto levará os usuários a uma página de arquivo onde eles podem ver todo o conteúdo sobre um tópico em particular.

Blogs e outros sites de conteúdo pesado podem achar este recurso especialmente útil:

Adicionar categorias ao menu

Adicionar categorias ao menu

Como nas opções Páginas e Posts, basta selecionar as caixas de seleção das categorias que você deseja incluir e escolher Adicionar ao Menu.

Passo 2: Organize o seu menu WordPress

Depois de adicionar todos os seus itens de menu, você deve vê-los listados em peças individuais em Estrutura de Menu no editor:

A seção Estrutura de menus do editor de menus

A seção Estrutura de menus do editor de menus

Inicialmente, os itens do menu aparecerão na ordem em que você os adicionou. No entanto, você pode facilmente modificar a organização deles arrastando-os e soltando-os no lugar. Isso permitirá que você crie um menu simples sem a funcionalidade dropdown.

Há algumas maneiras de adicionar dropdowns ao seu menu WordPress.

O mais simples é continuar a arrastar e largar, mas começar a aninhar certos itens do menu sob outros:

Categorias de aninhamento sob a página do Blog

Por exemplo, na imagem acima, movemos as três categorias de posts que adicionamos ao menu em Blog, tornando-as “subitens”. No frontend, isto irá criar um menu suspenso que se parece com isto:

Exemplo de um menu dropdown no WordPress

Exemplo de um menu dropdown no WordPress

Se você gostaria de adicionar um menu suspenso que inclui todas as categorias do seu site, você pode fazê-lo adicionando um Link personalizado ao seu menu. Use “#” como URL e “Categorias” ou algo similar para a etiqueta:

Criação de uma etiqueta de Categorias para o menu

Criação de uma etiqueta de Categorias para o menu

Você pode então adicionar todas as suas categorias ao menu e aninhá-las sob esta etiqueta. Cada categoria será clicável, mas a etiqueta não será:

O menu suspenso Categorias

O menu suspenso Categorias

Usando uma técnica similar, você também pode esconder todos os seus itens de menu em um único menu suspenso.

Adicione outro Link personalizado, usando “#” como o URL e “Menu” como a etiqueta. Depois, aninhe todos os outros itens do seu menu sob esse:

Aninhando todos os links de navegação sob uma única etiqueta de Menu

Aninhando todos os links de navegação sob uma única etiqueta de Menu

O resultado no frontend será um menu suspenso que inclui as páginas-chave do seu site.

Como você pode ver no item Categorias abaixo, qualquer conteúdo aninhado sob um subitem aparecerá em um sub-menu:

Um verdadeiro menu suspenso de navegação WordPress

Um verdadeiro menu suspenso de navegação WordPress

Usando o editor de menu arrastar e soltar desta forma, você pode criar qualquer estilo e combinação de menus dropdown do WordPress. Lembre-se, porém, que muitos itens de menu podem ser confusos para os usuários.

Também é melhor limitar o número de sub-menus que você incorpora, para evitar sobrecarregar a sua navegação.

Passo 3: Incorporar imagens no seu menu WordPress

Se ao final do Passo 2, seu menu suspenso se parecer exatamente como você imaginou, você pode pular para o Passo 5 para publicá-lo. No entanto, há passos adicionais que você pode querer tomar se quiser melhorar o seu menu com personalizações.

Uma tática a considerar é incorporar elementos visuais nos seus menus para fornecer mais orientação aos visitantes. Embora as etiquetas descritivas sejam vitais, às vezes uma imagem ou um ícone pode ajudar os usuários a determinar mais rapidamente onde um determinado link de navegação leva.

É possível adicionar imagens usando o CSS personalizado, que discutiremos em breve. No entanto, recomendamos pegar um plugin como o Menu Image, Icons Made Easy:

Menu dropdown WordPress com imagens

Menu dropdown WordPress com imagens

Desta forma, você não precisa se preocupar em se preocupar com qualquer código para adicionar interesse visual ao seu menu suspenso.

Basta instalar o plugin e depois voltar ao Appearance > Menus:

A secção Imagem do Menu no editor de menus

A seção Imagem do Menu no editor de menus

Você verá que agora há opções de imagem para cada página que você incluiu no seu menu. Você pode selecionar a foto, o tamanho e a posição de cada página. Lembre-se de guardar as suas alterações quando terminar.

Passo 4: Adicione CSS personalizado ao seu menu dropdown

Embora não seja recomendado para iniciantes, os usuários intermediários e avançados podem querer incorporar seu próprio estilo em seus menus suspensos do WordPress. Antes de saltar diretamente para o seu CSS, no entanto, terá de adicionar uma aula ao seu menu.

Se você pular esta etapa, seu CSS personalizado pode causar problemas para qualquer outro menu em seu site. Por exemplo, você pode inadvertidamente aplicar um estilo ao seu menu de rodapé que você quis dizer apenas para o seu menu suspenso principal.

No editor de menus, clique em Opções de Tela no canto superior direito:

O separador Opções de ecrã no editor de menus

O separador Opções de ecrã no editor de menus

Depois, marque a caixa para Classes CSS:

A caixa de seleção Classes CSS na guia Opções da tela

A caixa de seleção Classes CSS na guia Opções da tela

Isto irá adicionar um campo CSS Classes a cada página do seu menu:

O campo Classes CSS no editor de menus

O campo Classes CSS no editor de menus

Assim que você adicionar uma ou mais classes CSS aos itens do seu menu, qualquer código personalizado que você incluir na sua folha de estilos só se aplicará aos itens do seu menu com a classe que você especificar.

Cansado de um host lento para o seu site WordPress? Nós fornecemos servidores de alta velocidade e suporte 24 horas por dia, 7 dias por semana, com especialistas em WordPress. Confira nossos planos

Agora você pode ir até a sua folha de estilos ou o Customizer, e começar a trabalhar no seu estilo personalizado.

Passo 5: Publique o seu Menu em Prime Locations

Assim que o seu menu suspenso WordPress estiver estruturado para atender às suas necessidades, e você tiver incorporado as personalizações que desejar, você estará pronto para publicá-lo no seu site.

Este processo irá variar ligeiramente dependendo do seu tema e de quais localizações de menu ele suporta. Para este exemplo, vamos usar o tema dos Vinte Vinte.

No editor de menus, desça até a seção Configurações do menu:

A seção Configurações do menu no editor

A seção Configurações do menu no editor

Você pode selecionar a primeira caixa de seleção se desejar que novas páginas sejam automaticamente adicionadas ao seu menu. Se você está apenas começando com o seu site e ainda não adicionou todas as suas páginas-chave, isso pode ser útil. No entanto, tenha cuidado para não adicionar acidentalmente demasiados itens ao seu menu.

Abaixo desta opção, você verá uma lista de caixas de seleção observando as diferentes áreas do seu site onde você pode exibir seu menu.

O tema Vinte Vinte inclui diferentes áreas de menu: Menu Horizontal de Secretária, Menu Expandido de Secretária, Menu Móvel, Menu Rodapé, Menu Social.

Neste caso, o menu que criámos é o mais adequado para a localização do Menu Horizontal Desktop, que está no cabeçalho do site:

Menu Horizontal de Secretária para o tema Vinte Vinte

Menu Horizontal de Secretária para o tema Vinte Vinte

Você também pode considerar navegar para a guia Gerenciar Locais na área de Menus do seu painel de instrumentos. Aqui você pode ver todos os locais do menu que são suportados pelo seu tema, bem como o menu que você atribuiu a cada um deles:

O separador Gerir Locais

O separador Gerir Locais

Ao colocar seus menus, pode ser útil ver como eles ficarão no frontend.

A opção Gerir com Pré-visualização ao Vivo

A opção Gerir com Pré-visualização ao Vivo

Clique no botão Gerenciar com visualização ao vivo para ver como seu menu aparecerá no local escolhido para ele, usando o Personalizador do WordPress:

Uma pré-visualização ao vivo para o menu do WordPress no Customizer

Uma pré-visualização ao vivo para o menu do WordPress no Customizer

Você pode então publicar seu menu ou menus diretamente do Customizer. Se você precisar adicionar ou remover itens do menu suspenso, você pode simplesmente retornar ao editor de menu e fazer os ajustes necessários.

Plugins WordPress para melhorar os seus menus dropdown

Embora você possa criar menus de navegação WordPress totalmente funcionais sem nenhuma ferramenta extra, às vezes pode ser útil ampliar a funcionalidade do seu menu. Se for esse o caso do seu site, você pode querer pesquisar alguns plugins populares do menu do WordPress.

Nested Pages é uma forma eficiente para blogs de conteúdo pesado criar menus dropdown. Embora seja usado principalmente para organizar posts e páginas, este plugin também irá gerar automaticamente um menu que espelha a estrutura do seu conteúdo:

Nested Pages

Nested Pages WordPress plugin

Embora não seja necessariamente aconselhável incorporar um grande número de itens nos seus menus, por vezes é inevitável.

Se for esse o caso do seu site, o Max Mega Menu pode ajudá-lo a combinar seus menus WordPress existentes para formar um “mega menu”:

max mega menu

Max Mega Menu WordPress plugin

Com a navegação móvel em ascensão, é fundamental assegurar que os seus menus ainda sejam legíveis em dispositivos móveis.

WP Mobile Menu emparelha com qualquer tema de resposta para ajudá-lo a criar um sistema de navegação para os usuários do seu site que estão em movimento:

wp mobile menu

WP Mobile Menus WordPress plugin

Finalmente, como já discutimos, pode haver situações em que os itens do menu descritivo não são suficientes. Nessas situações, você pode querer olhar para o uso do Menu Image, Icons Made Easy como descrito no Passo 3 acima.

Você pode usar qualquer um desses plugins para melhorar seu sistema de navegação atual e tornar seu menu suspenso do WordPress mais eficaz. Basta lembrar que às vezes, quando se trata de navegação, mais simples é melhor. Somente adicione recursos extras se isso melhorar o seu UX e evitar a desorganização do seu site.

Solucionando problemas no menu suspenso do WordPress

Se você configurou seu menu como descrito acima, mas a funcionalidade dropdown não está funcionando, há várias causas possíveis.

Embora não possamos cobrir todos eles aqui, podemos ajudá-lo a reduzir a causa do seu problema para que você possa encontrar a solução adequada.

Muitas vezes, um menu com problemas de funcionamento é o resultado de códigos conflitantes entre o seu menu personalizado e o seu tema. A primeira coisa que você deve fazer se o seu menu não estiver funcionando é mudar para um tema padrão como o Twenty Twenty. Se o seu menu começar a funcionar novamente, você saberá que a questão está relacionada ao seu tema. Você pode então contatar o desenvolvedor do seu tema para buscar uma solução.

Algumas outras causas possíveis incluem:

  • Código errado: Verifique se qualquer CSS personalizado que você tenha adicionado está correto e se você está usando classes CSS como descrito no Passo 4.
  • Incompatibilidade do plugin: Tente desativar quaisquer plugins relacionados com homens que tenha instalado, para ver se isso resolve o problema.
  • JQuery desatualizada: Atualize para a versão mais recente de jQuery e tente abrir o menu suspenso novamente.

No entanto, como mencionámos anteriormente, as causas potenciais por detrás do seu menu defeituoso são numerosas. Se nenhuma das soluções acima parece estar funcionando, recomendamos que você visite os Fóruns de Suporte WordPress, entre em contato com a nossa Equipe de Suporte Kinsta WordPress ou contrate um desenvolvedor WordPress para corrigi-lo para você.

Os menus de navegação são a chave para o UX do seu site. E se tiver muitos itens de menu que precisa de incluir? Menu suspenso é o nome do jogo aqui! Veja como é fácil criar um com este guia 📑🗃️ Click to Tweet

Resumo

Embora possa parecer uma pequena questão, a navegação do seu site WordPress pode fazer ou quebrar o seu sucesso. O uso de menus dropdown pode economizar espaço nas telas dos usuários, ao mesmo tempo em que permite que eles se movimentem facilmente pelo seu site e melhorem as suas conversões.


Se você gostou deste tutorial, então você vai adorar o nosso suporte. Todos os planos de hospedagem do Kinsta incluem suporte 24/7 de nossos veteranos desenvolvedores e engenheiros do WordPress. Converse com a mesma equipe que apoia nossos clientes da Fortune 500. Confira nossos planos