A maioria dos menus móveis do WordPress parece boa até que você os verifique no seu telefone. Os links estão amontoados, o ícone do hambúrguer não abre, ou você está exibindo um menu de desktop de 10 itens em uma tela pequena.
Neste guia, mostrarei como corrigir isso. Você aprenderá como habilitar o ícone do hambúrguer, controlar o que aparece no celular e configurar um menu separado para telas pequenas. Também abordo os problemas mais comuns de menu móvel.
Como Editar o Menu Mobile no WordPress
Precisa alterar quais links aparecem no seu menu? Veja como editar seu menu do WordPress. Quer alterar o estilo ou as cores do seu menu? Veja como personalizar seu menu do WordPress.
O primeiro método neste guia usa o SeedProd para controle visual completo (SeedProd Pro necessário). O segundo usa o plugin gratuito Responsive Menu. Clique abaixo para pular para o seu método:
Personalize Menus Mobile com o Construtor de Sites SeedProd
Eu uso o SeedProd no meu próprio site, e os controles de visibilidade móvel são um dos recursos em que mais confio. Para começar, mostrarei como usar o SeedProd para personalizar e editar menus móveis visualmente, sem código.
Ele vem com centenas de modelos pré-fabricados, uma interface de arrastar e soltar e inúmeros elementos de design para facilitar a personalização de qualquer página do WordPress. Se o seu menu estiver no cabeçalho, rodapé ou barra lateral do WordPress, você pode editá-lo facilmente com o construtor do SeedProd.
Além disso, as poderosas opções de visibilidade deste plugin permitem ocultar elementos de design específicos em telas móveis ou de desktop. Como resultado, você pode adaptar seus menus de navegação a diferentes tamanhos de tela.
Passo 1. Instale e Ative o SeedProd
Para começar, você precisará baixar o plugin do site do SeedProd. Embora o SeedProd tenha uma versão gratuita, usaremos o SeedProd Pro por seus recursos de criação de temas do WordPress.
Observação: SeedProd Pro é necessário para o Theme Builder. Ao ativar o tema SeedProd, ele substitui seu tema ativo atual. Você pode voltar a qualquer momento no painel do Theme Builder.
Se precisar de ajuda, você pode consultar este guia sobre como instalar um plugin do WordPress.
Após a ativação, vá para SeedProd » Configurações, onde você pode inserir sua chave de licença do plugin. Você encontrará essas informações na seção Downloads no painel da sua conta SeedProd.
Cole sua chave no campo em branco e clique no botão Verificar Chave para salvar sua licença.
Passo 2. Escolha um Modelo Pré-fabricado
Em seguida, você precisará escolher um design pré-fabricado para usar como ponto de partida. Você pode criar um tema WordPress totalmente novo do zero com o Theme Builder ou criar páginas individuais com o construtor de landing pages.
Para este guia, usaremos o Theme Builder, mas se você preferir criar uma landing page, pode seguir este guia sobre como criar uma landing page no WordPress.
Para escolher um design pré-fabricado para o seu tema WordPress, navegue até SeedProd » Theme Builder no seu painel do WordPress e clique no botão Theme Template Kits.
Isso abrirá a biblioteca de modelos de sites pré-fabricados do SeedProd que você pode instalar com 1 clique.
Simplesmente role pelos designs até encontrar um modelo que você goste e clique no ícone de visto para importá-lo.
Depois de importar seu kit de site, você verá todas as partes do modelo do seu tema em uma lista como esta:
Estes são os modelos individuais que compõem seu tema completo, e você pode personalizar cada um deles com o construtor de páginas de arrastar e soltar do SeedProd.
Vamos mostrar como fazer isso a seguir! É super fácil e não exigirá a escrita de nenhum código HTML, Jquery ou CSS personalizado.
Etapa 3. Personalizar o Modelo de Cabeçalho
Como o menu do WordPress que queremos editar está no cabeçalho, role pelas partes do seu modelo até encontrar o modelo de cabeçalho. Em seguida, passe o mouse sobre ele e clique no link ‘Editar Design’.
Quando ele abrir, você verá um layout com uma prévia ao vivo do seu cabeçalho à direita e blocos do WordPress à esquerda. Você pode arrastar qualquer bloco para a prévia para adicionar facilmente novos elementos à sua página.
Clicar em elementos no seu cabeçalho permite ver suas configurações na barra lateral esquerda. Por exemplo, selecionar o logotipo abrirá opções para alterar a imagem do logotipo e seu tamanho, alinhamento e link.
Da mesma forma, clicar no bloco Nav Menu mostrará diferentes configurações de menu.
Por exemplo, o bloco permite escolher entre ‘Simples’ ou ‘Menu do WordPress’.
A opção Simples permite adicionar novos itens de menu na interface do construtor de páginas. Você pode adicionar links para qualquer página, post, categoria, tag ou página da web externa.
Como esta é uma abordagem simples para a criação de menus, você não pode adicionar menus suspensos, escolher menus personalizados que já criou ou atribuir um menu móvel personalizado.
No entanto, você pode personalizar o alinhamento do menu, tamanho da fonte, espaçamento e divisor. Além disso, na aba Avançado, você pode escolher entre menus horizontais e verticais e personalizar a tipografia, cores de fundo, bordas, classes CSS e muito mais.
A opção Menu do WordPress tem uma abordagem diferente. Você pode escolher locais de menu existentes no menu suspenso e ativar o alternador de menu de navegação móvel para tamanhos de tela pequenos.
Quando você ativa esta configuração e muda para a visualização móvel, verá que seu menu móvel tem um ícone de hambúrguer em vez de links de menu padrão, o que é muito melhor para a experiência do usuário móvel.
Ele também tem um link para a página de menu padrão do WordPress para editar o layout do seu menu. Assim como o menu Simples, a aba Avançado tem opções de personalização e animação, e ao contrário do menu simples, você pode personalizar as opções de estilo do seu sub-menu.
Etapa 4. Edite as Configurações de Visibilidade do seu Cabeçalho
Até agora, você sabe como editar seu menu principal e ativar um menu hambúrguer para telas de celular. Mas e se houver elementos no seu cabeçalho que você não quer exibir em telas menores?
A boa notícia é que você pode editar as configurações de visibilidade para cada elemento da página e escolher o que é exibido em diferentes tamanhos de tela.
Digamos que você queira ocultar a chamada para ação (CTA) do seu cabeçalho em dispositivos móveis porque prejudica a experiência do usuário. Nesse caso, você pode ir para a aba de configurações Avançadas desse bloco e ativar a opção 'Ocultar no Celular' no menu Visibilidade do Dispositivo.
Ao visualizar seu cabeçalho na visualização de celular, você o verá acinzentado, o que significa que o botão não será visível para visitantes em dispositivos móveis.
Continue personalizando as opções do seu menu móvel até ficar satisfeito com a aparência de tudo. Em seguida, clique no botão Salvar para salvar suas alterações.
Etapa 5. Continue Personalizando seu Tema WordPress
Depois que seu menu móvel estiver funcionando, use o construtor do SeedProd para personalizar o restante do seu tema. Você pode editar seu rodapé, página inicial e qualquer outra parte do modelo no mesmo painel.
Etapa 6. Publique suas Alterações
Quando estiver pronto para tornar suas alterações ao vivo em seu site WordPress, volte ao painel do construtor de temas do SeedProd e procure pela opção chamada 'Habilitar Tema SeedProd'. Simplesmente mude essa opção para a posição 'Sim' para ativar seu tema SeedProd.
Agora você pode visitar seu site e ver seu menu móvel em ação.
Alternativa: Edite Menus Mobile com um Plugin Gratuito do WordPress
Outra maneira de editar seus menus móveis é usando um plugin de menu do WordPress. Por exemplo, com o plugin que usaremos a seguir, você pode criar um menu hambúrguer que desliza para fora em telas de celular.
Primeiro, você precisará baixar, instalar e ativar o plugin do WordPress Responsive Menu.
Após o plugin ser ativado, você verá um novo rótulo chamado 'Responsive Menu' na sua barra de administração do WordPress. Clicar nele o levará para a tela de menu para adicionar um novo menu responsivo.
Então, prossiga e clique no botão Criar Novo Menu. Você verá um pop-up com diferentes temas de menu para escolher, incluindo padrão, Azul Elétrico, Largura Total e muito mais.
Escolha um tema que você goste e clique no botão Avançar.
Agora você pode inserir um nome para o seu menu, escolher um menu existente do WordPress para exibir e clicar no botão Criar Menu.
Agora, você verá uma interface visual onde pode editar as opções do seu menu responsivo. Você pode mostrar e ocultar diferentes elementos e alterar a largura mínima e máxima da tela responsiva do celular.
O plugin de menu responsivo tem muitas outras opções de menu móvel para alterar o comportamento e a aparência do seu menu. Você pode explorá-las nesta página e ajustá-las conforme necessário.
Não se esqueça de clicar no botão 'Atualizar' para salvar suas configurações
A partir daí, você pode visitar seu site para ver o menu responsivo em ação.
Como Mostrar um Menu Diferente no Celular
Os telefones celulares agora respondem por quase 60% do tráfego global da web, mas a maioria dos sites WordPress exibe o mesmo menu em todos os dispositivos. Você pode exibir um menu mais curto e simples no celular, mantendo o menu completo no desktop.
Eu acho isso muito útil quando um menu de desktop tem muitos itens para funcionar em uma tela pequena.
Opção 1: Use a localização do menu móvel do seu tema.
Alguns temas suportam uma localização de menu separada apenas para dispositivos móveis.
Vá para Aparência » Menus, crie um segundo menu simplificado e atribua-o à localização móvel em Configurações do Menu » Local de Exibição. Veja como editar seu menu WordPress para o guia passo a passo completo.
Opção 2: Use a visibilidade de dispositivo do SeedProd.
No SeedProd Theme Builder, abra seu cabeçalho e adicione dois blocos de Menu de Navegação.
Defina um para mostrar apenas no desktop e outro para mostrar apenas no celular. Cada bloco pode exibir um menu WordPress diferente, dando a você controle independente por dispositivo.
Para configurar isso, clique no bloco Menu de Navegação, vá para a aba Avançado e use a configuração Visibilidade de Dispositivo. Cobri isso na Etapa 4 acima. Leva cerca de dois minutos para configurar depois que seu segundo menu for criado.
Opção 3: Use o plugin Menu Responsivo. O plugin gratuito Menu Responsivo (abordado no método alternativo acima) cria um menu apenas para celular que aparece apenas em telas pequenas. Seu menu de desktop existente permanece inalterado.
Solução de Problemas Comuns de Menu Mobile
Recebo muitas perguntas sobre menus móveis que não estão funcionando corretamente. Aqui estão os problemas mais comuns e como corrigi-los.
Ícone Hamburger não responde no iOS. Um plugin de cache geralmente é a causa. Limpe seu cache no W3 Total Cache, WP Rocket ou qualquer plugin que você use, e então teste novamente no seu telefone.
Submenu móvel não abre. Isso é quase sempre um conflito de JavaScript com seu tema. Tente mudar temporariamente para um tema padrão do WordPress. Se o submenu funcionar, o problema está nos arquivos JS do seu tema.
Alterações no menu não aparecem após salvar. Seu plugin de cache está servindo a versão antiga da página. Limpe o cache e faça uma atualização forçada no seu navegador (Ctrl+Shift+R no Windows, Cmd+Shift+R no Mac).
Menu quebra após uma atualização de tema. Atualizações de tema às vezes redefinem as atribuições de localização de menu. Vá para Aparência » Menus, abra o painel Configurações do Menu e reatribua seu menu à localização de exibição correta.
Perguntas Frequentes sobre Edição de Menus Mobile no WordPress
Espero que este guia tenha ajudado você a aprender como editar menus móveis no WordPress. Aqui estão alguns outros tutoriais que você também pode achar úteis, incluindo os seguintes:
- Como Adicionar uma Mensagem de Alerta Personalizada ao WordPress
- Melhores Plugins do WordPress: Top 25 Ferramentas Essenciais
- Como Criar um Site de Autor no WordPress Sem Codificar
Obrigado por ler! Adoraríamos saber sua opinião, então sinta-se à vontade para participar da conversa no YouTube, X e Facebook para mais conselhos e conteúdo úteis para expandir seus negócios.
