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:
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:
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:
Outro estilo é a sobreposição do menu, que os usuários podem abrir e fechar à vontade:
Alternativamente, você pode considerar o uso de um menu de barras laterais:
Ou você pode incorporar um menu suspenso, também chamado por vezes de menu “aninhado”:
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:
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:
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:
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.
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:
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:
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:
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:
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:
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:
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á:
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:
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:
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:
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:
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:
Depois, marque a caixa para Classes CSS:
Isto irá adicionar um campo CSS Classes a cada página do seu menu:
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.
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:
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:
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:
Ao colocar seus menus, pode ser útil ver como eles ficarão no frontend.
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:
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:
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”:
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:
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ê.
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.
