Ir para o conteúdo principal

Como mudar a cor dos menus entre as páginas Divi

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]

Fazer seu site se destacar da multidão às vezes é mais fácil falar do que fazer. Felizmente, você pode jogar o pequeno faça-você-mesmo, adicionando toques criativos de personalização que farão com que seu blog se destaque dos outros.

Neste tutorial, mostrarei como usar o construtor Divi para personalizar seu blog, especialmente a área CSS.

Esta é a região da qual estou falando:

O que isso significa é que quaisquer alterações que aplicarmos aqui serão efetivas apenas na página que estamos editando. É um recurso incrivelmente interessante e útil!

Aqui está o resultado final que teremos no final deste tutorial. A cor de fundo do menu de navegação que muda dependendo da página que você está visitando. Como opção adicional, você notará que os ícones também mudam de cor.

Vou mostrar primeiro como aplicar a cor de fundo no menu. Então, separadamente, mostrarei como ajustar os ícones sociais.

Se você ainda não leu nosso tutorial em apresentação do tema WordPress Divi, Convido você a fazê-lo.

Vamos começar!

Aplicar as cores para menus

Primeiro, eu uso o formato de cabeçalho padrão. Se você usar outro formato, este tutorial ainda deverá ser eficaz, porque o ID "divs" genérico do Divi é o mesmo para todos os formatos (# main-header), tanto quanto eu sei. Se você tiver problemas com outros formatos.

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]

Temos que garantir que os links estejam na parte inferior. As cores que eu escolhi, que você encontrará no Coolors.co, se quiser usá-las, estão no lado mais escuro, então eu tenho que fazer o link do texto ter uma cor clara. Eu optei pela cor branca.

Eu uso rgba (255,255,255,0.6), que será a cor do link e branco escuro como a cor do link ativo (para o efeito visual desejado)

Em seguida, vá para a página na qual deseja aplicar a primeira alteração (você deve ver os links do menu no lugar). Clique no ícone em "Linhas 3" e uma caixa de opções será exibida.

Agora, adicione o seguinte CSS nesta caixa:

# Mão-header {background: #474f61; }

Você deve ter algo semelhante a isso, não se esqueça de alterar o código hexadecimal da cor de sua escolha:

Clique em ' Salvar e atualizar E isso se aplicará ao menu principal, tudo em uma linha de código.

Agora, você só precisa adicionar o mesmo código para todas as suas páginas e alterar o código hexadecimal sempre.

Ícones de redes sociais (opcional)

Nesta parte, modificaremos o código que já fizemos e, em seguida, adicionaremos algum código no nível de CSS do site, e explicarei por que alguns CSS devem ser adicionados nas páginas individuais e por que outros não. ser.

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]

Então, primeiro você precisa ter certeza de que configurou seus links sociais. Vá para " Opções do Divi> Tema geral E adicione seus URLs às suas páginas de mídia social.

Em seguida, vá para suas configurações na barra de submenus e defina as cores e o texto do plano de fundo. Eu escolhi "branco" como a cor do texto, porque adicionarei um plano de fundo colorido redondo a cada ícone social para combinar com a nova cor do menu, para que o ícone possa aparecer.

Vá para " Cabeçalho e navegação> Elementos do cabeçalho E marque a caixa " Mostrar ícones sociais ".

Você se lembra de como passamos a adicionar CSS em cada página? Voltaremos e editaremos o que escrevemos antes. Substitua o que você tem pelo CSS a seguir ou, se reconhecer o que é diferente, basta adicionar o código extra.

# Mão-header, # .e top-header-social-ícone {background: #474f61; }

Esse código permitirá que nosso site não apenas altere a cor de segundo plano do menu nesta página, mas também o segundo plano de nossos ícones sociais. Acabamos de adicionar outro elemento à mistura. Você deve ter algo parecido com isto:

Pode ser necessário verificar se as cores hexadecimais estão corretas em cada página.

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]

CSS geral

O código a seguir estará no seu " Opção de tema> caixa CSS Ou no arquivo de estilo do tema filho.

# Top-header-social-ícones .e li {margin-left: 5px; } # .e top-header-social-ícone {padding: 4px; -margem inferior: 8px; largura: 30px; altura: 30px; fronteira de raio: 50%; A linha-altura: 24px; }

Você pode estar se perguntando por que isso não acontece na caixa CSS da página. O motivo é que esse trecho de código específico afeta todos os elementos de destino, por isso é ineficiente colocar exatamente o mesmo código em vários locais. Somente a cor do plano de fundo é alterada por página, mas esse código não é alterado por página. É apenas uma prática recomendada para evitar adicionar peso ao seu site.

Isso é tudo para este tutorial, espero que ele permita que você personalize os menus no seu blog WordPress.

Outros tutoriais Divi

Este artigo contém comentários 3
  1. Bom Dia,

    Obrigado por todos os seus tutoriais.
    Você sabe se podemos colocar o submenu divi (segundo nível abaixo da lista suspensa) na largura de preenchimento? que ocupa toda a largura da página

  2. Bom Dia,

    Como você muda a cor do texto no cabeçalho principal? Tendo um plano de fundo (no meu cabeçalho principal) transparente, a cor da fonte que eu escolhi (no meu cabeçalho principal, que mostra meus diferentes tópicos) através da interface de personalização do divi é preta. No entanto, gostaria que fosse branco em algumas páginas, porque a foto abaixo é muito escura.

    Comment faire?

    Merci par avance,

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
35 ações
ação26
chilrear2
Enregistrer7