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.
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.
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.
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.
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.
ação26
Como criar conteúdo exclusivo para seus usuários no WordPress
Germain Jung disse:
Outubro 10 2018 para 10 20 h min
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.