Como editar um menu no WordPress para navegação personalizada

Publicados: 2022-07-21

Quer aprender a editar um menu no WordPress?

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

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

Índice
  1. Por que editar seu menu do WordPress?
  2. Como editar um menu no WordPress: 2 métodos
    • Método 1. Edite os menus do WordPress com o SeedProd
      • Etapa 1. Instale o plug-in SeedProd
      • Etapa 2. Escolha um modelo de tema do WordPress
      • Etapa 3. Personalize a parte do modelo de cabeçalho
      • Etapa 4. Edite seu menu WordPress
      • Etapa 5. Publique seu tema WordPress personalizado
    • Método 2. Editar menus no WordPress sem um plug-in
  3. Próximos passos

Por que editar seu menu do WordPress?

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

Com uma boa estrutura de navegação, os usuários podem navegar facilmente pelo conteúdo que os mantém em seu site WordPress por mais tempo e agir. Por exemplo, depois de ler uma página ou 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 alterar o menu padrão para um com links e botões personalizados para qualquer tipo de conteúdo. Isso permite que você simplifique a navegação do seu site para a melhor experiência do usuário.

Agora que você conhece os benefícios de editar sua navegação no WordPress, vamos pular para os diferentes métodos para fazê-lo.

Como editar um menu no WordPress: 2 métodos

Abaixo, compartilharemos 2 maneiras diferentes de alterar sua navegação no WordPress. Ambos os métodos são diretos; no entanto, o primeiro exemplo oferece muito mais opções de personalização.

Método 1. Edite os menus do WordPress com o SeedProd

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

SeedProd WordPress website builder

O plugin que usaremos para este 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 do WordPress, criar páginas de destino de alta conversão e aumentar seus esforços de geração de leads com modelos, blocos e seções personalizáveis. Ele também possui elementos de menu de navegação dedicados que você pode editar apontando e clicando.

O SeedProd também pode ajudá-lo:

  • Criar uma página em breve
  • Aumente sua lista de e-mail
  • Coloque o WordPress em modo de manutenção
  • Crie páginas 404 personalizadas
  • Personalize sua página de login do WordPress
  • Incorporar conteúdo de mídia social
  • Crie temas WooCommerce
  • E mais.

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

Etapa 1. Instale 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 na sua conta SeedProd e clique na guia Downloads . Nesta tela, você pode baixar o arquivo .zip do plugin e clicar no ícone da área de transferência para copiar sua chave de licença.

Download seedprod plugin

Em seguida, vá para o seu site WordPress e instale e ative o SeedProd. Se você nunca fez isso antes, siga este guia sobre como instalar um plugin do WordPress.

Quando o plug-in estiver ativo, navegue até SeedProd »Configurações do seu administrador do WordPress e cole sua chave no campo Chave de licença . Clique no botão Verificar chave para salvar sua licença antes de prosseguir.

SeedProd settings page

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

SeedProd theme builder page

Nota: Para este tutorial, criaremos um novo menu usando a funcionalidade Theme Builder do SeedProd. Se você deseja manter seu tema WordPress existente, pode 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 para o seu tema.

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

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

Seedprod themes button

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

WordPress theme templates

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

Seedprod theme template parts

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

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

Para editar seu modelo de cabeçalho, passe o mouse sobre ele e clique no link Editar design . Depois, ele será aberto no editor de página visual.

Edit SeedProd header

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

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

Customize WordPress navigation logo

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

Add items to navigation menu WordPress

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

Etapa 4. Edite seu menu WordPress

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

Nav menu block seedprod

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

  1. Simples
  2. Menu 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, postagem, categoria, tag ou página da Web externa.

Simple navigation menu seedprod

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

Dito isto, você pode personalizar o alinhamento do menu, o tamanho da fonte, o espaçamento e o divisor. Além disso, na guia Avançado, você pode escolher entre menus horizontais e verticais e personalizar a tipografia, cores, bordas e muito mais.

Advanced menu settings

A opção WordPress Menu tem uma abordagem diferente. Você pode escolher um menu pré-existente na lista suspensa e ativar a navegação móvel para telas pequenas.

SeedProd WordPress menu

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

Como faço para personalizar o botão de menu no WordPress?

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

seedprod button block

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

button block settings seedprod

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

delete block seedprod

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

save WordPress navigation menu

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

Etapa 5. Publique seu tema WordPress personalizado

Depois de editar o menu do WordPress e os modelos de tema, você está pronto para fazer as alterações ao vivo em seu site. Para fazer isso, localize a alternância Ativar tema SeedProd na página do Construtor de temas e gire-a para a posição “Ligado”.

enable seedprod theme

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

how to edit menu in WordPress example

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

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

Embora esse método não exija plugins do WordPress, há menos opções de personalização. Além disso, a aparência do seu menu irá variar dependendo do seu tema.

Para aprender a editar menus no WordPress sem um plugin, siga estas instruções.

Primeiro, vá para a página de configurações do menu do WordPress navegando até Aparência »Menus do seu painel do WordPress.

Você pode adicionar itens ao seu menu WordPress existente selecionando-os no painel Páginas à esquerda e clicando no botão Adicionar ao menu .

add WordPress menu items

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

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

  • Menu Principal
  • Menu Secundário
  • Menu fora da tela
  • Menu Conta Conectada
  • Menu de Rodapé
edit WordPress menu locations

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

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

edit menu in WordPress example

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

Próximos passos

Esperamos que este tutorial passo a passo tenha ajudado você a aprender como editar menus no WordPress facilmente. Se você possui um site WooCommerce, também pode gostar deste guia sobre como adicionar um ícone de carrinho de compras WooCommerce nos menus.

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

Comece hoje mesmo com o SeedProd.

Obrigado por ler. Siga-nos no YouTube, Twitter e Facebook para obter mais conteúdo útil para expandir seus negócios.