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.
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.
Isso abrirá uma biblioteca de modelos de página de destino 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 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.
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 ).
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.
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.
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.
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.
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 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.
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.
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.
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.
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.
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.
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.
Em seguida, nas configurações do bloco, você pode adicionar o link do menu e personalizar o estilo do botão.
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.
A partir daí, você pode visitar a página para ver seu menu personalizado do WordPress em ação.
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.
Na tela seguinte, clique na guia Patterns (Padrões ).
A partir daí, clique na opção Header (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 o estilo do menu.
Por exemplo, você pode ajustar a cor de fundo do menu, as fontes, o preenchimento, as margens, as bordas e muito mais.
Se você rolar para baixo até a guia Advanced (Avançado ), poderá inserir classes CSS personalizadas.
Para adicionar outra opção de menu, como um botão de cabeçalho, clique no ícone Add Block (Adicionar bloco ).
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.
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.
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.
Agora, digite um título para o snippet, abra a lista suspensa "Code Type" (Tipo de código) 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' );
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.
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.
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.
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.
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.
Agora, se você visitar seu site, verá o menu personalizado em ação, mas perceberá que ele aparece em uma lista simples de marcadores.
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.
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.
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:
- Como editar menus móveis no WordPress (guia para iniciantes)
- Como adicionar um ícone de carrinho de compras do WooCommerce nos menus
- A navegação na página de destino está morta: eis o motivo
- Como editar a barra de navegação no WordPress passo a passo
- Como fazer um Landing Page sem navegação (maneira fácil)
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.