Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 901.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62.

Você gostaria de personalizar seus menus de navegação do WordPress para alterar suas cores ou aparência? Seu tema WordPress gerencia a aparência dos menus de navegação em seu site. Você pode personalizá-lo facilmente usando CSS para atender aos seus requisitos. Neste tutorial, mostraremos como estilizar os menus de navegação do seu blog WordPress.

To-the-style-to-menus de navegação de wordpress

Método 1: Como estilizar seus menus do WordPress com um plug-in

Seu tema WordPress usa CSS para seus estilos de navegação. Muitos novatos não se sentem confortáveis ​​com a edição CSS de temas WordPress. Então é aí que um plugin para estilizar um menu se torna prático, porque evita que você edite arquivos de tema ou escreva código.

Primeiro, o que você precisa fazer é instalar e ativar o plugin " CSS herói " Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plugin do WordPress.

CSS Hero é um plug-in WordPress premium que permite criar seu próprio tema WordPress sem escrever uma única linha de código (Nenhum HTML ou CSS necessário).

Depois de ativar o plugin, você será redirecionado para uma página onde precisará fornecer sua licença. Basta seguir as instruções na tela e você será levado ao seu site com apenas alguns cliques.

Agora você precisa clicar no botão CSS herói Na barra de ferramentas do WordPress.

css-herói-Menu-wordpress

O CSS Hero oferece um editor WYSIWYG (o que você vê é o que você obtém "O que você vê é o que você obtém") Clicar neste botão o levará ao seu site com uma barra de ferramentas flutuante CSS Hero à direita.

bar de ferramentas de css-herói

Você precisa clicar no ícone azul na parte superior para iniciar a edição.

Mova o mouse sobre o menu de navegação e o CSS Hero o destacará exibindo suas bordas. Quando você clica no menu de navegação destacado, ele mostra os diferentes itens que você pode editar.

Crie facilmente seu site com Elementor

Elementor permite que você crie Facilmente e Gratuito qualquer site ou blog com um visual profissional. Pare de pagar muito por um site que você pode fazer sozinho.

Personalize-a-menu com-css-herói

Na captura de tela acima, você pode ver o item de menu, o menu de navegação e o contêiner do menu de navegação, etc.

Suponha que desejemos alterar a cor do texto de todos os itens no menu de navegação. Nesse caso, selecionaremos o menu de navegação que toca o menu inteiro.

O CSS Hero agora mostrará as diferentes propriedades que você pode alterar, como texto, cor de fundo, bordas, margens, preenchimento, etc.

css-propriedade-herói

Você pode clicar em uma propriedade que deseja editar. O CSS Hero apresentará uma interface simples na qual você poderá fazer suas alterações.

edit-a-propriedade-css-com-css-herói

Na captura de tela acima, selecionamos o texto e ela nos mostrou uma bela interface para selecionar fontes, alterar a cor, o tamanho do texto e outras propriedades.

Quer vender seus produtos na internet?

Baixe WooCommerce grátis, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress e criar facilmente sua loja online. Perfeito para iniciantes.

Ao fazer alterações, você terá uma visualização ao vivo do resultado final.

PREVIEW-to-css-herói vivo

Assim que estiver satisfeito com as alterações, clique no botão "Salvar" no " CSS herói Para salvar suas alterações.

A melhor parte desse método é que você pode desfazer facilmente as alterações feitas. O CSS Hero mantém um histórico completo de todas as suas alterações e você pode entrar e sair dessas mudanças.

Método dois: como alterar manualmente o estilo do menu de navegação

Este método requer que você edite seus arquivos de tema do WordPress. Você só deve usá-lo se for um desenvolvedor e tiver algum conhecimento de criação de temas WordPress.

A melhor maneira de fazer isso é personalizar seu tema WordPress criando um tema filho. Se você apenas muda CSS, então eu convido você a ler nosso tutorial sobre como adicionar código CSS personalizado no WordPress.

Os menus de navegação do WordPress são exibidos em uma lista não ordenada (lista com marcadores).

Se você usar a seguinte tag php, ela exibirá uma lista sem classes CSS associadas a ela.


Sua lista com marcadores teria o "menu" do nome da classe, com cada item da lista tendo sua própria classe CSS.

Isso pode funcionar se você tiver um único local do menu. No entanto, a maioria dos temas tem vários locais onde você pode exibir os menus de navegação.

Usar apenas as classes CSS padrão pode causar conflitos com menus em outros lugares.

Esta é a razão pela qual você precisa definir a classe CSS e a localização do menu. Provavelmente, seu tema WordPress já está fazendo isso adicionando os menus de navegação usando um código como este:

'principal', 'menu_class' => 'menu principal',)); ?>

Este código informa ao WordPress que é aqui que o tema exibe o menu principal. Ele também adiciona uma classe CSS " Menu principal No menu de navegação.

Agora você encontrar o estilo de seu menu de navegação usando a estrutura CSS.

#header menu de .primary {} // recipiente classe #header de menu ul .primary {} // recipiente classe primeira lista não ordenada #header menu de .primary ul ul {} // lista não ordenada Dentro de uma lista não ordenada #header .primary -menu li {} // Cada item de navegação #header li menu de .primary {} // Cada item de navegação # cabeçalho li âncora menu de .primary ul {} // lista não ordenada se houver suspensa itens #header .primary -menu li li {} // Cada suspensa item de menu de navegação li .primary li # cabeçalho tem {} // Cada folha âncora para baixo item de navegação

Substitua #header pela classe de contêiner ou pelo " ID Usado pelo seu tema WordPress.

Esta estrutura o ajudará a mudar completamente a aparência do seu menu de navegação.

É isso neste tutorial. Espero que isso permita que você personalize os menus do seu blog WordPress. Sinta-se livre para compartilhá-lo com seus amigos em suas redes sociais favoritas.