Últimas notícias da SeedProd

Tutoriais, dicas e recursos do WordPress para ajudar a expandir seus negócios

Como editar o menu móvel no WordPress

Como editar menus móveis no WordPress (guia para iniciantes) 

Escrito por: avatar do autor Stacey Corrin
avatar do autor Stacey Corrin
Stacey escreve sobre WordPress e marketing digital há mais de 10 anos e sobre outros tópicos há muito mais tempo. Além disso, ela é fascinada por web design, experiência do usuário e SEO.
     Avaliado por: reviewer avatar Turner John
reviewer avatar Turner John
John Turner é o cofundador da SeedProd. Ele tem mais de 20 anos de experiência em negócios e desenvolvimento e seus plug-ins foram baixados mais de 25 milhões de vezes.

Deseja saber como editar um menu móvel no WordPress?

Os menus móveis são links de navegação que facilitam a navegação e a interação dos usuários móveis com o seu site. Se estiver usando o WordPress, a edição do menu móvel é relativamente fácil e pode melhorar muito a experiência do usuário, o tempo de carregamento do site e a navegação móvel.

Neste artigo, mostraremos como editar o menu móvel no WordPress para que você possa criar uma experiência amigável para os visitantes móveis.

Por que editar seu menu móvel no WordPress?

A edição e a personalização do menu móvel do WordPress são importantes pelos seguintes motivos:

  • Melhoria da experiência do usuário: Os usuários de dispositivos móveis têm necessidades e hábitos diferentes dos usuários de desktop. Ao personalizar seu menu móvel, você pode criar uma experiência amigável que atenda às necessidades exclusivas deles.
  • Tempos de carregamento do site mais rápidos: Um menu otimizado para dispositivos móveis pode ajudar a reduzir o tempo de carregamento da página, o que é importante para usuários com conexões de Internet mais lentas.
  • Melhor navegação: Um menu móvel bem projetado pode tornar mais fácil para os usuários encontrarem o que precisam no seu site, levando a um melhor envolvimento e taxas de conversão.
  • Indexação mobile-first: O Google usa um sistema de indexação mobile-first, o que significa que os sites são classificados com base em sua versão móvel. Um menu móvel bem projetado pode ajudar a melhorar a classificação do seu site nos mecanismos de pesquisa.

De modo geral, a edição do menu móvel do WordPress é essencial para otimizá-lo para visitantes móveis, melhorar a experiência do usuário e aumentar o envolvimento, as taxas de conversão e o SEO.

Como editar o menu móvel no WordPress

Neste guia, compartilharemos duas maneiras diferentes de editar um menu móvel em seu site WordPress.

O primeiro método permite personalizar completamente os menus e mostrar ou ocultar determinados elementos em telas de desktop ou móveis. No entanto, o método alternativo é uma solução gratuita com menos opções de personalização.

Clique em qualquer um dos links abaixo para escolher o método que você deseja usar:

Vamos começar!

Personalize os menus móveis com o SeedProd Page Builder

Para começar, usaremos um plug-in de construtor de páginas para personalizar e editar menus móveis visualmente, sem código. Para isso, usaremos o SeedProd, o melhor construtor de sites e páginas de destino do WordPress.

Construtor de sites WordPress SeedProd

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.

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.

digite sua chave de licença

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.

Kits de modelos do tema SeedProd

Isso abrirá a biblioteca do SeedProd de modelos de sites predefinidos que você pode instalar com um clique.

Kits de modelos SeedProd

Basta percorrer os designs até encontrar um modelo que lhe agrade e clicar no ícone de marca de seleção para importá-lo.

Escolha um modelo predefinido

Depois de importar o kit do seu site, você verá todas as partes do modelo do seu tema em uma lista como esta:

Partes do modelo do WordPress

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 modelo até encontrar o modelo de cabeçalho. Em seguida, passe o mouse sobre ele e clique no link "Edit Design".

Editar parte do modelo de cabeçalho

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.

Construtor de páginas de arrastar e soltar SeedProd

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.

Configurações do bloco de imagem SeedProd

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 "Menu WordPress".

menu de navegação simples 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, você não pode 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.

Configurações do bloco de menu do WordPress

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.

Alternância de menu móvel do WordPress

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.

Opções de personalização do submenu do WordPress.

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).

Ocultar o botão de CTA no celular

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.

Ocultar item de menu no celular

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

Depois de editar o menu, você pode personalizar o restante do site WordPress usando o construtor de páginas do SeedProd. Por exemplo, você pode editar sua página inicial do WordPress, criar uma barra lateral personalizada do WordPress e personalizar o modelo de página do blog.

Você pode até mesmo editar o rodapé do WordPress e adicionar um widget de menu vertical como este:

Menu de navegação vertical no rodapé do WordPress

Se você tiver um site de comércio eletrônico, também poderá personalizar as páginas de produtos com os blocos WooCommerce do SeedProd.

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.

ativar o tema seedprod

Agora você pode visitar seu site e ver seu menu móvel em ação.

como editar o menu móvel no WordPress

Alternativa: Editar menus móveis com um plug-in gratuito do WordPress

Outra maneira de editar seus menus móveis é usar um plugin de menu do WordPress. Por exemplo, com o plug-in que usaremos a seguir, você pode criar um menu de hambúrguer que desliza para fora em telas de celular.

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.

Criar 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.

Temas de menu para celular

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.

Configurações do 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.

Configurações do contêiner do menu móvel

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.

menu de hambúrguer deslizante

É isso aí!

Esperamos 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:

Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, fique à vontade para deixar um comentário com perguntas e feedback.

Você também pode nos seguir no YouTube, no X (antigo Twitter) e no Facebook para obter mais conteúdo útil para expandir seus negócios.

avatar do autor
Stacey Corrin Escritor
Stacey escreve sobre WordPress e marketing digital há mais de 10 anos e sobre outros tópicos há muito mais tempo. Além disso, ela é fascinada por web design, experiência do usuário e SEO.

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Recomendamos apenas produtos que acreditamos que agregarão valor aos nossos leitores.