Fazer com que seu site se destaque da multidão às vezes é mais fácil de falar do que fazer. Felizmente, você pode se envolver no DIY adicionando toques criativos de personalização que garantirão que seu blog se destaca dos outros.

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

Esta é a região da qual estou falando:

Isso significa que todas as alterações que fizermos aqui só terão efeito na página que estamos editando. Este é um recurso extremamente 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 primeiro mostrar como aplicar a cor de fundo no menu. Em seguida, separadamente, mostrarei como fazer os ícones sociais corresponderem.

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, estou usando o formato de cabeçalho padrão. Se você estiver usando outro formato, este tutorial ainda deve ser eficaz porque o ID genérico de "divs" no Divi é o mesmo para todos os formatos (# main-header), pelo que eu sei. Se você tiver problemas com outros formatos.

Precisamos ter certeza de que os links aparecem na parte inferior. As cores que escolhi, que você encontrará em Coolors.co se quiser usá-las, estão no lado mais escuro, então tenho que fazer o link de texto uma cor clara. Optei pela cor branca.

Estou usando 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 "3 linhas" 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 para a cor que desejar:

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

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

Í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.

Então, primeiro você precisa ter certeza de que 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 menu secundária e defina as cores de fundo e de texto. Estou escolhendo 'branco' como a cor do texto porque vou adicionar um fundo redondo colorido a cada ícone social para combinar com a nova cor do menu, de modo 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; }

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

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

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 em seu blog WordPress.

[vc_row center_row=”sim”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Ralway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD DIVI THEME [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutoriais” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]BAIXE O PLANILHAS DIVI[/vcex_button][/vc_column][/vc_row]

Outros tutoriais Divi

• sites 5 para uso restaurante Divi tema
• Como adicionar texto em um produto Divi WooCommerce
• Como alterar a cor do menu entre as páginas Divi
• Como personalizar as grades de um blog com Divi
• Como usar o editor Divi papel em WordPress
• Como criar um controle deslizante Divi em tela cheia
• Como mudar a cor dos menus entre as páginas Divi
• Recursos que você provavelmente não conhece sobre o Divi
• Como usar o Divi Builder no WordPress
• Como usar o módulo de rolagem de vídeo Divi
• Como usar o módulo Divi Builder Flip
• Como adicionar um módulo de depoimento no Divi Builder
• Como usar o módulo de texto Divi
• Como criar um controle deslizante no Divi
• Como editar uma função de usuário Divi
• Como usar o módulo Divi Social Media
• Como usar o módulo de loja no tema WordPress Divi
• Como usar o módulo da barra lateral Divi
• Como usar o módulo Divi Price Table
• Como usar o módulo de título das publicações Divi
• Como adicionar um módulo de vídeo do Divi
• Como usar o módulo de navegação do artigo
• Como usar o módulo de pesquisa Divi
• Como usar o módulo de carteira Divi
• Como usar o módulo person no Divi Builder
• Como usar o módulo de carteira com filtro Divi
• Como usar o módulo deslizante de largura total
• Como usar o módulo de imagem do Divi Builder
• Como usar o módulo de navegação de largura total do Divi Builder
• Como usar o módulo da galeria de imagens
• Como usar o módulo de placa de largura total do Divi Builder
• Como usar o módulo de portfólio de largura total Divi
• Como usar o módulo de cabeçalho Divi de largura total
• Como usar o módulo do contador Divi
• Como usar o controle deslizante de artigos no Divi Builder
• Como usar o módulo Divi Email Optin