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

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]

Fazendo o seu site se destacar da multidão às vezes é mais fácil dizer do que fazer. Felizmente, você pode se divertir fazendo o pequeno "faça você mesmo" adicionando toques criativos de personalização que farão com que seu blog se destaque dos demais.

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 as alterações que aplicamos aqui só serão efetivas 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 uma opção adicional, você notará que os ícones também mudam de cor.

Primeiro mostrarei como aplicar a cor de fundo no menu. Então, separadamente, vou mostrar como fazer com que os ícones sociais combinem.

Se você ainda não leu o nosso tutorial sobre apresentação do tema WordPress DiviConvido você a fazer isso.

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 deve ser efetivo porque o ID "divs" genérico do Divi é o mesmo para todos os formatos (# main-header), até onde eu sei. Se você tiver problemas com outros formatos.

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]

Temos que nos certificar de que os links estejam na parte inferior. As cores que eu escolhi, que você encontrará no Coolors.co se você quiser usá-las, estão no lado mais escuro, então eu tenho que fazer o link de texto ter uma cor clara. 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 você deseja aplicar a primeira alteração (você deve ver os links do menu no lugar). Clique no ícone em "3 lines" e uma caixa de opções aparecerá.

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.

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]

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

Ícones de redes sociais (opcional)

Para esta parte, vamos modificar o código que já fizemos, então adicionar algum código no nível CSS do site, e vou explicar por que alguns CSS devem ser adicionados nas páginas individuais e por que alguns não devem ser.

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

Em seguida, vá para as configurações na barra de submenu e defina as cores e o texto do plano de fundo. Eu escolho "branco" como a cor do texto, porque vou adicionar um fundo colorido redondo a cada ícone social para combinar com a nova cor de 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 procedemos para adicionar CSS em cada página? Vamos voltar e editar o que escrevemos antes. Substitua o que você tem pelo seguinte CSS, ou se você reconhece o que é diferente, você pode simplesmente adicionar o código extra.

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

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

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

CSS geral

O seguinte código 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 está indo tão bem na caixa CSS da página. A razão é que essa parte específica do código afeta todos os elementos de destino, portanto, é ineficiente colocar o mesmo código em vários lugares. Apenas 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 evitar a adição de peso ao seu site.

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

Outros tutoriais Divi

Este artigo contém comentários 2
  1. 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.

Cool WordPress temas que eu encontrei em
E há mais temas e modelos 50 000 para você escolher!

De volta ao topo
35 ações
ação26
chilrear2
Enregistrer7
Whatsapp