Últimas notícias da SeedProd

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

Como personalizar o menu do WordPress

Como personalizar os estilos de menu do WordPress de 3 maneiras fáceis 

Escrito por: imagem do autor Stacey Corrin
imagem 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: Turner John
imagem do revisor 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.

Você quer aprender a personalizar os estilos de menu do WordPress?

Os menus do WordPress ajudam a organizar o conteúdo do seu site e facilitam para os visitantes encontrarem o que estão procurando. Mas o menu padrão do WordPress pode ser um pouco simples, o que dificulta o destaque.

Neste guia, mostraremos como personalizar os menus do WordPress para facilitar a navegação no site.

Por que personalizar seu menu do WordPress?

Seu menu é uma das partes mais essenciais do seu site WordPress. É o que os visitantes veem primeiro quando chegam ao seu site e o que usarão para navegar por ele. Por isso, é importante garantir que seu menu seja bem projetado e fácil de usar.

Aqui estão alguns motivos pelos quais você deve personalizar o menu de navegação do WordPress:

  • Melhore a aparência do seu site. Seu menu é uma grande parte do design geral do site. Ao personalizá-lo, você pode combinar a aparência da sua página inicial e de outras páginas de nível superior e torná-lo mais atraente visualmente.
  • Torne seu website mais fácil de usar. Um menu bem projetado pode ajudar os visitantes a encontrar o que estão procurando de forma rápida e fácil. Ao personalizar o menu, você pode facilitar a navegação dos visitantes pelo site e encontrar as informações de que precisam.
  • Melhore o SEO do seu site. A estrutura do seu menu também pode afetar o SEO do seu site. Ao personalizar o menu, você pode facilitar a indexação do seu site pelos mecanismos de pesquisa e classificá-lo melhor nos resultados de pesquisa.

Há muitas maneiras de personalizar o menu do WordPress. Você pode alterar a ordem dos itens do menu, adicionar novos itens e até mesmo alterar o design do próprio menu.

Há também muitos plugins disponíveis para ajudar a personalizar ainda mais as coisas. No guia passo a passo abaixo, compartilhamos três maneiras de adicionar menus personalizados ao seu site WordPress com e sem o uso de um plug-in do WordPress.

Como personalizar o menu do WordPress com um plug-in Page Builder

Primeiro, mostraremos como personalizar o menu do WordPress usando um plug-in de construtor de páginas. Usaremos o SeedProd neste exemplo, mas princípios semelhantes se aplicam a qualquer outro construtor de páginas.

Construtor de sites WordPress SeedProd Drag and Drop

O SeedProd é um poderoso construtor de páginas do WordPress que permite criar páginas e menus personalizados no WordPress sem escrever código. É fácil de usar e oferece uma ampla gama de recursos, incluindo:

  • Construtor de páginas do tipo arrastar e soltar
  • Criador de temas do WordPress
  • Modelos pré-fabricados
  • Menus personalizáveis
  • Integração de mídia social
  • E mais.

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

Esse método permite que você personalize os menus, independentemente do tema do WordPress. Para começar, siga as etapas fáceis abaixo.

Etapa 1. Instalar o SeedProd Page Builder

Primeiro, faça o download do plug-in SeedProd, instale-o e ative-o em seu site WordPress.

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

Etapa 2. Escolha um modelo de página de destino

Depois que o plug-in estiver ativado, navegue até SeedProd " Landing Pages no painel do WordPress e clique no botão Add New Landing Page.

Adicionar uma nova página de destino com o SeedProd

Isso abrirá uma biblioteca de modelos de página de destino que você pode usar para criar uma página personalizada rapidamente. 

modelos de páginas de destino

Cada modelo é totalmente personalizável para se adequar a diferentes nichos de sites. Por exemplo, clicar na guia "Lead Squeeze" na parte superior mostra os modelos mais adequados para a criação de páginas squeeze.

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

Escolha um modelo de página de destino

Agora será exibida uma janela que permite que você insira o nome da página e o URL. Depois de inserir esses detalhes, clique no botão Save and Start Editing the Page (Salvar e começar a editar a página ).

informações da página de destino

Etapa 3. Personalize o conteúdo de sua página

A próxima tela mostrará sua página de destino dentro do construtor de páginas visuais do SeedProd. Ela terá blocos, seções e configurações à esquerda e uma visualização da sua página à direita.

Interface do construtor da página de destino

Todas as alterações que você fizer em sua página serão exibidas automaticamente em tempo real. Dessa forma, você pode garantir que a página tenha uma boa aparência 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 próprio texto.

personalizar o conteúdo da página

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

personalizar imagens

Continue substituindo o conteúdo do modelo pelo seu próprio conteúdo até obter um design que o satisfaça. Para obter mais ajuda na personalização, consulte nosso guia sobre como criar uma página de destino no WordPress.

Etapa 4. Personalizar o menu do WordPress

Depois de personalizar sua página, você pode criar menus e personalizá-los facilmente. Nosso modelo não inclui uma área de cabeçalho, portanto, precisaremos criar uma primeiro.

Para fazer isso, localize o bloco Column e arraste-o para a parte superior da página.

Bloco de colunas SeedProd

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

Escolha um layout de coluna

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

Adicionar um bloco de imagem ao menu

Para carregar a imagem de seu logotipo, clique no botão "Use Your Own Image" (Use sua própria imagem) no painel de configurações do bloco. Isso permite que você escolha uma imagem da biblioteca de mídia do WordPress ou carregue uma imagem do seu computador.

Faça upload de um logotipo personalizado para seu menu

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

Adicionar o bloco do menu de navegação

Nas configurações do bloco, há duas maneiras de exibir seu menu.

O tipo de menu Simple permite que você adicione links de menu individuais sem sair do construtor de páginas. Basta adicionar um nome de menu e colar seu link personalizado.

Menu simples do WordPress

Você também pode fazer com que o alvo do link não seja seguido e abri-lo em uma nova guia.

O tipo de menu WordPress permite exibir os menus que você já criou no WordPress. Clicar no menu suspenso mostrará todos os menus disponíveis em seu site, como o Menu principal ou o Menu principal.

Opção de menu avançado do WordPress

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

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

Personalizações avançadas do menu do WordPress

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

Para gerenciar seus menus, clique no link Menus Screen (Tela de menus ) ou navegue até Appearance " Menus ( Aparência " Menus ) no administrador do WordPress.

Gerenciar a aparência do menu

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

Lembre-se de clicar no botão Save Menu para salvar suas funções de menu.

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

Basta localizar o bloco de botões e adicioná-lo à área do cabeçalho.

Botão de menu do WordPres

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

Configurações de personalização do botão de menu

Etapa 5. Publique sua página personalizada

Quando estiver satisfeito com a aparência da página, clique em Save and Publish ( Salvar e publicar ) no canto superior direito da tela.

Publicar menu do WordPress

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

Exemplo de menu personalizado do WordPress

Como personalizar o menu do WordPress com o WordPress Site Editor

O primeiro método é uma excelente solução para qualquer site, independentemente do tema que você usa. Entretanto, se estiver usando um tema do WordPress baseado em blocos, como o Twenty Twenty Three, talvez prefira usar o editor de sites do WordPress para personalizar o menu.

Observação: esse método não funciona com todos os temas nem permite que você personalize todas as partes do menu.

Para abrir o editor do site, navegue até Appearance " Editor no painel do WordPress.

Editor de sites do WordPress

Na tela seguinte, clique na guia Patterns (Padrões ).

Padrões do editor de sites

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

Modelo de cabeçalho do editor do site

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 o estilo do menu.

Personalizar o menu no editor de sites

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

Personalizar a cor de fundo do menu

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

Classes CSS de menu personalizado

Para adicionar outra opção de menu, como um botão de cabeçalho, clique no ícone Add Block (Adicionar bloco ).

Adicionar bloco de botões ao menu do WordPress

Agora você pode procurar um bloco e clicar nele para adicioná-lo ao 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 Save (Salvar ).

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

Exemplo de menu personalizado do WordPress com editor de sites

Como personalizar o menu do WordPress sem um plug-in

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

Para isso, recomendamos o uso de um plugin de snippet 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 principais arquivos do WordPress, como o arquivo functions.php.

Para fazer isso, instale o plug-in gratuito WPCode e, em seguida, acesse Code Snippets " Add Snippet no painel do WordPress.

WPCode Add Snippet

Nessa página, você verá snippets prontos que podem ser adicionados ao seu site com apenas alguns cliques.

Para este tutorial, queremos criar nosso próprio snippet, portanto, passe o mouse sobre 'Add Your Custom Code' e clique no botão Use snippet.

Usar snippet personalizado

Agora, digite um título para o snippet, abra a lista suspensa "Code Type" (Tipo de código) e clique em PHP Snippet.

Tipo de snippet de código PHP

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' );

Esse snippet adiciona um novo local de menu ao seu tema, "My Custom Menu".

Depois de fazer isso, role para baixo até as opções de inserção e escolha o método "Auto Insert" (Inserção automática) para adicionar o snippet em todo o site.

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

Executar o local do snippet em qualquer lugar

Agora você pode rolar até a parte superior da tela e clicar no botão de alternância "Inactive" (Inativo) para alterá-lo para "Active" (Ativo).

Por fim, clique em Salvar para tornar o snippet ativo.

Salvar snippet de código personalizado

Agora, vá para Appearance " Menus e veja a área "Display location" (Local de exibição).

Você deverá ver uma nova opção "My Custom Menu" nessa área, onde poderá adicionar itens de menu.

Menu personalizado no WordPress

A próxima etapa é adicionar seu menu personalizado ao tema do WordPress.

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

Basta acessar Appearance " Theme File Editor.

Em seguida, no menu à direita, localize o modelo em que deseja adicionar o menu, como o cabeçalho do seu site.

Editor de arquivos de temas do WordPress

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

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

Depois de adicionar o código, clique no botão Update File (Atualizar arquivo ) para salvar suas alterações.

Atualizar o arquivo do tema

Agora, se você visitar seu site, verá o menu personalizado em ação, mas perceberá que ele aparece em uma lista simples de marcadores.

Menu padrão personalizado do WordPress

Você pode estilizar o menu para que ele corresponda melhor ao seu tema ou marca do WordPress, adicionando um código CSS personalizado ao seu site.

Para fazer isso, vá para Appearance " Customize (Aparência " Personalizar ) e clique em Additional CSS (CSS adicional ) no personalizador do WordPress.

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

CSS adicional do personalizador do WordPress

Agora você pode estilizar o menu usando a classe CSS que adicionou ao modelo do tema. Em nosso exemplo, é .custom_menu_class.

No código a seguir, estamos adicionando margense preenchimento, definindo a cor do texto como preto 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 é atualizado automaticamente para que você possa ver como o menu fica com o novo estilo. Se você estiver satisfeito com as alterações, publique-as para torná-las efetivas.

Como personalizar o menu do WordPress com CSS

Mais dicas de navegação do WordPress

Esperamos que este guia tenha ajudado você a aprender como personalizar o menu do WordPress. Para obter mais ajuda com a navegação do WordPress, confira as dicas e os tutoriais a seguir:

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.