Como trocar o cabeçalho Divi por outro no Scroll

O cabeçalho continua sendo, inevitavelmente, um dos elementos mais importantes do seu site. Ele influencia o processo de navegação dos visitantes e permite que eles encontrem o que procuram em um piscar de olhos. Agora, se você está procurando uma maneira de trocar seu cabeçalho Divi na rolagem por outro, você vai gostar deste post. Mostraremos exatamente como fazer isso com o criador de temas do Divi, elementos integrados e alguns códigos adicionais. Também estamos nos certificando de que haja algum espaço reservado gerado automaticamente para o cabeçalho na parte superior da página. Você também poderá baixar o arquivo JSON gratuitamente!

Vamos lá.

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Baixe o modelo de cabeçalho Swap Divi GRATUITAMENTE

Para colocar as mãos no template de cabeçalho Divi de troca gratuita, primeiro você precisa baixá-lo usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.

Baixe os arquivos

Download de graça

Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.

DOWNLOAD

Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!

1. Vá para Divi Theme Builder e comece a construir o cabeçalho global

Vá para Divi Theme Builder

Comece acessando o Divi Theme Builder no backend do seu site WordPress e clique em 'Add Global Header'.

Construir Cabeçalho Global

Em seguida, clique em 'Build Global Header' para ser redirecionado ao editor de modelos.

2. Crie os dois cabeçalhos na mesma seção

Modificar Seção

Dimensionamento

Uma vez dentro do editor de template, você notará uma seção. Abra as configurações da seção e certifique-se de que a largura da seção seja '100%'.

• Largura: 100%

Espaçamento

Em seguida, vá para as configurações de espaçamento e remova todo o preenchimento padrão superior e inferior.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Sombra da caixa

Também estamos usando uma sombra de caixa sutil.

• Posição vertical da sombra da caixa: 15px
• Cor da sombra: rgba (0,0,0,0,06)

Posição

Por último, mas não menos importante, faremos com que a seção se fixe na parte superior central de nossa página usando as configurações de posição na guia avançada.

• Cargo: Fixo
• Localização: Centro Superior

Adicionar cabeçalho de linha # 1

Estrutura da Coluna

Os dois cabeçalhos que criaremos farão parte da mesma seção. Usaremos uma linha separada para cada cabeçalho. Adicione o cabeçalho da primeira linha usando a seguinte estrutura de coluna:

Cor de fundo

Sem adicionar nenhum módulo ainda, abra as configurações de linha e altere a cor de fundo.

• Cor de fundo: # 000000

Dimensionamento

Modifique também as configurações de dimensionamento.

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Largura: 100%
• Largura máxima: 100%

Espaçamento

Em seguida, vá para as configurações de espaçamento e remova todo o preenchimento padrão superior e inferior.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Elemento Principal

Conclua as configurações da linha adicionando duas linhas de código CSS ao elemento principal da linha. Este código CSS nos ajudará a alinhar todo o conteúdo da coluna.

display: flex;
align-items: center;

Adicionar Módulo de Imagem à Coluna 1

Enviar Imagem

É hora de adicionar módulos, começando com um Módulo de imagem na coluna 1. Carregue um logotipo de sua escolha.

Alinhamento

Altere o alinhamento do módulo a seguir.

• Alinhamento de imagem: centro

Adicionar Módulo de Menu à Coluna 2

Selecione o menu

Na segunda coluna, o único módulo de que precisamos é um Módulo de Menu. Selecione um menu de sua escolha.

Remover cor de fundo

Em seguida, remova a cor de fundo do módulo.

Layout

Vá para a guia de design e altere o layout de acordo:

• Estilo: centrado

Configurações de texto do menu

Em seguida, faça algumas alterações nas configurações de texto do menu.

• Fonte do Menu: Roboto
• Peso da fonte do menu: negrito
• Cor do texto do menu: #ffffff (área de trabalho), # 000000 (tablet e telefone)
• Tamanho do texto do menu: 18 px

Configurações de texto do menu suspenso

A seguir, alteraremos a cor da linha do menu suspenso nas configurações de texto do menu suspenso.

• Cor da linha do menu suspenso: # 000000

Configurações de ícones

Também estamos mudando a cor do ícone do menu de hambúrguer.

• Cor do ícone do menu de hambúrguer: #ffffff

Espaçamento

Conclua as configurações do módulo adicionando alguns preenchimentos personalizados à esquerda e à direita em telas menores.

• Preenchimento esquerdo: 30 px (apenas tablet e telefone)
• Preenchimento direito: 30 px (apenas tablet e telefone)

Adicionar Módulo de Acompanhamento de Mídia Social à Coluna 3

Adicionar redes sociais de escolha

Na última coluna, o único módulo de que precisamos é um Módulo de Acompanhamento de Mídia Social. Adicione as redes sociais de sua escolha.

Cor de fundo da rede social individual

Em seguida, abra cada rede social individualmente e altere a cor de fundo para branco.

• Cor de fundo: #FFFFFF

Alinhamento

Volte para as configurações gerais do módulo e altere o alinhamento do módulo.

• Alinhamento do Módulo: Centro

Configurações de ícone

Modifique a cor do ícone também.

• Cor do ícone: # 0042c9

Fronteira

E complete as configurações do módulo adicionando algum raio de borda.

• Todos os cantos: 100px

Adicionar cabeçalho de linha # 2

Estrutura da Coluna

Vamos para o segundo cabeçalho! Adicione uma nova linha usando a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e altere as configurações de dimensionamento da seguinte forma:

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize Alturas de Coluna: Sim
• Largura: 100%
• Largura máxima: 100%

Espaçamento

Em seguida, remova todo o preenchimento padrão superior e inferior.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Elemento Principal

Em seguida, alinhe todo o conteúdo da coluna usando duas linhas de código CSS no elemento principal da linha.

display: flex;
align-items: center;

Cor de fundo da coluna 3

E complete as configurações de linha abrindo as configurações da coluna 3 e usando uma cor de fundo.

• Cor de fundo: # 0042c9

Adicionar Módulo de Imagem à Coluna 1

Enviar Imagem

Na coluna 1, o único módulo de que precisamos é um Módulo de imagem. Faça upload de um logotipo de sua escolha.

Alinhamento

A seguir, altere o alinhamento da imagem do módulo.

• Alinhamento de imagem: centro

Clonar Módulo de Menu e Colocar na Coluna 2 do Cabeçalho de Linha # 2

Clone o Módulo de Menu que foi usado na linha anterior e coloque a duplicata na coluna do meio da segunda linha.

Modificar as configurações de texto do menu

Abra o Módulo de Menu duplicado e altere a cor do texto do menu.

• Cor do texto do menu: # 0042c9

Modificar as configurações de texto do menu suspenso

Modifique também as configurações de texto do menu suspenso.

• Cor da linha do menu suspenso: # ffc21d

Modificar configurações de ícone

Conclua as configurações do Módulo de menu alterando a cor do ícone do menu de hambúrguer.

• Cor do ícone do menu de hambúrguer: # 0042c9

Adicionar Módulo de Botão à Coluna 3

Adicionar cópia

Na última coluna da linha, o único módulo de que precisamos é um Módulo de botão. Insira alguma cópia de sua escolha.

Alinhamento

Modifique o alinhamento do botão a seguir.

• Alinhamento do botão: Centro

Configurações de botão

Em seguida, defina o estilo do botão da seguinte maneira:

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão: 20 px (desktop), 18 px (tablet), 15 px (telefone)
• Cor do texto do botão: #ffffff
• Largura da borda do botão: 0 px

• Fonte do botão: Roboto
• Peso da fonte do botão: negrito

Espaçamento

E complete as configurações do módulo adicionando algum preenchimento personalizado em diferentes tamanhos de tela.

• Preenchimento superior: 33 px (desktop), 35 px (tablet), 38 px (telefone)
• Preenchimento inferior: 33 px (desktop), 35 px (tablet), 38 px (telefone)

2. Adicionar classes CSS

Seção

Depois de adicionar e estilizar todos os módulos, é hora de adicionar as classes CSS que usaremos em nosso código JQuery. Primeiro, abra as configurações da seção e use a seguinte classe CSS:

• Classe CSS: seção de cabeçalho

Cabeçalho de linha # 1

Em seguida, abra o cabeçalho da primeira linha e use a seguinte classe CSS:

• Classe CSS: header-1

Cabeçalho de linha # 2

Abra também a segunda linha. Use a seguinte classe CSS para isso:

• Classe CSS: header-2

3. Adicionar código JQuery e CSS

Adicionar Módulo de Código à Terceira Coluna da Primeira Linha

Depois que todas as classes CSS estiverem no lugar, é hora de adicionar o código. Adicione um novo Módulo de Código onde quiser dentro de sua seção. Estamos colocando-o na terceira coluna da primeira linha.

Adicionar código JQuery (entre tags de script)

Em seguida, adicione as seguintes linhas de código CSS entre as tags de script, como você pode ver na tela de impressão abaixo:

jQuery(function($){
    
var firstHeader = $('.header-1');
var secondHeader = $('.header-2');
var headerSection = $('.header-section');
  
headerSection.wrap('<div class="header-placeholder"></div>');
var headerWrap = $('.header-placeholder');
  
var headerHeight = firstHeader.outerHeight();
headerWrap.css('height', headerHeight);  

  
secondHeader.hide();
 
$(window).scroll(function() {
  
    var topPosition = $(window).scrollTop();
  
    if (topPosition >= 400) {
          firstHeader.slideUp();
          secondHeader.slideDown();
    }
  
    if (topPosition == 0) {
          secondHeader.slideUp();
          firstHeader.slideDown();
    }
  
});      
});

Adicionar código CSS (entre tags de estilo)

Adicione o seguinte código CSS também entre as tags de estilo :

.et_mobile_menu {
margin-top: 20px;
width: 300%;
margin-left: -100%;
}

4. Salve as alterações do Theme Builder e visualize o resultado

Neste ponto, a única coisa que resta a fazer é salvar todas as alterações do construtor de tema e visualizar o resultado em seu site!

Antevisão

Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Pensamentos finais

Nesta postagem, mostramos como trocar seu cabeçalho Divi por outro na rolagem usando o criador de tema Divi, os elementos Divi e alguns códigos JQuery e CSS adicionais. Também geramos automaticamente algum espaço na parte superior do contêiner da página que evita que o cabeçalho fixo se sobreponha ao conteúdo da página. Você também pode baixar gratuitamente o arquivo JSON do modelo de cabeçalho Divi de troca! Se você tiver dúvidas ou sugestões, fique à vontade para deixar um comentário na seção de comentários abaixo.

Se você está ansioso para aprender mais sobre o Divi e obter mais brindes do Divi, certifique-se de assinar nosso boletim informativo por e-mail e canal no YouTube para que você sempre seja uma das primeiras pessoas a saber e obter os benefícios desse conteúdo gratuito.