Como Criar um Menu Lateral Colapsável no WordPress (O Jeito Fácil)

Um menu lateral recolhível é uma ótima maneira de fornecer acesso fácil a links e conteúdos importantes, mantendo o design do seu site limpo e organizado.

Esse recurso permite que os usuários expandam e recolham o menu, dando-lhes controle sobre a experiência de navegação.

Notamos que muitos sites grandes, lojas de comércio eletrônico e sites com layouts mais complexos o utilizam para facilitar a navegação.

Neste artigo, mostraremos como criar facilmente um menu lateral recolhível no WordPress.

O Que É um Menu Lateral Recolhível? (E Quando Usar Um)

Um menu colapsável na barra lateral (ou menu expansível) é uma lista de navegação que oculta subitens até que um visitante clique para revelá-los. Ele organiza os links em uma estrutura de ‘pai-filho’, mantendo o design do seu site limpo.

Frequentemente recomendamos o uso de menus colapsáveis para sites grandes ou lojas de comércio eletrônico. Veja por que eles são eficazes:

• Organize Layouts Complexos: Eles ajudam a organizar centenas de categorias ou páginas sem sobrecarregar o usuário.
• Economize Espaço na Tela: Ao ocultar os itens filhos, você mantém a barra lateral curta e organizada.
• Melhore a Experiência Mobile: Eles evitam que usuários de dispositivos móveis tenham que rolar por listas intermináveis de links.

Por exemplo, o portal de notícias The Guardian usa um menu colapsável em seu site móvel para gerenciar suas muitas categorias de notícias.

Agora, vamos ver como você pode criar facilmente um menu colapsável na barra lateral do seu site WordPress.

Como Criar um Menu Lateral Colapsável no WordPress

Você pode criar um menu lateral recolhível no WordPress usando o plugin Bellows Accordion Menu.

Ele fornece um atalho prático que permite colocar seu menu recolhível em qualquer página, post ou área de widget, incluindo sua barra lateral.

Passo 1: Instale e Ative o Plugin Bellows Accordion

Primeiro, você precisará instalar e ativar o plugin Bellows Accordion Menu. Se precisar de ajuda, consulte nosso guia para iniciantes sobre como instalar um plugin WordPress.

Passo 2: Crie um Novo Menu

Após a ativação, visite a página Aparência » Menus no seu painel do WordPress. 

Digite um nome para o seu menu no campo ‘Nome do Menu’. Em seguida, clique no botão ‘Criar Menu’.

Passo 3: Adicione e Organize os Itens do Menu

Em seguida, escolha as páginas que deseja adicionar da coluna da esquerda e clique em ‘Adicionar ao Menu’.

Se você quiser ver uma lista de todas as páginas do seu site, clique na aba ‘Ver Tudo’. Para mais detalhes, consulte nosso guia sobre como adicionar um menu de navegação no WordPress.

Para criar o efeito recolhível, você precisa organizar os itens em uma relação pai-filho. Simplesmente arraste um item de página ligeiramente para a direita, abaixo de um item pai.

Arraste-o para a direita até ver o contorno tracejado mudar para dentro. Isso confirma que o item agora é um subitem, que ficará oculto até que o pai seja clicado.

Agora, quando um visitante clicar em um item pai em seu menu recolhível, ele se expandirá para revelar todo o conteúdo filho.

Não se esqueça de clicar no botão 'Salvar Menu' quando terminar.

Passo 4: Obtenha o Atalho do Menu

Agora, queremos adicionar este menu recolhível à barra lateral do WordPress. Para fazer isso, usaremos alguns shortcodes que o Bellows Accordion cria automaticamente. 

Para obter o shortcode, vá para a página Aparência » Menu Bellows no painel do WordPress. Se ainda não estiver selecionada, certifique-se de selecionar a guia 'Mostrar Tudo'.

Agora você pode clicar na caixa de Atalho, que deve destacar todo o código. Agora, copie este código usando o atalho de teclado Command + C ou Ctrl + C. 

Passo 5: Adicione o Menu à Sua Barra Lateral

Agora precisamos adicionar o menu ao layout do seu site. Vá para a página Aparência » Widgets na área de administração do WordPress.

Isso exibirá todas as áreas de widget em seu tema atual. As opções que você vê podem variar, mas a maioria dos temas modernos do WordPress apresentam uma barra lateral.

Encontre a área de widget da barra lateral e clique no ícone ‘+’ para adicionar um novo bloco.

Procure por ‘Shortcode’ e selecione o bloco.

Cole seu shortcode copiado no bloco e clique em ‘Atualizar’. Ao visitar seu site, você deverá ver seu novo menu recolhível.

Em dispositivos móveis, esta barra lateral geralmente aparecerá na parte inferior da página, onde o recurso recolhível ajuda a economizar valioso espaço de rolagem vertical.

Etapa 6: Personalize seu Menu Recolhível

O plugin Bellows Accordion também torna super fácil personalizar este menu padrão. Por exemplo, você pode alterar seu esquema de cores para refletir melhor a marca do seu site. 

Se você quiser ajustar o menu padrão, basta ir para a página Aparência » Bellows Menu no seu painel do WordPress. 

Este menu tem todas as configurações que você precisa para personalizar seu menu recolhível. Há muitas configurações para explorar. No entanto, você pode querer começar indo para Configuração Principal » Configuração Básica.

Aqui, você pode alternar entre várias cores de menu diferentes. Você também pode escolher se os visitantes podem expandir vários submenus ao mesmo tempo usando as configurações de 'Accordion Folding'. 

Para alterar o alinhamento e a largura do menu, clique na aba 'Layout & Posição'.

Se você preferir visualizar suas alterações em tempo real, pode editar o menu lateral recolhível no Personalizador do WordPress.

Para fazer isso, vá para a página Aparência » Personalizar na área de administração e selecione a aba 'Bellows' na coluna da esquerda.

Aqui, você encontrará muitas configurações diferentes para sua barra lateral. Isso inclui alterar sua largura, alinhamento e a cor do seu menu lateral recolhível. 

Bônus: Truques de Barra Lateral do WordPress para Obter Resultados Máximos

Depois de criar um menu lateral recolhível, você pode usar outras dicas para gerar mais leads com a ajuda da sua barra lateral.

Por exemplo, você pode tornar seu widget da barra lateral fixo para que ele fique visível na página mesmo quando o usuário rola para baixo.

Além disso, você pode adicionar um formulário de contato ou um formulário de inscrição por e-mail em sua barra lateral para construir sua lista de e-mails. Para fazer isso, você pode usar o WPForms, que é o melhor plugin de formulário de contato do mercado.

No WPBeginner, nós o usamos para criar formulários de contato e pesquisas anuais, e nós o adoramos. Para saber mais, veja nossa análise completa do WPForms.

Você simplesmente precisará criar um formulário e, em seguida, adicioná-lo à sua barra lateral usando o bloco WPForms no menu de blocos.

Para mais detalhes, você pode ver nosso tutorial sobre como criar um formulário de contato no WordPress.

Além disso, você pode exibir seus posts mais populares na barra lateral, adicionar imagens, mostrar ícones de mídias sociais e exibir prova social. Isso incentivará os usuários a explorar mais seu site e aumentará suas conversões.

Para mais dicas, você pode ver nossa lista dos melhores truques de barra lateral do WordPress para obter resultados máximos.

Tutorial em Vídeo

Se você não prefere instruções escritas, então apenas assista ao nosso tutorial em vídeo.

Inscreva-se no WPBeginner

Perguntas Frequentes sobre Menus de Barra Lateral Recolhíveis no WordPress

Aqui estão algumas perguntas que nossos leitores fizeram com frequência antes de adicionar um menu de barra lateral recolhível em seus sites:

Como recolher um menu no WordPress?

Você pode recolher um menu usando um plugin como o Bellows Accordion Menu. Por padrão, os menus do WordPress não possuem esse recurso em telas de desktop. Um plugin adiciona o código necessário para que os itens se expandam e se ocultem ao serem clicados.

Como adicionar uma seção recolhível no WordPress?

A maneira mais fácil é usar o bloco padrão do WordPress 'Detalhes'. Este bloco permite que você envolva o conteúdo dentro de uma linha de resumo clicável. Para estilos mais avançados dentro de seus posts, você pode usar um plugin de acordeão dedicado.

Como criar um menu suspenso no WordPress?

Você pode criar um menu suspenso acessando Aparência » Menus no seu painel. Simplesmente arraste um item de menu um pouco para a direita, abaixo de um link pai. Essa indentação informa ao WordPress para exibir esse item dentro de uma lista suspensa.

Para mais detalhes, confira nosso tutorial sobre como criar um menu suspenso no WordPress.

Como colocar elementos lado a lado no WordPress?

Você pode colocar elementos lado a lado usando o bloco Colunas. No editor de blocos, selecione 'Colunas' e escolha seu layout preferido. Em seguida, simplesmente adicione seu texto ou imagens em cada coluna.

O que é o plugin de bloco de acordeão para WordPress?

Um plugin de bloco de acordeão permite que você adicione seções de conteúdo recolhíveis aos seus posts. Ele ajuda a organizar conteúdo longo, ocultando texto sob títulos. Os usuários simplesmente clicam no título para ler as informações de que precisam.

Se você quiser adicionar acordeões ao seu site, confira nossas principais opções de melhores plugins de acordeão WordPress.

Esperamos que este artigo tenha ajudado você a aprender como criar um menu de barra lateral recolhível no WordPress. Para mais dicas sobre como editar o design do seu site WordPress, você também pode consultar nossos guias sobre como personalizar o cabeçalho do seu WordPress e os widgets mais úteis do WordPress para o seu site. 

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.