Como Criar um Menu Dropdown no WordPress (Guia para Iniciantes)

Você quer criar um menu suspenso no WordPress?

Um menu suspenso exibe uma lista de links quando você passa o mouse sobre um item do menu. Você pode usar esses menus para mostrar muitas opções em um espaço pequeno e ajudar os visitantes a encontrar o que procuram, organizando os links em categorias.

Neste guia para iniciantes, mostraremos como criar um menu suspenso no WordPress.

Por que usar menus suspensos no WordPress?

O WordPress vem com um sistema de gerenciamento de menus integrado que permite adicionar facilmente menus de navegação ao seu site.

Menus de navegação são links para as páginas mais importantes do seu site e geralmente aparecem em uma linha ao lado do logotipo do seu site.

Se você está iniciando um blog no WordPress ou criando um site com apenas algumas páginas, pode fazer sentido criar seu menu como uma única linha. Os visitantes poderão ver todas as suas páginas importantes de relance.

No entanto, se você administra uma loja online ou um site grande, você pode ter muito conteúdo. Adicionar todos esses links ao menu pode ser avassalador e deixar seu site com uma aparência bagunçada.

Menus suspensos resolvem esse problema mostrando apenas links do menu quando um visitante passa o mouse sobre o item pai. Eles também permitem que você organize seu conteúdo em tópicos, categorias ou grupos. Você pode até adicionar títulos aos seus menus.

Semelhante aos menus de navegação verticais, eles são perfeitos para mostrar muito conteúdo em um pequeno espaço.

Dito isso, vamos dar uma olhada em como você pode facilmente criar menus suspensos no WordPress e adicioná-los ao seu site.

Tutorial em Vídeo

Inscreva-se no WPBeginner

Se você não gostar do vídeo ou precisar de mais instruções, continue lendo.

Etapa 1: Escolhendo um Tema com Suporte a Menu Suspenso

O WordPress vem com um sistema de gerenciamento de menus integrado, mas a aparência desses menus varia dependendo do seu tema do WordPress.

Quase todos os temas do WordPress suportam menus suspensos por padrão. No entanto, alguns temas podem não ter o suporte adequado para menus suspensos. Para começar, você precisa garantir que seu tema suporte menus suspensos.

Como saber se o seu tema suporta navegação suspensa?

Se você baixou o tema do repositório oficial do WordPress, visite a página desse tema e clique no botão 'Pré-visualizar' para ver uma demonstração ao vivo.

Você pode então verificar se a demonstração inclui um menu suspenso.

Se você estiver usando um tema premium do WordPress, o desenvolvedor pode ter uma demonstração ao vivo em seu site. Você também pode verificar a documentação do tema para mais informações.

Se você ainda não tem certeza, pode sempre pedir ajuda ao desenvolvedor. Para mais informações sobre este tópico, consulte nosso guia sobre como pedir suporte WordPress corretamente e obtê-lo.

Se o seu tema WordPress não suporta menus suspensos, você precisará encontrar um tema que suporte. Para muitas dicas, consulte nosso guia sobre como escolher o tema WordPress perfeito.

Para te ajudar, aqui estão alguns temas excelentes que suportam menus suspensos:

• Astra – Um tema WordPress multipropósito que vem com vários sites iniciais e toneladas de recursos.
• Temas StudioPress – Construídos sobre a estrutura de temas Genesis, esses temas profissionais devem ajudar seu site a carregar mais rapidamente.
• OceanWP – Um tema WordPress popular adequado para todos os tipos de sites.
• Ultra – Alimentado pelo construtor Themify, este tema WordPress de arrastar e soltar vem com belos modelos e opções de tema flexíveis.
• Divi – Um tema popular da Elegant Themes que usa o construtor de páginas Divi e vem com toneladas de recursos de arrastar e soltar, incluindo menus suspensos.

Dito isso, vamos dar uma olhada em como criar um menu suspenso no WordPress.

Etapa 2: Criando um Menu de Navegação no WordPress

Vamos começar criando um menu simples.

Se você já configurou um menu de navegação em seu site, pode pular para a próxima etapa.

Para começar, vá para Aparência » Menus no painel do WordPress e clique no link ‘Criar um novo menu’.

Observação: Se você vir Aparência » Editor em vez disso, isso significa que seu tema suporta a Edição Completa do Site (FSE). Nesse caso, você pode pular para a seção FSE abaixo.

Em seguida, você precisa digitar um nome para o menu de navegação.

Isso é apenas para sua referência, então você pode usar qualquer coisa que ajude a identificar o menu dentro da área de administração do WordPress.

Após digitar um título no campo 'Nome do Menu', clique em 'Criar Menu'. O WordPress criará um menu vazio para você.

Em seguida, você precisará adicionar os links principais ao menu de navegação. Estes são os itens que aparecerão na linha superior do seu menu suspenso e atuarão como pais para todas as outras postagens e páginas.

Na coluna da esquerda, basta marcar a caixa ao lado de cada página que você deseja adicionar. Em seguida, clique no botão 'Adicionar ao Menu'.

Essas páginas agora aparecerão na coluna da direita em 'Estrutura do menu'.

Você também pode selecionar postagens de blog, categorias ou adicionar links personalizados. Para instruções mais detalhadas, consulte nosso guia sobre como adicionar um menu de navegação no WordPress.

Etapa 3: Adicionando Subitens a um Menu

Em seguida, precisamos adicionar subitens que aparecerão dentro do menu suspenso. Você pode adicionar um subitem sob qualquer item de menu existente.

Neste guia, mostraremos como adicionar categorias de assuntos sob um item de menu 'Blog', mas os passos serão semelhantes, independentemente do conteúdo que você adicionar.

Na coluna da esquerda, basta selecionar todas as páginas que você deseja adicionar como subitens e, em seguida, clicar no botão 'Adicionar ao Menu'. Seus itens agora aparecerão na coluna da direita.

No entanto, por padrão, todos esses links aparecem como itens de menu regulares, o que significa que eles serão adicionados à linha superior.

Precisamos torná-los subitens de um pai em vez disso.

Para fazer isso, basta arrastar e soltar um item de menu e colocá-lo sob o pai desejado. Em seguida, mova-o ligeiramente para a direita, e ele se tornará um subitem.

Agora, basta repetir este processo para cada subitem que você deseja mostrar no menu suspenso.

Quando estiver satisfeito com a configuração do menu, não se esqueça de clicar no botão ‘Salvar menu’ para armazenar suas alterações.

Etapa 4: Publicar seu menu suspenso

Se você estiver editando um menu que já está ativo em seu site, os visitantes verão suas alterações imediatamente.

No entanto, se você estiver criando um novo menu, precisará escolher um local para esse menu.

Cada tema do WordPress tem seus próprios locais de menu, que você pode encontrar na seção ‘Configurações do menu’ no lado direito da tela. Simplesmente marque a caixa ao lado do local que você deseja usar e, em seguida, clique no botão ‘Salvar Menu’.

Alternativamente, você pode adicionar menus de navegação personalizados ao seu tema do WordPress.

Com isso feito, você pode visitar seu site para ver o menu suspenso em ação.

Como Criar um Menu Suspenso Usando o Editor de Site Completo

Se você estiver usando um tema baseado em blocos como o Hestia Pro, então você pode adicionar um menu suspenso a qualquer parte do seu site usando o editor de site completo.

Para começar, basta ir em Temas » Editor no painel do WordPress.

Por padrão, o editor de site completo mostrará o modelo inicial do seu tema.

Para adicionar um menu suspenso a uma parte diferente do seu site, clique em 'Templates' ou 'Patterns'.

O editor agora mostrará uma lista de todos os templates ou partes de template que compõem o seu tema do WordPress.

Simplesmente prossiga e clique na área onde você deseja adicionar o menu suspenso. Por exemplo, se você estiver criando um menu de navegação principal, geralmente desejará selecionar a parte do template do Cabeçalho.

O WordPress agora mostrará uma prévia do modelo ou parte do modelo.

Para editar este modelo, vá em frente e clique no pequeno ícone de lápis.

Com isso feito, clique no ícone azul '+' no canto superior esquerdo.

Na barra de pesquisa que aparece, digite 'Navigation'.

Quando o bloco correto aparecer, arraste e solte-o em seu design.

Agora, simplesmente clique para selecionar esse bloco e você verá todas as diferentes configurações que pode usar para personalizar o bloco de navegação.

Por exemplo, você pode alterar o layout, editar as configurações de exibição, alterar a cor do texto e do fundo e ajustar o tamanho da fonte.

Para adicionar as páginas de nível superior ao seu menu, simplesmente clique no botão '+'.

No pop-up que aparece, comece a digitar o título ou URL da página que você deseja adicionar. Quando a página correta aparecer, clique para adicioná-la ao menu.

Simplesmente repita este processo para adicionar todos os itens de nível superior ao menu suspenso.

Com isso feito, você pode adicionar um submenu a qualquer item pai.

No menu do lado direito, clique no ícone pontilhado ao lado do item pai. Em seguida, selecione ‘Adicionar link de submenu’.

No pop-up que aparece, digite o título ou o URL da página que você deseja mostrar no menu suspenso.

Quando a página correta aparecer, clique para adicioná-la como um item de submenu.

Agora, simplesmente repita essas etapas para todos os itens que você deseja mostrar no menu suspenso.

Quando estiver satisfeito com a configuração do menu, clique em ‘Salvar’ para armazenar suas alterações.

Agora, se você visitar seu site, verá o menu suspenso em ação.

Dicas para Criar Menus Suspensos Interativos

Menus de navegação são importantes porque são o primeiro lugar que os visitantes irão para encontrar conteúdo interessante ou informações específicas.

Usá-los corretamente ajudará os visitantes a se orientarem em seu site. Isso também o ajudará a obter mais conversões e vendas, ao mesmo tempo em que aumenta suas visualizações de página e reduz sua taxa de rejeição.

Com isso em mente, aqui estão algumas dicas para criar menus suspensos úteis e fáceis de usar.

1. Crie Menus Suspensos de Vários Níveis

Neste guia, mostramos como criar uma linha superior e um conjunto de sub-itens. No entanto, você também pode adicionar um sub-item abaixo de outro sub-item para criar menus suspensos de vários níveis.

Isso pode ser útil para sites que têm muito conteúdo ou muitas categorias de conteúdo diferentes.

Por exemplo, se você estiver administrando uma loja online, poderá ter uma categoria ‘Eletrônicos’ e uma subcategoria ‘Notebooks’. No entanto, você também pode ter subcategorias adicionais, como ‘Notebooks Apple’ ou ‘Bolsas e capas para notebooks’.

Neste caso, pode fazer sentido criar um menu suspenso de vários níveis. Para fazer isso, simplesmente arraste qualquer página para baixo de um sub-item e mova-a ligeiramente para a direita.

2. Crie Múltiplos Menus Dropdown

Você pode criar quantos menus dropdown quiser e exibi-los em diferentes áreas do seu site. Por exemplo, você pode criar um menu dropdown mostrando apenas categorias de produtos.

Isso é ótimo para suas páginas de produtos, mas você também pode querer criar um menu dropdown exclusivo para sua página inicial para que os compradores possam encontrar diferentes áreas do seu site, como o formulário de contato e o blog.

Simplesmente crie um novo menu dropdown seguindo o mesmo processo descrito acima e, em seguida, use as configurações de ‘Localização’ para controlar onde este dropdown aparece no seu site.

3. Crie Menus com uma Prévia ao Vivo

Se criar seu menu dropdown no painel ficar muito complicado, você pode mudar para o personalizador do WordPress. Simplesmente vá para Aparência » Personalizar para iniciar o personalizador de temas do WordPress ao vivo.

A partir daqui, clique na aba ‘Menus’ e selecione o menu de navegação. Agora você verá um editor de arrastar e soltar na coluna da esquerda com uma prévia ao vivo do seu site no painel da direita.

Você pode agora trabalhar no seu menu, e quaisquer alterações que fizer aparecerão na prévia ao vivo.

4. Criando um Mega Menu Grande como Dropdown no WordPress

Se você tem muito conteúdo, pode ter dificuldade em organizá-lo de forma organizada usando um menu dropdown padrão.

Em vez disso, você pode exibir a estrutura completa do seu site como um mega menu que aparece apenas quando os usuários passam o mouse sobre o menu principal.

Mega menus são semelhantes a um menu suspenso, mas podem exibir muito mais links, submenus e outros itens. Para instruções detalhadas, consulte nosso tutorial passo a passo sobre como criar um mega menu no WordPress.

4. Exporte seus menus suspensos

Você gerencia vários sites WordPress? Nesse caso, você pode querer usar o mesmo layout e design de menu em todos os seus sites.

O recurso padrão de importação/exportação do WordPress não permite importar e exportar menus isoladamente, mas é possível transferir seus menus usando um plugin.

Para instruções detalhadas passo a passo, consulte nosso guia sobre como importar e exportar menus de navegação no WordPress.

Esperamos que este artigo tenha ajudado você a aprender como criar facilmente um menu suspenso no WordPress. Você também pode consultar nosso guia sobre como adicionar uma barra de pesquisa ao seu menu, ou conferir nossa seleção especializada dos melhores tutoriais para dominar menus de navegação do WordPress.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.