Como Personalizar e Editar seu Menu do WordPress (4 Maneiras Fáceis) 

Seu menu parece bom para você. Mas os visitantes continuam caindo nas páginas erradas, ou desistindo e saindo.

Talvez os links não apontem para onde deveriam. Talvez o estilo padrão se misture ao fundo e não combine com sua marca. Ou você acabou de publicar uma nova página e não consegue descobrir como adicioná-la ao menu sem quebrar o layout.

Tenho mais de 15 anos de experiência com WordPress, e menus são uma daquelas coisas que parecem simples até você tentar mudar um. Neste guia, mostrarei como editar seu menu do WordPress (adicionar, reordenar e remover itens) e como personalizar a aparência dele, usando 4 métodos.

A maneira mais rápida de personalizar seu menu do WordPress é através de Aparência → Menus no seu painel. Lá você pode adicionar páginas, reordenar itens, criar menus suspensos e definir um local de exibição. Para controle total do design sobre fontes, cores e layout, use o construtor de arrastar e soltar do SeedProd. Para temas de blocos, use o Editor de Sites do WordPress.

Veja como as principais opções se comparam rapidamente:

Recurso	Editor Integrado	SeedProd	Editor de Sites
Edição visual de arrastar e soltar	Não	Sim	Parcialmente
Funciona com o seu tema	Temas Clássicos	Qualquer um (Theme Builder substitui seu tema)	Apenas temas de blocos
Suporte a menus suspensos (submenu)	Sim	Sim (via opção Menu do WordPress)	Sim
Estilize fontes e cores sem CSS	Raramente	Sim	Sim
Gratuito para usar	Sim (integrado)	Pago (Pro)	Sim (integrado)

Como Personalizo um Menu do WordPress Usando o Editor Padrão?

A maneira mais fácil de começar é com o editor de menu integrado em Aparência → Menus. Ele funciona com temas clássicos e a maioria dos temas que não são de blocos, e você não precisa de nenhum plugin adicional.

Eu uso este editor há anos, e ainda é a maneira mais rápida de construir uma estrutura de navegação básica.

Observação: Se você não vir Aparência → Menus no seu painel, seu site está executando um tema de blocos (como o Twenty Twenty-Five). Pule para o método do Editor de Site.

Passo 1. Crie um Novo Menu

Vá para Aparência → Menus no seu painel do WordPress. Digite um nome para o menu na parte superior, como "Menu Principal", e clique em Criar Menu.

Se você já tem um menu, selecione-o no menu suspenso na parte superior. Dessa forma, você estará editando o menu correto, não criando acidentalmente um novo.

Passo 2. Adicione Páginas, Posts ou Links Personalizados

À esquerda, marque as páginas ou posts que deseja adicionar e clique em Adicionar ao Menu. Você também pode incluir categorias, tags ou qualquer URL com texto de link personalizado expandindo os painéis à esquerda.

Etapa 3. Reordenar Itens e Criar Menus Suspensos

Após adicionar os itens, arraste e solte-os na ordem desejada. Os itens no topo da lista aparecem primeiro no seu menu.

Para criar um menu suspenso, arraste um item do menu ligeiramente para a direita, abaixo de outro item. Ele ficará recuado, que é como o WordPress o reconhece como um submenu. O item pai se torna o link de nível superior, e o item recuado aparece no menu suspenso quando um visitante passa o mouse sobre ele.

Etapa 4. Remover Itens do Menu

Para remover um item, clique na seta ao lado dele para expandir suas configurações e, em seguida, clique em Remover. Isso o retira do menu de navegação sem excluir a página do seu site.

Etapa 5. Atribuir um Local de Exibição

Role para baixo até Configurações do Menu e marque um local de exibição.

As opções variam de acordo com o tema e podem incluir:

• Menu Principal
• Menu Secundário
• Menu Off-Canvas
• Menu da Conta do Usuário
• Menu do Rodapé

Etapa 6. Salvar o Menu

Clique em Salvar Menu e seu menu aparecerá na localização que você selecionou.

Este método lida com a estrutura e a ordenação, mas oferece controle limitado de estilo. Para controle total do design de fontes, cores e layout, experimente o método SeedProd abaixo.

Como Personalizo Meu Menu do WordPress com um Construtor de Páginas?

Para ter mais controle sobre a aparência do seu menu, um plugin de construtor de páginas é o caminho a seguir. Usarei o SeedProd neste exemplo, mas princípios semelhantes se aplicam a qualquer outro construtor de páginas.

SeedProd é um construtor de sites de arrastar e soltar para WordPress que oferece controle visual completo sobre sua navegação sem tocar em código. Você vê cada alteração ao vivo enquanto a faz: fontes, cores, links de menu, botões e layout se ajustam em tempo real.

Com SeedProd, você pode criar páginas personalizadas, menus e temas inteiros em um só lugar. Você pode até usá-lo para adicionar menus personalizados ao rodapé, cabeçalho, barra lateral e conteúdo de página do seu site.

Abaixo, usarei o Theme Builder para editar a barra de navegação de todo o site que aparece em todas as páginas. Se você precisar de um menu apenas em uma única página independente, pode criar uma landing page e arrastar o mesmo bloco Nav Menu para o cabeçalho dela.

Passo 1. Instale o SeedProd

Primeiro, baixe o plugin SeedProd e instale-o e ative-o em seu site WordPress.

Para obter ajuda com esta etapa, você pode seguir nosso guia sobre como instalar o SeedProd.

Em seguida, vá para SeedProd » Configurações, cole sua chave de licença e clique em Verificar Chave para desbloquear o recurso Theme Builder.

Etapa 2. Abra o Construtor de Temas e Escolha um Modelo

Vá para SeedProd » Theme Builder no seu painel do WordPress para começar a criar seu tema e menu de navegação personalizados.

A maneira mais rápida de configurar sua navegação é começar com um template de tema WordPress pré-fabricado. Cada template inclui todas as partes de um site (cabeçalho, rodapé, página inicial e blog), então você só precisa personalizar o design.

No painel do Theme Builder, clique em Temas para abrir a galeria de modelos. Você pode visualizar designs em uma nova aba e escolher um que se encaixe no seu negócio.

Para este tutorial, usarei o tema Car Maintenance, mas você pode escolher qualquer template. Clique no checkmark laranja para importá-lo para o seu site.

Uma vez importado, o SeedProd cria automaticamente a estrutura do seu site, incluindo o cabeçalho, o rodapé e as páginas do blog. Agora você pode abrir qualquer parte no editor de arrastar e soltar para começar a personalizar.

Etapa 3. Personalizar o Modelo de Cabeçalho

Sua barra de navegação fica dentro do modelo de cabeçalho. Os temas pré-fabricados do SeedProd geralmente adicionam um automaticamente, então tudo o que você precisa fazer é abrir o cabeçalho e personalizá-lo.

Para editar seu cabeçalho, passe o mouse sobre o modelo de Cabeçalho no Theme Builder e clique em Editar Design. Isso abre o editor de arrastar e soltar ao vivo.

Clique em qualquer elemento na visualização para editá-lo. O painel de configurações aparece à esquerda, onde você pode alterar texto, estilo e funcionalidade.

Por exemplo, clique no bloco de logotipo para excluir o logotipo de espaço reservado e carregar o seu próprio da biblioteca de mídia do WordPress.

Você também pode arrastar novos blocos, como ícones de mídia social, uma barra de pesquisa ou botões personalizados, para o cabeçalho para expandir sua barra de navegação.

Com os elementos básicos do cabeçalho cobertos, você está pronto para editar o próprio menu de navegação na próxima etapa.

Etapa 4. Edite o Bloco de Menu de Navegação

O SeedProd usa um bloco de Menu de Navegação para exibir a navegação do seu site. Este bloco oferece duas maneiras de gerenciar menus: uma opção simples para links rápidos ou uma opção de Menu do WordPress para controle avançado.

Opção 1: Menu Simples

Adicione links diretamente dentro do construtor para qualquer página, postagem, categoria, tag ou URL externo. É rápido de configurar, mas não suporta menus suspensos ou menus existentes do WordPress.

Você pode estilizar o menu Simples com opções de alinhamento, tamanho da fonte, espaçamento e divisores. Na aba Avançado, alterne entre layouts horizontal ou vertical e ajuste tipografia, cores, sombras de texto, cores de hover e bordas.

Opção 2: Menu do WordPress

Selecione um menu que você já criou no editor de menus do WordPress no menu suspenso. Esta opção suporta menus suspensos e navegação móvel, e herda a flexibilidade das configurações integradas do WordPress em Aparência » Menus.

Você também verá um link rápido de volta para a página padrão de menus do WordPress, onde você pode ajustar a estrutura do seu menu. Assim como no menu Simples, a aba Avançado permite personalizar fontes, cores, sombras, visibilidade por dispositivo e muito mais.

Você pode até exibir seu menu em um layout vertical ou horizontal. O design vertical funciona bem para áreas de widget na barra lateral e locais de menu no rodapé.

Como Adicionar um Botão de Menu no WordPress

Um botão de menu é uma ótima maneira de destacar ações como "Inscreva-se" ou "Comece agora". No SeedProd, você pode adicionar um com o bloco Botão.

Na barra lateral esquerda, arraste o bloco Botão para o seu cabeçalho. Em seguida, personalize o texto da chamada para ação, o link e a estilização diretamente no painel de configurações.

Dica Pro: Remova quaisquer elementos que você não precise, passando o mouse sobre eles e clicando no ícone de lixeira.

Quando seu menu estiver do jeito que você quer, clique em Salvar no canto superior direito e feche o editor para retornar ao painel do Theme Builder.

Dica de conversão: Sua barra de navegação não precisa ser apenas de links. Adicionar um botão “Obter Orçamento” ou “Agendar Demonstração” que linka para uma página de destino dedicada transforma seu cabeçalho em uma ferramenta de conversão. Já vi sites dobrarem o envio de formulários de leads apenas tornando esse CTA visível em todas as páginas.

Etapa 5. Publique seu Tema Personalizado

Após editar seus modelos de menu e cabeçalho, você está pronto para tornar as alterações visíveis. Encontre o controle deslizante Ativar Tema SeedProd na página Construtor de Temas e mude-o para a posição "Ativado".

Agora vá para sua página inicial para ver seu novo menu de navegação personalizado ao vivo em seu site.

Como Personalizo um Menu Usando o Editor de Sites do WordPress?

Os dois primeiros métodos funcionam para qualquer site, independentemente do tema que você usa. No entanto, se você estiver usando um tema WordPress baseado em blocos, como o Twenty Twenty-Five, pode preferir usar o editor de sites do WordPress para personalizar seu menu.

Observação: este método não funciona com todos os temas nem permite personalizar todas as partes do menu.

Para abrir o editor de sites, navegue até Aparência » Editor no seu painel do WordPress.

Na próxima tela, clique na aba Padrões. No WordPress 6.5 e posterior, procure em Padrões → Partes de Modelo se você não vir a opção Cabeçalho imediatamente.

A partir daí, clique na opção Cabeçalho e escolha seu modelo de Cabeçalho.

Aqui, você pode arrastar e soltar para reorganizar a posição do menu ou remover itens do menu.

Você também pode clicar no ícone de lápis para editar a estilização do menu.

Por exemplo, você pode ajustar a cor de fundo do menu, fontes, preenchimento, margens, bordas e muito mais.

Se você rolar para baixo até a aba Avançado, poderá inserir classes CSS personalizadas.

Para adicionar outra opção de menu, como um botão de cabeçalho, clique no ícone Adicionar Bloco.

Agora você pode pesquisar um bloco e clicar nele para adicioná-lo ao seu menu e personalizá-lo como qualquer outro bloco do WordPress.

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

Agora você pode visitar seu site para ver seu menu personalizado.

Como Adiciono um Menu Personalizado no WordPress Sem um Plugin?

Se você não quiser configurar um plugin de construtor de páginas e não tiver um tema de blocos do WordPress, sempre poderá usar código para adicionar um menu de navegação personalizado.

Para isso, recomendo o uso de um plugin de snippets de código do WordPress como o WPCode. É a maneira mais segura e fácil de adicionar código personalizado ao WordPress sem editar os arquivos principais do WordPress, como o seu arquivo functions.php.

Para fazer isso, instale o plugin gratuito WPCode, depois vá para Code Snippets » Add Snippet no seu painel do WordPress.

Nesta página, você verá snippets prontos que pode adicionar ao seu site com alguns cliques.

Para este tutorial, quero criar meu próprio trecho de código, então passe o mouse sobre 'Adicionar seu código personalizado' e clique no botão Usar trecho.

Agora insira um título para o seu snippet, abra o menu suspenso “Code Type” e clique em PHP Snippet.

Em seguida, cole o seguinte snippet no editor de código:

function wpb_custom_new_menu() {
  register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

Este snippet adiciona um novo local de menu ao seu tema, “Meu Menu Personalizado”.

Depois de fazer isso, role para baixo até as opções de inserção e escolha o método “Auto Insert” para adicionar o snippet em todo o seu site.

A partir daí, abra o menu suspenso “Location” e clique em Run Everywhere.

Agora você pode rolar até o topo da tela e clicar no alternador “Inactive” para mudá-lo para “Active”.

Finalmente, clique em Salvar para tornar o snippet ativo.

Agora, vá para Appearance » Menus e veja a área ‘Display location’.

Você deverá ver uma nova opção ‘Meu Menu Personalizado’ nesta área onde você pode adicionar itens de menu.

O próximo passo é adicionar seu menu personalizado ao seu tema do WordPress.

Você pode exibir um menu de navegação personalizado em qualquer lugar do seu site adicionando código ao arquivo de template do seu tema.

Simplesmente vá para Appearance » Theme File Editor.

Em seguida, no menu do lado direito, encontre o template onde você deseja adicionar o menu, como o cabeçalho do seu site.

Agora você precisará adicionar uma função wp_nav_menu e especificar o nome do seu menu personalizado. Por exemplo, no seguinte trecho de código, estou adicionando Meu Menu Personalizado ao cabeçalho do tema:

wp_nav_menu( array( 'theme_location'=>'my-custom-menu', 'container_class'=>'custom-menu-class' ) );

Após adicionar o código, clique no botão Update File para salvar suas alterações.

Agora, se você visitar seu site, verá o menu personalizado em ação, no entanto, notará que ele aparece em uma lista simples com marcadores.

Você pode estilizar o menu para combinar melhor com seu tema WordPress ou marca adicionando código CSS personalizado ao seu site.

Para fazer isso, vá para Aparência » Personalizar e clique em CSS adicional no personalizador do WordPress.

Isso abre um editor onde você pode digitar seu CSS personalizado.

Agora você pode estilizar seu menu usando a classe CSS que você adicionou ao seu modelo de tema. No meu exemplo, é .custom_menu_class.

No código a seguir, estou adicionando margens e preenchimento, definindo a cor do texto como preta e organizando o menu em um layout horizontal:

div.custom-menu-class ul {
    margin:20px 0px 20px 0px;
    list-style-type: none;
    list-style: none;
    list-style-image: none;
    text-align:right;
    display:inline-block;
}
div.custom-menu-class li {
    padding: 0px 20px 0px 0px;
    display: inline-block;
}

div.custom-menu-class a {
    color:#000;
}

O personalizador do WordPress atualiza automaticamente para que você possa ver como o menu fica com o novo estilo. Se você estiver satisfeito com as alterações, clique em Publicar para torná-las ativas.

Perguntas Frequentes

Como personalizar meu menu de navegação do WordPress?

A maneira mais rápida é ir para Aparência → Menus no seu painel do WordPress. Adicione as páginas ou posts que desejar, atribua o menu a um local de exibição como Menu Principal e clique em Salvar Menu. Para mais controle de design sobre fontes, cores e layout, use o construtor de arrastar e soltar do SeedProd ou o Editor de Site do WordPress para temas de blocos.

Como edito o menu de navegação em um site WordPress?

Vá para Aparência → Menus no seu painel do WordPress e selecione o menu que deseja editar. Adicione ou remova itens, reordene-os arrastando e clique em Salvar Menu. Editar um menu não afeta suas páginas ou posts, apenas controla quais links aparecem em sua navegação. Se você estiver usando um tema de blocos, use o Editor de Sites do WordPress em Aparência → Editor para editar o bloco de navegação diretamente.

Por que não consigo encontrar a opção Menus em Aparência no WordPress?

Se você não vir Menus em Aparência, seu site está executando um tema de blocos (como Twenty Twenty-Four ou Twenty Twenty-Five). Temas de blocos gerenciam a navegação através do Editor de Sites, não da tela clássica de Menus. Vá para Aparência → Editor, em seguida, procure a seção Navegação para editar o menu do seu site. Alternativamente, o SeedProd funciona com qualquer tema e oferece controle visual total sobre sua navegação sem o Editor de Sites.

Posso personalizar um menu do WordPress sem um plugin?

Sim. O WordPress inclui um editor de menus integrado em Aparência → Menus que funciona sem plugins. Para temas de blocos, use o Editor de Sites do WordPress. Para adicionar um local de menu personalizado, use um pequeno trecho de PHP com um plugin de código como o WPCode. A desvantagem é que a estilização é limitada ao que seu tema suporta, portanto, se você quiser alterar fontes, cores ou layout sem escrever CSS, um construtor visual como o SeedProd é o caminho mais fácil.

Como adiciono um menu suspenso no WordPress?

Em Aparência → Menus, arraste um item de menu ligeiramente para a direita sob um item pai. O WordPress o indentará e o tratará como um menu suspenso. Você pode aninhar até três níveis de profundidade. Para controle sobre o estilo visual do menu suspenso, o bloco Bloco de Menu de Navegação do SeedProd inclui efeitos de passagem de mouse, cores e opções de layout integrados.

Como faço para que meu menu do WordPress fique fixo (fixado ao rolar)?

Uma barra de navegação fixa permanece visível enquanto os visitantes rolam a página. No SeedProd, abra o modelo de Cabeçalho no Theme Builder, clique na linha do cabeçalho e procure a opção Cabeçalho Fixo no painel de configurações à esquerda. Ative-a e salve. Para o editor de menus integrado do WordPress, o comportamento fixo depende do seu tema. Muitos temas incluem uma opção de cabeçalho fixo no Personalizador (Aparência → Personalizar). Se o seu não tiver, você precisará de um plugin ou CSS personalizado para adicioná-lo.

Mais Dicas de Navegação no WordPress

Se você deseja controle total do design sobre sua navegação WordPress, o SeedProd facilita a criação de menus, cabeçalhos e layouts personalizados sem tocar em código. Obtenha o SeedProd Agora

• Como Editar Menus de Celular no WordPress (Guia para Iniciantes)
• Como Adicionar um Ícone de Carrinho de Compras do WooCommerce aos Menus
• Como Criar uma Landing Page Sem Navegação (Maneira Fácil)

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.