Ir para o conteúdo principal

Como adicionar estilo a seus menus de navegação

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

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

Deseja personalizar os 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 no seu site. Você pode personalizá-lo facilmente usando CSS para atender aos seus requisitos. Neste tutorial, mostraremos como dar estilo aos 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 iniciantes não se sentem confortáveis ​​com a edição CSS dos temas do WordPress. É nesse ponto que um plug-in para estilizar um menu se torna prático, pois evita que você edite arquivos de tema ou codificação.

Primeiro, o que você precisa fazer é instalar e ativar o plug-in " CSS herói ". Para mais detalhes, consulte o 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).

Após ativar o plug-in, você será redirecionado para uma página na qual precisará fornecer sua licença. Basta seguir as instruções na tela e você será redirecionado para o seu site em apenas alguns cliques.

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

css-herói-Menu-wordpress

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

bar de ferramentas de css-herói

Você deve clicar no ícone azul na parte superior para começar a editar.

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.

Comece a promover seu blog

Faça o download de dezenas de logotipos, banners, modelos de sites e muitas outras ferramentas de marketing para comercializar seu blog WordPress. [Recomendado]

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 ele nos mostrou uma boa interface para selecionar fontes, alterar a cor, o tamanho e outras propriedades do texto.

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

PREVIEW-to-css-herói vivo

Quando estiver satisfeito com as alterações, clique no botão "Salvar" na barra de ferramentas " CSS herói Para salvar suas alterações.

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

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.

Segundo método: Como alterar manualmente o estilo do seu menu de navegação

Este método requer que você edite os arquivos para o seu tema WordPress. Você deve usá-lo apenas se for um desenvolvedor e tiver conhecimento na criação de temas para WordPress.

A melhor maneira de fazer isso é personalizar o tema do WordPress criando um tema filho. Se você alterar apenas o CSS, convido você a ler nosso tutorial em 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.

? <Wp_nav_menu Php (); ?>

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.

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

<( 'Primária', 'menu_class' =>' principal menu ') gama wp_nav_menu php (' theme_location =)>; ?>

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.

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

#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 " ID Usado pelo seu tema WordPress.

Essa estrutura o ajudará a alterar 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.

Este artigo contém comentários 0

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
3 ações
ação2
chilrear1
Enregistrer