Como criar um menu do WordPress responsivo e pronto para dispositivos móveis

Mais da metade de todo o tráfego do site vem de dispositivos móveis. Se o seu menu de navegação não funcionar bem em smartphones e tablets, uma grande parte do seu público poderá ter dificuldades para encontrar o caminho do seu site.

Com anos de experiência na criação de sites WordPress, entendemos a importância de tornar seu site responsivo a 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 do WordPress responsivo e pronto para dispositivos móveis.

Por que criar um menu WordPress responsivo pronto para dispositivos móveis?

Um menu de navegação bem projetado ajudará os visitantes a se orientarem em seu site. Entretanto, o fato de o menu ter uma boa aparência em computadores desktop não significa automaticamente que ele também terá uma boa aparência em telas de celulares e tablets.

Os 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 tiver boa aparência 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 dificultará o alcance de metas importantes, como aumentar sua lista de e-mails, 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. Basta usar os links rápidos abaixo para ir direto ao método que você deseja usar.

Método 1: Criar um menu de painel deslizante responsivo pronto para dispositivos móveis

Um painel de slides responsivo é um menu de navegação que desliza na tela quando um visitante toca ou clica em um botão de alternância.

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

Isso é particularmente importante porque os smartphones e tablets têm telas muito menores em comparação com os computadores de mesa.

Se o menu for constantemente expandido, um usuário móvel poderá acionar seus links por acidente usando a tela sensível ao toque do 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 de slides pronto para dispositivos móveis é usar o Responsive Menu.

Primeiro, você precisa instalar e ativar o plug-in Responsive Menu. Para obter mais detalhes, consulte nosso tutorial sobre como instalar um plug-in do WordPress.

Após a ativação, você pode usar o plug-in para personalizar qualquer menu do WordPress que tenha criado anteriormente. Se você 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á tiver um menu móvel incorporado, você precisará conhecer a classe CSS desse menu para poder ocultá-lo.

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

Feito isso, vá para a página Responsive Menu ” Menus na barra lateral de administração do WordPress e clique no botão “Create New Menu” (Criar novo menu).

Agora você verá alguns temas responsivos para dispositivos móveis diferentes que podem ser usados no menu.

Estamos usando o “Default Theme” (Tema padrão) em nossas imagens, mas você pode usar qualquer tema que desejar. Depois de tomar sua decisão, clique em “Next”.

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

Feito isso, clique em “Link WordPress Menu” e escolha o menu que você deseja usar.

Como já mencionado, se o seu tema já tiver um menu móvel integrado, você precisará adicionar a classe CSS ao campo “Hide Theme Menu”.

Se você fizer upgrade para o plug-in premium, terá algumas configurações adicionais. Por exemplo, os usuários Pro podem ocultar o menu em determinadas páginas ou dispositivos.

Quando você estiver satisfeito com a configuração do menu, clique em “Create Menu”.

Agora, você verá uma visualização do seu site WordPress à direita da tela e algumas configurações à esquerda.

Para ver a aparência do seu site no celular, clique no ícone do celular ou do tablet na parte inferior esquerda da tela.

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

Em seguida, clique em “Container”.

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

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

Por padrão, o plug-in adiciona um título e um texto do tipo “Adicionar mais conteúdo…”.

Você pode substituí-lo 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 “Title Text” (Texto do título).

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

Para personalizar a aparência do título, clique na guia “Styles” (Estilos).

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

Se você não quiser mostrar nenhum texto de título, clique para desativar o botão de alternância ao lado de “Title” (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 “Add more content here….” por sua própria mensagem, clique para expandir a área “Additional Content”.

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

Para excluir completamente o texto, basta clicar para desativar o botão de alternância.

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 normalmente têm telas menores.

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

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

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

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

Nesse momento, você poderá ver o texto “Update Required” (Atualização necessária). Se você vir essa mensagem, clique nela para atualizar a visualização ao vivo com suas novas configurações de coluna.

Por padrão, o plug-in também adiciona uma barra de pesquisa ao 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, remova a barra de pesquisa para usuários de dispositivos móveis desativando o botão de alternância ao lado de “Pesquisar”.

Há muitas outras configurações que podem ser definidas, portanto, talvez você queira passar algum tempo examinando as outras opções. No entanto, isso é suficiente para criar um menu bem projetado e pronto para dispositivos móveis.

Quando você estiver satisfeito com a configuração do menu de navegação, clique em “Update” (Atualizar).

Agora, basta acessar seu blog do 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 do WordPress em seu desktop.

Método 2: Criar um menu responsivo de tela cheia pronto para dispositivos móveis

Outra opção é adicionar um menu responsivo de tela cheia. Esse é um menu que se ajusta automaticamente a diferentes tamanhos de tela, de modo que o menu de navegação sempre terá boa aparência, independentemente do dispositivo que o visitante estiver usando.

Como o menu ocupa todo o espaço disponível, é mais fácil navegar em smartphones e tablets, independentemente do tamanho da tela.

A maneira mais fácil de criar um menu de tela cheia é usando o FullScreen Menu. Esse plug-in permite criar um menu de tela cheia somente para dispositivos móveis ou exibir o mesmo menu em smartphones, tablets e computadores de mesa, para que todos os visitantes tenham a mesma experiência.

A primeira coisa que você precisa fazer é instalar e ativar o plug-in FullScreen Menu. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Após a ativação, visite a página Fullscreen Menu Options (Opções de menu em tela cheia) no menu do WordPress e marque a seguinte caixa: ‘Activate Animated Fullscreen Menu’.

Também recomendamos marcar a caixa “Mostrar o menu somente para usuários administradores”. Isso permite que você veja as alterações enquanto estiver configurando o menu, mas os visitantes não verão o menu móvel até que ele seja ativado.

Por padrão, o plug-in mostrará o menu em tela cheia em todos os dispositivos. Se quiser mostrar o menu de tela cheia somente em smartphones e tablets, marque a caixa ao lado de “Mobile only”.

Depois disso, você pode ajustar a aparência do menu clicando na guia “Design / Appearance”.

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

Ao fazer essas alterações, lembre-se de que “Initial Background Menu” é o ícone de alternância do menu. Enquanto isso, “Opened Background Menu” é a cor do menu móvel expandido e em tela cheia.

Depois de escolher as cores do menu, vá até a seção “Menu Appearance” (Aparência do menu). Aqui você pode alterar a cor da fonte do menu, a família da fonte e o tamanho da fonte.

Lembre-se apenas de que o carregamento de fontes adicionais pode afetar o desempenho e a velocidade do site WordPress. Essa nem sempre é uma boa opção para dispositivos móveis, que normalmente têm menos capacidade de processamento em comparação com computadores de mesa. Alguns visitantes também podem ter uma conexão de internet móvel ruim, o que fará com que seu site seja carregado ainda mais lentamente.

Feito isso, vá até ‘Animation Settings’ (Configurações de animação).

Para começar, você pode escolher como o menu será expandido quando um visitante clicar no ícone de alternância. Basta abrir o menu suspenso “Animation Type” (Tipo de animação) e escolher 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 guia “Menu Content” (Conteúdo do menu) para adicionar conteúdo.

Aqui, abra a lista suspensa “Select Menu” e escolha o menu que deseja exibir em tela cheia.

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

Se quiser mostrar conteúdo adicional no menu, você poderá adicioná-lo na caixa “HTML gratuito / códigos curtos”. Isso funciona como um mini-editor de página para que você possa digitar o 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, talvez queira adicionar ícones de mídia social ao seu menu do WordPress. Esses ícones aparecerão em uma linha na parte inferior do menu de tela cheia.

Para adicionar esses ícones, basta clicar para expandir a caixa “Social Icon 1”.

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

Depois disso, clique na seta ao lado de “Social Icon” (Ícone social) e escolha o ícone que você deseja mostrar aos visitantes móveis.

Por fim, digite o endereço que você deseja usar no campo “Social URL”.

Para adicionar mais ícones, basta clicar no botão “Add Another Icon” (Adicionar outro ícone).

Por fim, talvez você queira adicionar uma barra de pesquisa do WordPress para ajudar os visitantes a encontrar o que estão procurando. Para fazer isso, basta marcar a caixa ao lado de “Add Search Bar” (Adicionar barra de pesquisa).

Por padrão, o plug-in mostrará uma mensagem “Search something…” (Pesquisar algo…). No entanto, você pode substituí-la por sua própria mensagem personalizada digitando no campo “Search input placeholder”.

Por exemplo, se você tiver uma loja WooCommerce, talvez queira usar um texto como “Start shopping” (Iniciar compras) ou “Search for products” (Pesquisar produtos).

Quando estiver satisfeito com a configuração do menu, clique no botão “Save Changes” (Salvar alterações).

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

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

Bônus: Como adicionar um menu responsivo para dispositivos móveis às páginas de destino

Se estiver criando uma página de destino ou uma página de vendas, o design deverá ter uma aparência tão boa em dispositivos móveis quanto em computadores.

Com isso em mente, recomendamos criar a página usando o SeedProd. Ele é o melhor construtor de páginas do WordPress e vem com mais de 300 modelos criados por profissionais.

Depois de 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. Esse bloco permite que você crie menus separados para dispositivos de menu 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.

Depois de adicionar o bloco Nav ao seu design, basta clicar na guia “Advanced” (Avançado).

Aqui, clique para expandir a seção “Device Visibility” (Visibilidade do dispositivo).

Depois disso, clique no botão de alternância “Hide on Desktop” (Ocultar na área de trabalho) para ativá-lo. Agora, esse menu só aparecerá em dispositivos móveis.

Agora você pode adicionar links e alterar o layout do menu usando as configurações no menu à esquerda.

Esperamos que este artigo tenha ajudado você a aprender como criar um menu do WordPress responsivo e pronto para dispositivos móveis. Talvez você também queira ver nosso guia para iniciantes sobre como adicionar um redimensionador de fontes no WordPress e nossas dicas de especialistas sobre maneiras de criar um site WordPress compatível com dispositivos móveis.

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.