Ir para o conteúdo principal

Como adicionar estilo a seus menus de navegação

Divi: o tema WordPress mais fácil de usar

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]

Você quer 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 às suas necessidades. 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

1 Method: Como estilizar seus menus do WordPress com um plugin

Seu tema WordPress usa CSS para seus estilos de navegação. Muitos iniciantes não estão confortáveis ​​com a edição CSS dos temas do WordPress. É quando um plugin para estilizar um menu se torna útil, porque evita editar arquivos de tema ou escrever código.

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

CSS Hero é um plugin 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 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 ao seu site com apenas alguns cliques.

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

css-herói-Menu-wordpress

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

bar de ferramentas de css-herói

Você deve clicar no ícone azul no topo para começar a editar.

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

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

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]

Na captura de tela acima, você pode ver o item de menu, o menu de navegação e o container do menu de navegação, e assim por diante.

Suponha que queremos mudar a cor do texto de todos os itens no menu de navegação. Neste caso, vamos selecionar 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. CSS Hero irá apresentar-lhe uma interface simples, onde você pode 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 interface interessante para selecionar fontes, alterar a cor do texto, o tamanho e outras propriedades.

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 ir e vir entre essas 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 somente se for um desenvolvedor e tiver conhecimento em criação de temas do WordPress.

A melhor maneira de fazer isso é personalizar o tema do WordPress criando um tema filho. Se você só 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 as 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 de menu. No entanto, a maioria dos temas tem vários locais onde você pode exibir menus de navegação.

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

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

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

Este código diz ao WordPress que é onde o tema exibe o menu principal. 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.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

#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

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

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

É isso para este tutorial. Espero que ele permita que você personalize os menus do seu blog WordPress. Sinta-se à vontade para compartilhar com seus amigos em suas redes sociais favoritas.

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
Whatsapp