Como criar um menu de barra lateral dobrável no WordPress (a maneira mais fácil)

Um menu de barra lateral dobrável é uma ótima maneira de fornecer acesso fácil a links e conteúdos importantes e, ao mesmo tempo, manter 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. É perfeito para sites grandes, lojas de comércio eletrônico ou qualquer site com um layout mais complexo.

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

O que é um menu de barra lateral dobrável? (E quando usá-lo)

Os menus mais fáceis de usar fornecem acesso fácil a todos os links de que os visitantes precisam. No entanto, isso pode ser complicado para sites do WordPress que tenham muitas páginas ou um layout mais complexo.

Pense em uma grande loja de comércio eletrônico que tenha muitas categorias e subcategorias de produtos, como a Amazon.

Exibir todas as categorias de produtos em um menu padrão não seria uma boa ideia. Os compradores provavelmente precisariam percorrer o menu para encontrar a categoria na qual estão interessados.

É aí que entram os menus recolhíveis. Esses menus organizam o conteúdo em uma abordagem “pai-filho”. Isso significa que, se o visitante clicar em um item pai em um menu dobrável, ele será expandido para exibir todo o conteúdo filho desse item pai.

Um exemplo disso é a agência de notícias Guardian, que usa um menu dobrável em seu site móvel.

Os menus da barra lateral dobráveis às vezes também são chamados de menus expansíveis. Isso ocorre porque suas diferentes seções se expandem quando um visitante clica nelas.

Por padrão, os menus recolhíveis ocultam muito conteúdo e complexidade dos visitantes. Isso é muito mais fácil de usar do que percorrer uma longa lista de categorias e subcategorias em seu blog do WordPress.

Dito isso, vamos dar uma olhada em como você pode criar facilmente um menu de barra lateral dobrável no seu site WordPress.

Tutorial em vídeo

Subscribe to WPBeginner

Se você preferir instruções por escrito, continue lendo.

Como criar um menu de barra lateral dobrável no WordPress

Você pode criar um menu de barra lateral dobrável no WordPress usando o plug-in Bellows Accordion Menu.

O Bellows Accordion Menu oferece um prático shortcode para colocar seu menu dobrável em qualquer página, publicação ou área de widget, inclusive na barra lateral.

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

Após a ativação, acesse a página Appearance ” Menus no painel do WordPress.

Para começar, digite um nome para seu menu no campo “Menu Name” (Nome do menu). Observe que os visitantes do seu site não verão esse nome, pois ele é apenas para sua própria referência.

Em seguida, você pode clicar no botão “Create Menu” (Criar menu).

Em seguida, escolha as páginas que você deseja adicionar ao menu da barra lateral dobrável. Por padrão, o WordPress exibe apenas suas páginas mais recentes.

Se você quiser ver uma lista de todas as páginas do seu site, clique na guia “View All” (Exibir tudo).

Como alternativa, você pode clicar em “Select All” (Selecionar tudo). Isso adicionará todas as suas páginas ao menu recolhível.

Quando estiver satisfeito com sua seleção, clique no botão “Add to Menu” (Adicionar ao menu). Você também pode selecionar posts e categorias de blog ou adicionar links personalizados. Para obter mais detalhes, consulte nosso guia sobre como adicionar um menu de navegação no WordPress.

Depois de adicionar todas as suas diferentes páginas da Web ao menu, você pode movê-las arrastando-as e soltando-as. Isso alterará a ordem em que essas páginas aparecerão no menu dobrável.

Os menus recolhíveis têm tudo a ver com relacionamentos pai-filho.

Quando um visitante clicar em um item pai em seu menu dobrável, ele se expandirá para revelar todo o conteúdo filho.

Para criar esse relacionamento, basta arrastar e soltar para organizar todas as páginas de seu filho abaixo da página principal.

Em seguida, pegue cada criança e arraste-a um pouco para a direita. Você pode então liberar essa página. Isso recuará o item e o transformará em uma página filha.

Não se esqueça de clicar no botão “Save Menu” quando terminar.

Agora, queremos adicionar esse menu dobrável à barra lateral do WordPress. Para fazer isso, usaremos alguns códigos de acesso que o Bellows Accordion cria automaticamente.

Para obter o shortcode, vá para a página Appearance ” Bellows Menu no painel do WordPress. Se ela ainda não estiver selecionada, certifique-se de selecionar a guia “Show All” (Mostrar tudo).

Agora você pode clicar na caixa Shortcode, que deverá destacar todo o código. Agora, copie esse código usando o atalho de teclado Command + c ou Ctrl + c.

A próxima etapa é colar esse shortcode em um widget, portanto, vá até a página Appearance ” Widgets na área de administração.

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

Depois de encontrar a área da barra lateral, dê um clique nela. Essa seção será expandida.

Para adicionar um bloco, clique no ícone + e comece a digitar “Shortcode”. Quando aparecer, selecione o bloco “Shortcode”.

Agora, basta colar seu shortcode de menu dobrável nesse bloco. Para publicar seu menu, você precisará clicar no botão “Update” (Atualizar) na parte superior da tela.

Agora, quando visitar seu site, você verá um novo menu de barra lateral dobrável.

O plug-in Bellows Accordion também facilita muito a personalização desse menu padrão. Por exemplo, você pode alterar o esquema de cores para refletir melhor a marca do seu site.

Se você quiser ajustar o menu padrão, basta acessar a página Appearance ” Bellows Menu no painel do WordPress.

Esse menu tem todas as configurações necessárias para personalizar o menu dobrável. Há muitas configurações a serem exploradas. No entanto, talvez você queira começar acessando Main Configuration ” Basic Configuration.

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

Para alterar o alinhamento e a largura do menu, clique na guia “Layout & Position” (Layout e posição).

Se preferir visualizar suas alterações em tempo real, você poderá editar o menu da barra lateral dobrável no Personalizador do WordPress.

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

Aqui, você encontrará várias configurações diferentes para sua barra lateral. Isso inclui alterar a largura, o alinhamento e a cor do menu dobrável da barra lateral.

Bônus: Truques da barra lateral do WordPress para obter o máximo de resultados

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

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

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

Você só precisa criar um formulário e adicioná-lo à barra lateral usando o bloco WPForms no menu de blocos.

Para obter mais detalhes, consulte nosso tutorial sobre como criar um formulário de contato no WordPress.

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

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

Esperamos que este artigo tenha ajudado você a aprender como criar um menu de barra lateral recolhível no WordPress. Para obter 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 WordPress e os widgets mais úteis do WordPress para o seu site.

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