A maioria dos menus móveis do WordPress parece estar tudo bem até você verificá-los no celular. Os links ficam amontoados, o ícone de hambúrguer não abre ou você acaba exibindo um menu de desktop com 10 itens em uma tela pequena.
Neste guia, vou mostrar como resolver isso. Você aprenderá a ativar o ícone de hambúrguer, controlar o que é exibido no celular e configurar um menu específico para telas pequenas. Também abordarei os problemas mais comuns relacionados a menus para dispositivos móveis.
Como editar o menu móvel no WordPress
Precisa alterar os links que aparecem no seu menu? Veja como editar o menu do WordPress. Quer alterar o estilo ou as cores do seu menu? Veja como personalizar o menu do WordPress.
O primeiro método deste guia utiliza o SeedProd para oferecer controle visual total (é necessário o SeedProd Pro). O segundo utiliza o plugin gratuito Responsive Menu. Clique abaixo para acessar o método de sua preferência:
Personalize menus para dispositivos móveis com o construtor de sites SeedProd
Eu uso o SeedProd no meu próprio site, e os controles de visibilidade para dispositivos móveis são um dos recursos em que mais confio. Para começar, vou mostrar como usar o SeedProd para personalizar e editar menus móveis visualmente, sem precisar de código.
Ele vem com centenas de modelos predefinidos, uma interface de arrastar e soltar e inúmeros elementos de design para facilitar a personalização de qualquer página do WordPress. Não importa se o menu está no cabeçalho, no rodapé ou na barra lateral do WordPress, você pode editá-lo facilmente com o construtor do SeedProd.
Além disso, as poderosas opções de visibilidade desse plug-in permitem ocultar elementos de design específicos em telas de celular ou desktop. Como resultado, você pode adaptar seus menus de navegação a diferentes tamanhos de tela.
Etapa 1. Instalar e ativar o SeedProd
Para começar, você precisará fazer o download do plug-in no site do SeedProd. Embora o SeedProd tenha uma versão gratuita, usaremos o SeedProd Pro por seus recursos de criação de temas para WordPress.
Observação: o SeedProd Pro é necessário para o Theme Builder. Ao ativar o tema SeedProd, ele substitui o tema ativo no momento. Você pode voltar ao tema anterior a qualquer momento pelo painel do Theme Builder.
Se precisar de ajuda, consulte este guia sobre como instalar um plug-in do WordPress.
Após a ativação, vá para SeedProd " Settings (Configurações), onde você pode inserir sua chave de licença do plug-in. Você encontrará essas informações na seção Downloads no painel da sua conta do SeedProd.
Cole sua chave no campo em branco e clique no botão Verify Key (Verificar chave ) para armazenar sua licença.
Etapa 2. Escolha um modelo predefinido
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 página de destino, pode seguir este guia sobre como criar uma página de destino no WordPress.
Para escolher um design pré-fabricado para seu tema do WordPress, navegue até SeedProd " Theme Builder no painel do WordPress e clique no botão Theme Template Kits.
Isso abrirá a biblioteca do SeedProd de modelos de site predefinidos que você pode instalar com um clique.
Basta percorrer os designs até encontrar um modelo que lhe agrade e clicar no ícone de marca de seleção para importá-lo.
Depois de importar o kit do seu site, você verá todas as partes do modelo do seu tema em uma lista como esta:
Esses são os modelos individuais que compõem o tema completo, e você pode personalizar cada um deles com o construtor de páginas de arrastar e soltar do SeedProd.
Mostraremos a você como fazer isso a seguir! É muito fácil e não requer a criação 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, percorra as partes do seu modelo até encontrar o modelo do cabeçalho. Em seguida, passe o mouse sobre ele e clique no link “Editar design”.
Quando ele for aberto, você verá um layout com uma visualização ao vivo do cabeçalho à direita e dos blocos do WordPress à esquerda. Você pode arrastar qualquer bloco para a visualização para adicionar novos elementos à sua página com facilidade.
Ao clicar nos elementos do cabeçalho, você pode ver as configurações deles 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 que você escolha entre um menu "Simples" ou "WordPress".
A opção Simples permite que você adicione novos itens de menu dentro da interface do construtor de páginas. Você pode adicionar links a qualquer página, post, categoria, tag ou página da Web externa.
Como essa é uma abordagem simples para a criação de menus, não é possível adicionar menus suspensos, escolher menus personalizados já criados ou atribuir um menu móvel personalizado.
No entanto, você pode personalizar o alinhamento do menu, o tamanho da fonte, o espaçamento e o divisor. Além disso, na guia Advanced, você pode escolher entre menus horizontais e verticais e personalizar a tipografia, as cores de fundo, as bordas, as 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 a alternância do menu de navegação móvel para tamanhos de tela pequenos.
Ao ativar essa configuração e alternar para a visualização móvel, você verá que o 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.
Ela também tem um link para a página padrão do menu do WordPress para editar o layout do menu. Assim como o menu simples, a guia Advanced 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 submenu.
Etapa 4. Editar as configurações de visibilidade do cabeçalho
Até agora, você sabe como editar o menu principal e ativar um menu de hambúrguer para telas de celular. Mas e se houver elementos no seu cabeçalho que você não deseja exibir em telas menores?
A boa notícia é que você pode editar as configurações de visibilidade de cada elemento da página e escolher o que será 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 ela prejudica a experiência do usuário. Nesse caso, você pode ir até a guia Advanced settings (Configurações avançadas) desse bloco e ativar a opção "Hide on Mobile" (Ocultar em dispositivos móveis) no menu Device Visibility (Visibilidade do dispositivo).
Ao visualizar o cabeçalho no modo de exibição móvel, você verá que ele está esmaecido, o que significa que o botão não estará visível para os visitantes móveis.
Continue personalizando as opções do menu móvel até que esteja satisfeito com a aparência de tudo. Em seguida, clique no botão Save (Salvar ) para salvar suas alterações.
Etapa 5. Continue personalizando seu tema do WordPress
Assim que o menu para celular estiver funcionando, use o construtor do SeedProd para personalizar o restante do seu tema. Você pode editar o rodapé, a página inicial e qualquer outra parte do modelo a partir do mesmo painel de controle.
Etapa 6. Publique suas alterações
Quando estiver pronto para fazer suas alterações no site do WordPress, volte ao painel do criador de temas do SeedProd e procure o botão "Enable SeedProd Theme" (Ativar tema do SeedProd). Basta mudar essa opção para a posição "Yes" (Sim) para ativar o tema do SeedProd.
Agora você pode visitar seu site e ver seu menu móvel em ação.
Alternativa: Editar menus móveis com um plug-in gratuito do WordPress
Outra maneira de editar seus menus para dispositivos móveis é usando um plugin de menus do WordPress. Por exemplo, com o plugin que usaremos a seguir, você pode criar um menu tipo hambúrguer que se abre deslizando nas telas dos dispositivos móveis.
Primeiro, você precisará fazer download, instalar e ativar o plug-in Responsive Menu WordPress.
Depois que o plug-in for ativado, você verá um novo rótulo chamado "Menu responsivo" na barra de administração do WordPress. Ao clicar nele, você será levado à tela do menu para adicionar um novo menu responsivo.
Portanto, vá em frente e clique no botão Create New Menu. Você verá uma janela pop-up com diferentes temas de menu para escolher, incluindo padrão, Electric Blue, Full-Width e outros.
Escolha um tema de sua preferência e clique no botão Next (Avançar ).
Agora você pode digitar um nome para o menu, escolher um menu existente do WordPress para exibir e clicar no botão Create Menu.
Agora, você verá uma interface visual na qual poderá editar as opções do menu responsivo. Você pode mostrar e ocultar diferentes elementos e alterar a largura mínima e a largura máxima da tela responsiva para dispositivos móveis.
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 "Update" (Atualizar) para armazenar suas configurações
A partir daí, você pode visitar seu site para ver o menu responsivo em ação.
Como exibir um menu diferente no celular
Os celulares já representam 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 nos celulares, mantendo o menu completo nos computadores.
Acho isso muito útil quando o menu da área de trabalho tem muitos itens para caber em uma tela pequena.
Opção 1: Use o local do menu para dispositivos móveis do seu tema.
Alguns temas oferecem uma localização de menu separada, exclusiva para dispositivos móveis.
Vá para Aparência » Menus, crie um segundo menu simplificado e atribua-o à localização para dispositivos móveis em Configurações do menu » Localização de exibição. Veja como editar seu menu do WordPress para obter um guia passo a passo completo.
Opção 2: Use a funcionalidade de visibilidade de dispositivos do SeedProd.
No SeedProd Theme Builder, abra o cabeçalho e adicione dois blocos de menu de navegação.
Configure um para ser exibido apenas no desktop e outro para ser exibido apenas no celular. Cada bloco pode exibir um menu diferente do WordPress, permitindo que você tenha controle independente para cada dispositivo.
Para configurar isso, clique no bloco “Menu de navegação”, acesse a guia “Avançado ” e utilize a configuração “Visibilidade do dispositivo ”. Abordei esse assunto no Passo 4 acima. A configuração leva cerca de dois minutos após a criação do seu segundo menu.
Opção 3: Use o plugin Responsive Menu. O plugin gratuito Responsive Menu (abordado no método alternativo acima) cria um menu exclusivo para dispositivos móveis que só aparece em telas pequenas. O menu atual do seu computador permanece inalterado.
Solução de problemas comuns no menu do celular
Recebo muitas perguntas sobre menus para dispositivos móveis que não estão funcionando direito. Aqui estão os problemas mais comuns e como resolvê-los.
O ícone do hambúrguer não está respondendo no iOS. Geralmente, a causa é um plugin de cache. Limpe o cache no W3 Total Cache, no WP Rocket ou em qualquer outro plugin que você utilize e, em seguida, teste novamente no seu celular.
O submenu móvel não abre. Isso quase sempre se deve a um conflito de JavaScript com o 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.
As alterações no menu não aparecem após o salvamento. Seu plugin de cache está exibindo a versão antiga da página. Limpe o cache e atualize a página manualmente no navegador (Ctrl+Shift+R no Windows, Cmd+Shift+R no Mac).
O menu fica desorganizado após uma atualização do tema. Às vezes, as atualizações do tema redefinem as atribuições de localização do menu. Acesse Aparência » Menus, abra o painel Configurações do menu e reatribua o menu ao local de exibição correto.
Perguntas frequentes sobre como editar menus móveis 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 plug-ins do WordPress: As 25 ferramentas mais importantes
- Como criar um site de autor no WordPress sem codificação
Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, sinta-se à vontade para participar da conversa no YouTube, X e Facebook para obter mais conselhos úteis e conteúdo para expandir seus negócios.
