Como Personalizar os Estilos do Menu do WordPress de 3 Maneiras Fáceis 

Eu personalizei muitos menus do WordPress ao longo dos anos, e uma coisa que sempre noto é o quanto o estilo padrão se mistura ao fundo. Funciona, mas não combina realmente com sua marca ou ajuda seu site a se destacar.

Algumas pequenas alterações no seu menu podem fazer com que todo o seu site pareça mais polido e fácil de navegar.

Neste guia, mostrarei 4 maneiras de personalizar seu menu do WordPress passo a passo, sem necessidade de codificação.

A maneira mais rápida de personalizar seu menu do WordPress é através de Aparência → Menus no seu painel. Adicione itens, defina uma localização de exibição e salve. Para controle total de 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.

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.

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.

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. Use o painel de Links Personalizados para adicionar qualquer URL com texto de link personalizado.

Passo 3. Atribua uma Localização de Exibição

Role para baixo até Configurações do Menu e marque uma localização de exibição, como Menu Primário. As localizações disponíveis dependem do seu tema.

Você também pode arrastar e soltar itens para reordená-los ou aninhá-los para criar submenus suspensos.

Passo 4. Salve o Menu

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

Este método lida com a estrutura e ordenação básicas, mas oferece controle limitado de estilo. Para controle total de design sobre 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 permite criar páginas personalizadas, menus e temas inteiros sem escrever código. Os recursos incluem:

• Construtor de páginas de arrastar e soltar
• Construtor de temas WordPress
• Modelos pré-fabricados
• Menus personalizáveis
• Integração com mídias sociais
• E mais.

Você pode até usá-lo para adicionar menus personalizados ao rodapé do seu site, cabeçalho, barra lateral e conteúdo da página. 

Este método permite personalizar menus, independentemente do seu tema do WordPress. Para começar, siga os passos fáceis abaixo.

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.

Etapa 2. Escolha um Modelo de Página de Destino

Depois que o plugin for ativado, navegue até SeedProd » Landing Pages no seu painel do WordPress e clique no botão Adicionar Nova Landing Page.

Isso exibirá uma biblioteca de modelos de landing page que você pode usar para criar uma página personalizada rapidamente. 

Cada modelo é totalmente personalizável para se adequar a diferentes nichos de sites. Por exemplo, clicar na guia “Lead Squeeze” na parte superior mostra modelos mais adequados para criar páginas de captura.

Quando encontrar um design que atenda às suas necessidades, passe o mouse sobre ele e clique no ícone de marca de verificação laranja.

Agora uma janela aparecerá, permitindo que você insira um nome e URL para a página. Após inserir esses detalhes, clique no botão Salvar e Começar a Editar a Página.

Etapa 3. Personalize o Conteúdo da Sua Página

A próxima tela mostrará sua landing page dentro do construtor visual de páginas do SeedProd. Ela terá blocos, seções e configurações à esquerda e uma prévia da sua página à direita.

Quaisquer alterações que você fizer em sua página aparecerão automaticamente em tempo real. Desta forma, você pode garantir que ela fique boa antes de publicar as alterações.

Personalizar o conteúdo do modelo é tão simples quanto apontar e clicar. Por exemplo, para alterar qualquer conteúdo de texto, clique nele, exclua o texto existente e substitua-o pelo seu.

Para adicionar novos recursos à sua página, como uma imagem ou um botão de call-to-action, encontre o bloco no painel esquerdo e arraste-o para a página.

Continue substituindo o conteúdo do modelo pelo seu até ter um design com o qual você esteja satisfeito. Para mais ajuda com personalização, veja nosso guia sobre como criar uma landing page no WordPress.

Etapa 4. Personalize o Menu do WordPress

Após personalizar sua página, você pode criar e personalizar menus facilmente. Meu modelo não inclui uma área de cabeçalho, então precisarei criar uma primeiro.

Para fazer isso, encontre o bloco Coluna e arraste-o para o topo da sua página.

Em seguida, escolha um layout. Neste caso, estamos usando um layout de 3 colunas.

Agora vamos configurar a área do cabeçalho com um bloco de imagem para exibir o logotipo do seu site.

Para fazer upload da imagem do seu logotipo, clique no botão “Usar Sua Própria Imagem” no painel de configurações do bloco. Isso permite que você escolha uma imagem da sua biblioteca de mídia do WordPress ou faça upload de uma do seu computador.

Em seguida, encontre o bloco Nav Menu e arraste-o para outra coluna no seu cabeçalho. É aqui que você pode adicionar itens de menu para os usuários clicarem e visitarem outras páginas do seu site.

Nas configurações do bloco, existem 2 maneiras de exibir seu menu.

O tipo de menu Simples permite que você adicione links de menu individuais sem sair do page builder. Basta adicionar um nome de menu e colar seu link personalizado.

Você também pode fazer com que o destino do link não siga e abri-lo em uma nova aba.

O tipo Menu do WordPress permite exibir menus que você já criou no WordPress. Clicar no menu suspenso mostrará todos os menus disponíveis no seu site, como Menu Primário ou Menu Principal.

Tudo o que você precisa fazer é selecionar os menus para exibi-los no seu cabeçalho.

O SeedProd tem opções avançadas de personalização para ambos os tipos de menu. Na aba Avançado, você pode alterar cores do menu, fontes, sombras de texto, cores de hover e muito mais.

Você pode até exibir seus menus em um layout vertical ou horizontal. O design vertical é excelente para áreas de widget de barra lateral e locais de menu no rodapé.

Para gerenciar seus menus, clique no link Tela de Menus ou navegue até Aparência » Menus no seu admin do WordPress.

Aqui você pode editar a estrutura do seu menu, adicionar novos itens de menu e submenus clicando nas caixas de seleção e gerenciar locais. Você pode até criar um novo menu nesta página.

Lembre-se de clicar no botão Salvar Menu para salvar as funções do seu menu.

Muitos sites usam botões na navegação do site para promover uma chamada para ação específica. Com o bloco de botões do SeedProd, você pode criar um Botão de Menu em alguns cliques.

Simplesmente encontre o bloco de botões e adicione-o à sua área de cabeçalho.

Em seguida, nas configurações do bloco, você pode adicionar o link do seu menu e personalizar o estilo do botão.

Etapa 5. Publique Sua Página Personalizada

Quando estiver satisfeito com a aparência da sua página, clique em Salvar e Publicar no canto superior direito da tela.

A partir daí, você pode visitar a página para ver seu menu personalizado do WordPress em ação.

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

O primeiro método é uma excelente solução 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 Three, 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 nosso próprio snippet, então passe o mouse sobre 'Add Your Custom Code' e clique no botão Use snippet.

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 snippet de código, estamos 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 adicionou ao seu modelo de tema. Em nosso exemplo, é .custom_menu_class.

No código a seguir, estamos 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. Se você estiver usando um tema de blocos, use o Editor de Site do WordPress em Aparência → Editor para editar o bloco de navegação diretamente.

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 nenhum plugin. Para temas de blocos, use o Editor de Site do WordPress. Para adicionar um local de menu personalizado, use um pequeno trecho de PHP com um plugin de código como o WPCode. Nenhuma edição manual de arquivo é necessária.

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.

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
• A Navegação de Landing Page Morreu: Eis o Porquê
• Como editar a barra de navegação no WordPress passo a passo
• Como Criar uma Página de Destino 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.