Últimas notícias da SeedProd

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

como editar o menu no WordPress

Como editar a barra de navegação no WordPress passo a passo 

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.

Quer saber como editar a barra de navegação no WordPress?

Embora o tema do WordPress controle a aparência dos menus de navegação, você pode editá-los com um plug-in do WordPress ou CSS para adicionar personalizações que atendam melhor às suas necessidades.

Neste artigo, mostraremos a você como editar menus no WordPress e personalizá-los facilmente.

Por que editar seu menu do WordPress?

Um menu de navegação ajuda os visitantes do site a se movimentarem pelo site com facilidade.

Com uma boa estrutura de navegação, os usuários podem navegar facilmente pelo conteúdo que os mantém no seu site WordPress por mais tempo e que os leva a agir. Por exemplo, depois de ler uma página ou uma postagem de blog, os visitantes podem decidir se inscrever em seu boletim informativo por e-mail.

O menu padrão do WordPress lista as páginas existentes do WordPress. No entanto, um menu de navegação permite que você altere o menu padrão para um com links e botões personalizados para qualquer tipo de conteúdo. Isso permite que você otimize a navegação do seu site para obter a melhor experiência do usuário.

Agora que você conhece os benefícios de editar a navegação do WordPress, vamos abordar os diferentes métodos para fazer isso.

Como editar a barra de navegação no WordPress: 2 métodos

A seguir, compartilharemos duas maneiras diferentes de alterar a navegação do WordPress. Ambos os métodos são simples; no entanto, o primeiro exemplo oferece muito mais opções de personalização.

Método 1. Como editar a barra de navegação no WordPress com o SeedProd

Primeiro, mostraremos a você como editar menus no WordPress com um poderoso construtor de páginas do tipo arrastar e soltar. Em vez de codificar manualmente as alterações no menu, os criadores de páginas permitem personalizar muitas áreas do design do seu site sem código.

Construtor de sites WordPress SeedProd

O plugin que usaremos para esse método é o SeedProd, o melhor construtor de sites para WordPress. Ele vem com um editor visual de arrastar e soltar, permitindo que você personalize todo o seu site WordPress sem contratar um desenvolvedor.

Com o SeedProd, você pode criar temas personalizados para WordPress, criar páginas de destino de alta conversão e impulsionar seus esforços de geração de leads com modelos, blocos e seções personalizáveis. Ele também tem elementos de menu de navegação dedicados que você pode editar apontando e clicando.

O SeedProd também pode ajudá-lo:

Sem mais delongas, aqui estão as etapas para editar menus no WordPress com o SeedProd.

Etapa 1. Instalar o plug-in SeedProd

Primeiro, visite a página de preços do SeedProd e escolha seu plano. O SeedProd oferece uma versão gratuita; no entanto, usaremos o SeedProd Pro para o recurso Theme Builder.

Depois disso, faça login em sua conta do SeedProd e clique na guia Downloads. Nessa tela, você pode fazer o download do arquivo .zip do plug-in e clicar no ícone da área de transferência para copiar sua chave de licença.

Baixar o plug-in seedprod

Em seguida, acesse seu site do WordPress, instale e ative o SeedProd. Se você nunca fez isso antes, siga este guia sobre como instalar um plug-in do WordPress.

Quando o plug-in estiver ativo, navegue até SeedProd " Settings em seu administrador do WordPress e cole sua chave no campo License Key (Chave de licença ). Clique no botão Verify Key (Verificar chave ) para salvar sua licença antes de prosseguir.

Página de configurações do SeedProd

Agora, vá para a página SeedProd " Theme Builder, onde você pode começar a criar um novo tema do WordPress.

Página do construtor do tema SeedProd

Observação: para este tutorial, criaremos um novo menu usando a funcionalidade Theme Builder do SeedProd. Se quiser manter o tema existente do WordPress, você poderá usar a mesma abordagem na Etapa 4, criando uma página de destino com o SeedProd.

Etapa 2. Escolha um modelo de tema do WordPress

O SeedProd facilita a edição de qualquer parte do seu site WordPress sem código, mas, primeiro, você precisará criar a estrutura básica do seu tema.

A maneira mais fácil é escolher um dos modelos de tema WordPress prontos. Eles vêm com todas as partes que compõem o tema prontas, portanto, tudo o que você precisa fazer é personalizá-los com o conteúdo do seu site.

Para escolher um modelo de tema, clique no botão Themes (Temas ) na página Theme Builder. Isso abrirá uma galeria de modelos que você pode visualizar em uma nova guia.

Botão de temas do Seedprod

Usaremos o tema Car Maintenance para este tutorial, mas você pode escolher qualquer tema que se adapte melhor ao seu negócio. Quando você encontrar um modelo de tema de que goste, clique no ícone de marca de seleção laranja para importar as partes do modelo.

Modelos de temas do WordPress

O SeedProd criará automaticamente as partes do seu tema, inclusive o cabeçalho, o rodapé, a página inicial e as páginas do blog. Agora você pode editar qualquer modelo com o construtor visual de arrastar e soltar.

Partes do modelo do tema Seedprod

Etapa 3. Personalizar a parte do modelo de cabeçalho

Muitos dos modelos pré-fabricados da SeedProd criam um menu de navegação automaticamente. Normalmente, você o encontrará no modelo Header, que mostraremos como personalizar agora.

Para editar o modelo de cabeçalho, passe o mouse sobre ele e clique no link Edit Design (Editar design ). Em seguida, ele será aberto no editor visual de páginas.

Editar cabeçalho do SeedProd

Personalizar qualquer elemento do cabeçalho é tão fácil quanto clicar nele na visualização ao vivo. Isso abrirá o painel de configurações desse elemento na barra lateral esquerda, onde você poderá alterar o conteúdo, o estilo e a funcionalidade.

Por exemplo, você pode clicar no elemento de logotipo, excluir o logotipo padrão e carregar um da biblioteca de mídia do WordPress ou do computador.

Personalizar o logotipo de navegação do WordPress

Você também pode adicionar elementos de página arrastando um bloco da barra lateral esquerda e soltando-o no cabeçalho, como ícones de mídia social, uma caixa de pesquisa e muito mais.

Adicionar itens ao menu de navegação do WordPress

Agora que você já sabe como usar o editor de páginas, vamos ver como editar o menu do WordPress.

Etapa 4. Editar sua barra de navegação do WordPress

Como mencionado anteriormente, o SeedProd usa o bloco Nav Menu por padrão para exibir itens de menu.

como editar a barra de navegação no WordPress

Ao abrir as configurações do bloco, você verá que há dois métodos para criar e gerenciar menus:

  1. Simples
  2. Menu do WordPress

A opção Simples permite adicionar links ao seu menu dentro da interface do construtor de páginas. Você pode adicionar quantos links quiser a qualquer página, post, categoria, tag ou página da Web externa.

Menu de navegação simples seedprod

Como essa é uma abordagem simples para a criação de menus, você não pode adicionar menus suspensos ou escolher menus que já tenha criado.

Dito isso, 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, as bordas e muito mais.

Configurações avançadas do menu

A opção Menu do WordPress tem uma abordagem diferente. Você pode escolher um menu pré-existente no menu suspenso e ativar a navegação móvel para tamanhos de tela pequenos.

Menu do WordPress do SeedProd

O SeedProd também inclui um link que o leva diretamente à página padrão do menu do WordPress para ajustar o layout do menu. Assim como o menu Simple, a guia Advanced tem opções de personalização para cores, fontes, sombras, visibilidade do dispositivo e muito mais.

Como posso personalizar o botão do menu no WordPress?

Você pode criar um botão de menu para o menu de navegação do WordPress com o bloco Button do SeedProd.

bloco de botões do seedprod

Localize o bloco Button na barra lateral esquerda e arraste-o para o cabeçalho. Em seguida, você pode personalizar a chamada para ação do botão, o link, o estilo e muito mais no painel de configurações do botão.

configurações do bloco de botões seedprod

Dica profissional: você pode excluir qualquer elemento desnecessário passando o cursor sobre ele e clicando no ícone da lixeira.

excluir bloco seedprod

Quando estiver satisfeito com seu menu de navegação, clique no botão Save (Salvar ) no canto superior direito e no ícone X para retornar ao painel do construtor de temas.

salvar o menu de navegação do WordPress

Agora, siga o mesmo processo para personalizar as outras partes do tema do WordPress.

Etapa 5. Publique seu tema personalizado do WordPress

Depois de editar o menu e os modelos de tema do WordPress, você está pronto para aplicar as alterações em seu site. Para fazer isso, localize o botão Ativar tema do SeedProd na página Theme Builder e coloque-o na posição "On".

ativar o tema seedprod

Agora você pode acessar sua página inicial e ver seu novo menu de navegação personalizado.

Como editar o menu no exemplo do WordPress

Método 2. Editar menus no WordPress sem um plug-in

Se não quiser alterar o tema existente do WordPress, você poderá editar o menu usando as opções de menu integradas do WordPress.

Embora esse método não exija nenhum plug-in do WordPress, há menos opções de personalização. Além disso, a aparência do menu varia de acordo com o tema.

Para saber como editar menus no WordPress sem um plug-in, siga estas instruções.

Primeiro, acesse a página de configurações do menu do WordPress, navegando até Appearance " Menus no painel do WordPress.

Você pode adicionar itens ao seu menu existente do WordPress selecionando-os no painel Pages (Páginas ) à esquerda e clicando no botão Add to Menu (Adicionar ao menu ).

adicionar itens de menu do WordPress

Para adicionar outro conteúdo, como posts, categorias ou links personalizados, expanda o rótulo de navegação no mesmo painel, selecione os itens e clique no botão Add to Menu (Adicionar ao menu ).

Também é fácil alterar onde o menu é exibido na guia de localização do menu; no entanto, isso depende do seu tema ativo do WordPress. Por exemplo, nosso tema do WordPress tem locais para:

  • Menu principal
  • Menu secundário
  • Menu fora da tela
  • Menu da conta conectada
  • Menu de rodapé
editar locais de menu do WordPress

Quando estiver satisfeito com as edições do menu, clique no botão Save Menu (Salvar menu ).

Agora você pode visualizar seu site e ver o menu de navegação em ação.

exemplo de menu de edição no WordPress

Se precisar de mais ajuda para personalizar o menu com CSS personalizado, siga estas instruções sobre como estilizar o menu de navegação do WordPress.

Próximas etapas

Esperamos que este tutorial passo a passo tenha ajudado você a aprender a editar menus no WordPress com facilidade. Se você tiver um site WooCommerce, talvez também goste deste guia sobre como adicionar um ícone de carrinho de compras WooCommerce nos menus.

Pronto para começar a personalizar os menus de seu site sem código?

Comece a usar o SeedProd hoje mesmo.

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.