Como personalizar o menu Divi com CSS

Você usa o Divi e quer aproveitar ao máximo o seu cardápio? Neste guia, mostraremos como personalizar o menu Divi com CSS para se destacar de seus concorrentes e melhorar a experiência do cliente em seu site.

Com mais de 3 milhões de usuários, o Divi é um dos construtores de páginas mais populares do mercado. Uma das razões para isso é que é extremamente flexível e vem com várias opções de personalização que permitem que você dê ao seu site uma aparência profissional, mesmo se você for iniciante. No entanto, para levar o design do seu site para o próximo nível, você precisará personalizar o design com scripts CSS. Há muitas coisas que você pode editar, mas uma das mais importantes é o menu de navegação.

Por que editar o menu Divi?

A barra de navegação do menu é um dos elementos mais importantes de qualquer site. Está na parte superior da página, por isso é o primeiro elemento que os usuários veem quando carregam uma página. Normalmente, esse menu aparece em todas as páginas de um site tornando-o o elemento que os usuários mais veem.

Além disso, a principal função de um menu é fornecer aos visitantes uma maneira fácil de navegar e melhorar a experiência do usuário. É por isso que um menu de navegação bem organizado e projetado pode ter um grande impacto no seu negócio.

Embora o Divi venha com muitas ferramentas para editar o menu, adicionar código personalizado é a melhor maneira. Mas não se preocupe se você não sabe codificar. Neste tutorial, mostraremos como personalizar o menu Divi com CSS passo a passo.

Como personalizar o menu Divi com CSS

Nesta seção, mostraremos como editar o menu Divi com CSS para aproveitá-lo ao máximo. Você precisa colar os scripts CSS no WordPress Customizer acessando Appearance > Customize > Additional CSS . Alternativamente, você pode colá-los no arquivo style.css do seu tema filho.

NOTA : Antes de começar:

• Backup : Crie um backup completo do seu site
• Use um tema filho : você pode criar um seguindo este guia ou usar qualquer um desses plugins

Agora vamos ver diferentes opções para personalizar o menu Divi com scripts CSS.

1) Altere a cor de fundo da barra de navegação

O Divi oferece a opção de editar a cor de fundo do menu, mas aplica-a a todo o cabeçalho. Se você deseja apenas alterar a cor da barra de navegação, use este script:

.et_menu_container{background-color:red;}

2) Altere as fontes do menu

Outra maneira de personalizar o menu Divi é alterar as fontes do menu. Por exemplo, este script CSS mudará a fonte de todos os elementos do menu para Lucida Console. Isso inclui menus suspensos e qualquer outro conteúdo exibido no contêiner do menu.

.et_menu_container{font-family: Lucida Console, Courier, monospace;}

Nota : A família de fontes é um conjunto de fontes conforme mostrado no exemplo acima. Você também pode escolher uma única fonte, mas primeiro você precisa carregá-la na sua instalação do WordPress. Para saber mais sobre fontes, você pode dar uma olhada nos seguintes links:

• Como adicionar fontes do Google ao WordPress
• Alterar fontes no WordPress
• Família de fontes

3) Altere a cor do texto nos elementos de foco

Para alterar a cor do texto ao passar o mouse sobre um elemento, use este código:

#top-menu li a:hover{
color:blue;
}

Isso mudará a cor dos links da barra de navegação para azul quando os usuários passarem o mouse sobre eles, mas você pode ajustar o código e alterá-lo para qualquer cor que desejar usando o código hexadecimal ou o formato RGBA.

4) Alterar a largura das listas suspensas

Para garantir que cada elemento do menu Divi tenha uma boa aparência, você pode ajustar a largura do menu suspenso. Por exemplo, para dar ao menu suspenso uma largura de 500 pixels, use este script CSS:

#top-menu > li > .sub-menu{
width:500px;
}

5) Adicione uma imagem de fundo à barra de navegação do menu Divi

Além de pequenos ajustes, você também pode fazer mudanças mais radicais. Por exemplo, digamos que você queira personalizar o menu Divi com CSS exibindo uma imagem como plano de fundo da barra de navegação. Para fazer isso, basta copiar e colar este código:

.et_menu_container{
background-image:url('http://localhost/Sampler/wp-content/uploads/2020/10/gift4.png');
background-size:cover;
}

Observe que estamos usando uma imagem enviada anteriormente. Basta carregar sua própria imagem e substituir o URL da imagem pelo que você deseja usar.

Como alternativa, você também pode usar uma imagem de um URL externo, mas recomendamos que você carregue uma imagem na biblioteca de mídia do seu site. Dessa forma, você garante que tem controle total sobre a imagem e não há risco de perdê-la se o proprietário da imagem decidir excluí-la.

Por fim, observe que estamos usando a propriedade para que a imagem cubra todo o espaço disponível. Existem algumas outras opções, como repetir, auto, conter e assim por diante, então escolha a que você gosta. Para opções mais complexas sobre como a imagem é impressa em seu site, confira este site.

Como aplicar CSS a um único elemento

Os exemplos acima editam todos os elementos na barra de navegação do menu, mas essa não é a única maneira de personalizar o menu Divi usando código CSS. Você também pode aplicar os scripts CSS a um único elemento. No entanto, antes de entrarmos nisso, vamos entender melhor como o CSS funciona e como criamos os scripts.

Uma única linha CSS é chamada de regra , que é composta por um seletor, uma propriedade e um valor.

Como propriedade e valor têm nomes autoexplicativos, vamos nos concentrar no seletor.

O seletor é um código que aponta para o elemento que é modificado pela propriedade e pelo valor. Os seletores podem se referir a muitos ou a um único elemento.

Quando não especificamos um único elemento, o CSS aplica a regra a todos os elementos “filhos” dele. Isso segue o princípio de herança do CSS que declara esse comportamento.

Aplicar CSS a elementos únicos

Para aplicar CSS a elementos únicos, você precisa usar o console do navegador e escolher o seletor específico para esse elemento. Para fazer isso, vá para a página que deseja editar e clique com o botão direito do mouse ou pressione F12 para abrir o console do navegador.

Você verá algo assim:

É muito código! Não se preocupe, pode parecer esmagador, mas é muito fácil de manusear quando você se acostuma.

Você verá como os elementos são destacados em sua página da Web enquanto abre as tags HTML <body> , <header> , <div> e passa o mouse sobre elas. Dessa forma, você pode ver para qual elemento está apontando e pegar a classe ou ID HTML que precisa usar em seu código CSS.

Clique no elemento que deseja alterar e você verá o seletor CSS

Para copiá-lo, clique com o botão direito do mouse e selecione copiar > seletor CSS . Agora que você copiou o seletor de CSS, vá para o painel do WordPress, vá para Customizer > Additional CSS e cole-o:

#top-menu > li:nth-child(1)

Este seletor aponta para o link “Home” em nosso site de exemplo, então agora podemos usar qualquer uma das propriedades CSS e aplicá-lo apenas ao link “Home” do nosso menu. Por exemplo, para alterar a cor do plano de fundo para vermelho, você usará algo assim:

#top-menu > li:nth-child(1){background-color:red;}

Observe que a :nth-child(1) está nos dizendo que este é o primeiro (1) elemento da lista no mesmo nível de hierarquia.

Agora que você sabe como copiar um seletor usando o inspetor do navegador, pode aplicar seu estilo CSS a qualquer elemento do seu site.

Mais exemplos de scripts CSS

Há muito mais que você pode fazer para personalizar seu menu Divi com CSS. Vamos dar uma olhada em mais alguns exemplos.

Adicionar um ícone ao elemento de menu

Para usar os ícones do Font Awesome, primeiro, você precisará enviá-los para o seu site. Depois disso, você pode colar o seguinte script para imprimir um ícone ao lado do primeiro elemento do menu:

#top-menu > li:nth-child(1) a::before{

padding-right: 10px;

font-family: "Font Awesome 5 Free";

font-weight: 900; content: "\f015";

}

Se você vir uma fonte quebrada, significa que Font Awesome não foi carregado.

Para carregar conjuntos de ícones, insira esta linha na seção de cabeçalho indo para Opções de Divi > Avançado .

<link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet">

Esconda qualquer elemento do menu usando CSS

Depois de ter o seletor CSS correto, você pode aplicar qualquer propriedade CSS a ele. Um dos mais comuns e úteis é display:none ; que permite remover qualquer elemento do menu. Por exemplo, para ocultar o elemento carrinho da barra de navegação do menu, cole este código:

.et-cart-info{display:none;}

Conclusão

Em suma, editar o menu do seu site é uma excelente maneira de melhorar a navegação do seu site e melhorar a experiência do usuário em seu site. Embora o Divi tenha várias opções para isso, a melhor maneira é personalizar o menu do Divi com scripts CSS.

Neste tutorial, vimos várias maneiras de editar o menu passo a passo para ajudá-lo a levar seu site para o próximo nível, mesmo que você não tenha habilidades de codificação. Até agora, você deve saber como:

• Alterar a cor de fundo do menu
• Modifique as fontes
• Alterar a cor do texto em elementos de foco
• Alterar a largura do menu suspenso
• Adicionar uma imagem de fundo ao menu

Além disso, vimos como aplicar CSS a elementos únicos, adicionar ícones ao menu e ocultar qualquer elemento. Recomendamos que você tome esses scripts como base, brinque e personalize-os para adaptá-los ao seu site.

Para obter mais guias sobre como aproveitar ao máximo o Divi, confira os seguintes guias:

• Personalizar a página do produto no Divi
• Como adicionar o botão Adicionar ao carrinho nas páginas da loja Divi
• Como ocultar/remover rodapé no Divi
• O formulário de contato Divi não está funcionando - como corrigi-lo

Você já tentou editar o menu do seu site com CSS? O que você mudou? Deixe-nos saber na seção de comentários abaixo!