Como Criar um Menu Responsivo para WordPress Pronto para Dispositivos Móveis

Mais da metade de todo o tráfego de sites vem de dispositivos móveis. Se o seu menu de navegação não funciona bem em smartphones e tablets, uma grande parte do seu público pode ter dificuldade em encontrar o que procura no seu site.

Com anos de experiência na criação de sites WordPress, entendemos a importância de tornar seu site responsivo para dispositivos móveis. Na WPBeginner, sempre priorizamos isso, garantindo que nossos sites sejam fáceis de navegar em qualquer dispositivo.

Na verdade, projetamos um menu responsivo para dispositivos móveis que se encaixa perfeitamente em telas menores sem parecer confuso, melhorando a experiência do usuário em smartphones e tablets.

Neste guia, mostraremos como criar facilmente um menu responsivo para WordPress pronto para dispositivos móveis.

Por que Criar um Menu Responsivo para WordPress Pronto para Dispositivos Móveis?

Um menu de navegação bem projetado ajudará os visitantes a encontrar o que procuram em seu site. No entanto, só porque seu menu fica ótimo em computadores desktop, não significa automaticamente que ele ficará bom em telas de celular e tablets também.

Usuários de dispositivos móveis representam cerca de 58% de todo o tráfego da internet. Dito isso, se o seu menu não parecer bom ou não funcionar corretamente em dispositivos móveis, você corre o risco de perder metade do seu público devido à má experiência do usuário.

Isso tornará difícil atingir objetivos importantes, como crescer sua lista de e-mail, obter vendas e expandir seus negócios.

Dito isso, vamos ver como você pode criar um menu responsivo pronto para dispositivos móveis que ficará ótimo em smartphones e tablets. Simplesmente use os links rápidos abaixo para pular diretamente para o método que você deseja usar.

• Método 1: Crie um Menu Deslizante Responsivo Pronto para Dispositivos Móveis
• Método 2: Crie um Menu Responsivo de Tela Cheia Pronto para Dispositivos Móveis
• Bônus: Como Adicionar um Menu Responsivo para Dispositivos Móveis a Landing Pages

Método 1: Crie um Menu Deslizante Responsivo Pronto para Dispositivos Móveis

Um painel deslizante responsivo é um menu de navegação que desliza para a tela quando um visitante toca ou clica em um alternador.

Dessa forma, o menu está sempre ao alcance, mas não ocupa nenhum espaço na tela por padrão.

Isso é particularmente importante, pois smartphones e tablets têm telas muito menores em comparação com computadores desktop.

Se o menu estiver constantemente expandido, um usuário móvel pode acionar seus links acidentalmente usando a tela sensível ao toque de seu dispositivo. Isso torna os painéis deslizantes uma boa opção para um menu responsivo para dispositivos móveis.

A maneira mais fácil de adicionar um painel deslizante pronto para dispositivos móveis é usando o Responsive Menu.

Primeiro, você precisa instalar e ativar o plugin Responsive Menu. Para mais detalhes, veja nosso tutorial sobre como instalar um plugin do WordPress.

Após a ativação, você pode usar o plugin para personalizar qualquer menu do WordPress que você criou anteriormente. Se precisar criar um novo menu, consulte nosso guia para iniciantes sobre como adicionar um menu de navegação no WordPress.

Por outro lado, se o seu tema do WordPress já possui um menu mobile integrado, você precisará saber a classe CSS desse menu para poder ocultá-lo.

Se você pular esta etapa, os usuários de dispositivos móveis verão dois menus sobrepostos em seu site. Para instruções passo a passo, consulte nosso guia sobre como ocultar um menu mobile no WordPress.

Com isso feito, vá para a página Menu Responsivo » Menus na barra lateral de administração do WordPress e clique no botão ‘Criar Novo Menu’.

Agora você verá alguns temas responsivos para dispositivos móveis diferentes que pode usar para o seu menu.

Estamos usando o ‘Tema Padrão’ em nossas imagens, mas você pode usar qualquer tema que desejar. Após tomar sua decisão, clique em ‘Próximo’.

Agora você pode digitar um nome para o menu. Isso é apenas para sua referência, então você pode usar o que quiser.

Com isso feito, clique em ‘Vincular Menu do WordPress’ e escolha o menu que deseja usar.

Como já mencionado, se o seu tema já tiver um menu móvel integrado, você precisará adicionar sua classe CSS no campo ‘Ocultar Menu do Tema’.

Se você fizer o upgrade para o plugin premium, obterá algumas configurações adicionais. Por exemplo, usuários Pro podem ocultar o menu em páginas ou dispositivos específicos.

Quando estiver satisfeito com a configuração do menu, clique em ‘Criar Menu’.

Agora você verá uma prévia do seu site WordPress no lado direito da tela e algumas configurações no lado esquerdo.

Para ver como seu site fica em dispositivos móveis, clique no ícone de celular ou tablet na parte inferior esquerda da tela.

Para personalizar a aparência e o comportamento do menu em dispositivos móveis, selecione ‘Menu Móvel’.

Em seguida, clique em ‘Contêiner’.

Aqui, você encontrará muitas configurações diferentes.

À medida que você faz alterações, a prévia ao vivo geralmente é atualizada automaticamente. Com isso em mente, é uma boa ideia expandir o menu para que você possa monitorar como seu menu móvel ficará. Para fazer isso, basta clicar no botão de alternância do menu.

Por padrão, o plugin adiciona um título e algum texto ‘Adicionar mais conteúdo…’

Você pode substituir isso por sua própria mensagem ou até mesmo remover o texto completamente. Para editar o título, clique para expandir a seção ‘Título’.

Agora você pode digitar sua própria mensagem no campo 'Texto do Título'.

Você também pode adicionar um link ao título ou adicionar fontes de ícones e imagens.

Para personalizar a aparência do título, clique na aba 'Estilos'.

Aqui, você pode alterar a cor de fundo, a cor do texto, o tamanho da fonte e mais.

Se você não quiser exibir nenhum texto de título, clique para desativar o alternador ao lado de 'Título'.

Se o título não for essencial, removê-lo criará mais espaço para os links e outros conteúdos em seu menu de navegação móvel.

Para substituir o texto 'Adicionar mais conteúdo aqui...' por sua própria mensagem, clique para expandir a área 'Conteúdo Adicional'.

Agora você pode digitar seu próprio texto, alterar a cor do texto, alterar o alinhamento do texto e mais, usando as configurações no menu esquerdo.

Para excluir o texto completamente, basta clicar para desativar o alternador.

Mais uma vez, isso pode criar mais espaço para o restante do conteúdo do menu. Isso é particularmente útil em smartphones e tablets, que geralmente têm telas menores.

Por padrão, o Menu Responsivo exibirá todos os seus itens de menu como uma única lista. No entanto, você pode preferir exibir esses links em várias colunas.

Isso pode funcionar bem se os rótulos do seu menu forem mais curtos, pois permite exibir mais itens em um espaço menor sem que o menu pareça confuso.

Para experimentar diferentes layouts de coluna, clique para expandir a seção ‘Menu’.

Agora você pode abrir o menu suspenso ‘Colunas do contêiner do menu’ e escolher o número de colunas que deseja usar.

Neste ponto, você pode ver um texto de ‘Atualização Necessária’. Se você vir esta mensagem, clique nela para atualizar a visualização ao vivo com as novas configurações de coluna.

Por padrão, o plugin também adiciona uma barra de pesquisa ao seu menu do WordPress. Isso pode ajudar os visitantes a encontrar conteúdo interessante, mas também ocupa um espaço precioso na tela.

Se preferir, você pode remover a barra de pesquisa para usuários de dispositivos móveis desativando o alternador ao lado de ‘Pesquisar’.

Existem muitas outras configurações que você pode configurar, então você pode querer passar algum tempo examinando as outras opções. No entanto, isso é o suficiente para criar um menu bem projetado e pronto para dispositivos móveis.

Quando estiver satisfeito com a configuração do menu de navegação, clique em ‘Atualizar’.

Agora, simplesmente visite seu blog WordPress usando um dispositivo móvel para ver o novo menu em ação. Você também pode visualizar a versão móvel do seu site WordPress a partir do seu desktop.

Método 2: Crie um Menu Responsivo de Tela Cheia Pronto para Dispositivos Móveis

Outra opção é adicionar um menu responsivo de tela cheia. Este é um menu que se ajusta automaticamente a diferentes tamanhos de tela, para que o menu de navegação sempre fique bom, independentemente do dispositivo que o visitante esteja usando.

Como o menu ocupa todo o espaço disponível, é mais fácil navegar em smartphones e tablets, não importa quão pequena seja a tela.

A maneira mais fácil de criar um menu em tela cheia é usando o FullScreen Menu. Este plugin permite que você crie um menu em tela cheia apenas para dispositivos móveis, ou você pode exibir o mesmo menu em smartphones, tablets e computadores desktop, para que todos os visitantes tenham a mesma experiência.

A primeira coisa que você precisa fazer é instalar e ativar o plugin FullScreen Menu. Você pode conferir nosso guia passo a passo sobre como instalar um plugin WordPress para mais detalhes.

Após a ativação, visite a página Fullscreen Menu Options no menu do WordPress e marque a seguinte caixa: ‘Activate Animated Fullscreen Menu.’

Também recomendamos marcar a caixa ‘Show the menu only for Admin users’. Isso permite que você veja as alterações enquanto configura o menu, mas os visitantes não verão o menu móvel até que você o publique.

Por padrão, o plugin exibirá o menu em tela cheia em todos os dispositivos. Se você quiser exibir o menu em tela cheia apenas em smartphones e tablets, marque a caixa ao lado de ‘Mobile only.’

Depois disso, você pode ajustar a aparência do menu clicando na aba ‘Design / Appearance’.

Aqui, você pode escolher as cores, a fonte e as configurações de animação para o menu em tela cheia.

Ao fazer essas alterações, esteja ciente de que ‘Initial Background Menu’ é o ícone de alternância do menu. Enquanto isso, ‘Opened Background Menu’ é a cor do menu móvel expandido em tela cheia.

Após escolher as cores do menu, role até a seção ‘Menu Appearance’. Aqui você pode alterar a cor da fonte do menu, a família da fonte e o tamanho da fonte.

Apenas esteja ciente de que carregar fontes adicionais pode afetar o desempenho e a velocidade do seu site WordPress. Esta nem sempre é uma boa escolha para dispositivos móveis, que geralmente têm menos poder de processamento em comparação com computadores desktop. Alguns visitantes também podem ter uma conexão de internet móvel ruim, o que fará com que seu site carregue ainda mais lentamente.

Com isso feito, role até ‘Configurações de Animação’.

Para começar, você pode escolher como o menu se expandirá quando um visitante clicar no ícone de alternância. Simplesmente abra o menu suspenso ‘Tipo de Animação’ e escolha uma opção da lista, como De Cima para Baixo ou Da Esquerda para a Direita.

Quando estiver satisfeito com o layout do menu, clique na aba ‘Conteúdo do Menu’ para adicionar conteúdo.

Aqui, prossiga e abra o menu suspenso ‘Selecionar Menu’ e escolha o menu que você deseja exibir em tela cheia.

Se você ainda não criou um menu de navegação, confira nosso guia sobre como adicionar menus de navegação no WordPress.

Se você quiser mostrar conteúdo adicional no menu, poderá adicioná-lo na caixa ‘HTML Grátis / Shortcodes’. Isso funciona como um editor de mini página, para que você possa digitar texto, alterar a formatação, adicionar marcadores e listas numeradas, e muito mais.

Há também uma caixa de seleção que adicionará um link para sua página de política de privacidade. 

Em seguida, você pode gostar de adicionar ícones de mídia social ao seu menu do WordPress. Esses ícones aparecerão em uma linha na parte inferior do menu em tela cheia.

Para adicionar esses ícones, basta clicar para expandir a caixa ‘Ícone Social 1’.

Agora você pode digitar um título para o ícone, como ‘Facebook’.

Depois disso, clique na seta ao lado de ‘Ícone Social’ e escolha o ícone que você deseja mostrar aos visitantes móveis.

Finalmente, digite o endereço que você deseja usar no campo ‘URL Social’.

Para adicionar mais ícones, basta clicar no botão ‘Adicionar Outro Ícone’.

Por fim, você pode querer adicionar uma barra de busca do WordPress para ajudar os visitantes a encontrar o que procuram. Para fazer isso, basta marcar a caixa ao lado de ‘Adicionar Barra de Busca’.

Por padrão, o plugin exibirá uma mensagem ‘Pesquisar algo…’. No entanto, você pode substituí-la por sua própria mensagem personalizada digitando no campo ‘Placeholder de entrada de pesquisa’.

Por exemplo, se você administra uma loja WooCommerce, então você pode querer usar textos como ‘Começar a comprar’ ou ‘Pesquisar produtos’.

Quando estiver satisfeito com a configuração do menu, clique no botão ‘Salvar Alterações’.

Agora, basta visitar seu site usando um dispositivo móvel para ver o menu em tela cheia em ação.

Você também pode pré-visualizar a versão mobile do seu site usando o personalizador de temas do WordPress.

Bônus: Como Adicionar um Menu Responsivo para Dispositivos Móveis a Landing Pages

Se você está criando uma landing page ou página de vendas, então você vai querer que o design fique tão bom em dispositivos móveis quanto em desktops.

Com isso em mente, recomendamos criar a página usando SeedProd. É o melhor construtor de páginas do WordPress e vem com mais de 300 modelos projetados profissionalmente.

Após criar um design usando o SeedProd, você pode adicionar um menu responsivo para dispositivos móveis à página usando o bloco Nav Menu pronto do SeedProd. Este bloco permite que você crie menus separados para dispositivos móveis e desktops.

Dessa forma, você pode usar um layout diferente e até mesmo mostrar links diferentes dependendo do dispositivo do usuário.

Para saber mais, consulte nosso guia sobre como adicionar menus de navegação personalizados no WordPress.

Após adicionar o bloco Nav ao seu design, basta clicar na aba ‘Avançado’.

Aqui, clique para expandir a seção ‘Visibilidade do Dispositivo’.

Depois disso, clique no alternador ‘Ocultar no Desktop’ para ativá-lo. Agora, este menu aparecerá apenas em dispositivos móveis.

Você pode adicionar links e alterar o layout do menu usando as configurações no menu do lado esquerdo.

Esperamos que este artigo tenha ajudado você a aprender como criar um menu responsivo do WordPress pronto para dispositivos móveis. Você também pode querer ver nosso guia para iniciantes sobre como adicionar um redimensionador de fonte no WordPress e nossas dicas de especialistas sobre formas de criar um site WordPress amigável para dispositivos móveis.

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.