Como revelar seu cabeçalho global ao rolar para cima e ocultar ao rolar para baixo com Divi

Ao criar seu cabeçalho global, há muitas coisas que você precisa levar em consideração. Os elementos que você coloca em seu cabeçalho precisam ajudar seus visitantes a navegar facilmente. Para reduzir o tempo que as pessoas gastam navegando, muitos web designers optam por um cabeçalho fixo no topo, permitindo que os visitantes acessem outras páginas ou postagens imediatamente. Isso é muito conveniente, mas ao criar um cabeçalho fixo, uma grande parte da altura da janela de visualização dos visitantes é ocupada, permitindo que menos conteúdo apareça de uma vez. Se você não está disposto a fazer esse sacrifício, saiba que não é necessário. Você pode ter os benefícios de um cabeçalho fixo, permitindo que seu cabeçalho global revele quando seus visitantes estão rolando para cima e oculte-o quando eles estão rolando para baixo. Hoje, vamos guiá-lo por ocultar e revelar seu cabeçalho global usando o Divi's Theme Builder. 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 global GRATUITAMENTE

Para colocar suas mãos no template de cabeçalho global gratuito, 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 adicione um novo modelo

Vá para Divi Theme Builder

Comece acessando o Divi Theme Builder.

Comece a construir o cabeçalho global

Lá, clique em 'Adicionar Cabeçalho Global' e selecione 'Construir Cabeçalho Global'.

2. Comece a construir o cabeçalho global

Configurações da seção

Cor de fundo

Dentro do editor de template, você notará uma seção. Abra essa seção e mude sua cor de fundo.

• Cor de fundo: #ffffff

Dimensionamento

Vá para a guia de design e atribua uma largura de 100% para sua seção a seguir.

• Largura: 100%

Espaçamento

Adicione um pouco de preenchimento personalizado superior e inferior também.

• Preenchimento superior: 2vw
• Preenchimento inferior: 2vw

Sombra da caixa

Aplicaremos uma sombra de caixa sutil à nossa seção também.

• Força do desfoque de sombra da caixa: 50 px
• Cor da sombra: rgba (0,0,0,0,08)

ID CSS

Posteriormente neste tutorial, precisaremos de algum código personalizado para fazer o efeito de rolagem acontecer. Para se preparar para isso, estamos adicionando um CSS ID à seção.

• CSS ID: global-header-section

Elemento Principal

Também transformaremos a seção em um cabeçalho fixo adicionando duas linhas de código CSS ao elemento principal da seção.

position: fixed;
top: 0;

Índice Z

Agora, para garantir que nossa seção apareça no topo de todo o conteúdo da página ou postagem, aumentaremos o índice z também nas configurações de visibilidade.

• Índice Z: 99999

Adicionar nova linha

Estrutura da Coluna

Depois de concluir todas as configurações da seção, continue adicionando uma nova linha à seção usando a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e permita que a linha ocupe toda a largura da tela.

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

Espaçamento

Remova também todo o preenchimento padrão superior e inferior.

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

Elemento Principal

Centralize o conteúdo da coluna e permita que as colunas permaneçam próximas umas das outras em tamanhos de tela menores, adicionando duas linhas de código CSS ao elemento principal da linha.

display: flex;
align-items: center;

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

Adicionar redes sociais

É hora de adicionar módulos, começando com um Módulo de Acompanhamento de Mídia Social na coluna 1. Adicione as redes sociais que deseja exibir.

Redefinir estilos de redes sociais individuais

Continue redefinindo os estilos de cada rede social em um nível individual.

Adicionar espaçamento de rede social individual

Você também precisará abrir as configurações de cada rede social individualmente e adicionar um preenchimento inferior nas configurações de espaçamento.

• Preenchimento inferior: 0,5vw

Alinhamento

Depois de adicionar o preenchimento inferior a cada rede social individualmente, volte para as configurações gerais do módulo. Vá para a guia de design e altere o alinhamento do módulo.

• Alinhamento do Módulo: Centro

Configurações de ícone padrão

Altere a cor do ícone nas configurações do ícone também.

• Cor do ícone: # 000000

Configurações do ícone de pairar

E modifique a cor do ícone ao pairar.

• Cor do ícone: # c2ab92

Fronteira

Complete as configurações do módulo adicionando uma borda inferior nas configurações da borda.

• Largura da borda inferior: 1 px
• Cor da borda inferior: # 000000

Adicionar Módulo de Menu à Coluna 2

Selecione o menu

Para a próxima coluna! Adicione um Módulo de Menu e selecione um menu de sua escolha.

Carregar logotipo

Faça upload de um logotipo para o próximo módulo.

Remover cor de fundo

E remova a cor de fundo.

Layout

Em seguida, vá para a guia de design e certifique-se de que as seguintes configurações se apliquem ao layout:

• Estilo: centrado
• Direção do menu suspenso: para baixo

Texto de menu padrão

Continue alterando as configurações de texto do menu da seguinte forma:

• Cor do link ativo: # c2ab92
• Fonte do Menu: Cormorant Garamond
• Cor do texto: # 000000
• Tamanho do texto do menu: 1vw (desktop), 2vw (tablet), 3vw (telefone)

Texto do menu suspenso

Modifique o texto do menu ao passar o mouse.

• Cor do texto do menu: # c2ab92

Menu suspenso

Em seguida, altere a cor da linha do menu suspenso nas configurações do menu suspenso.

• Cor da linha do menu suspenso: # 000000

Ícones

Estamos mudando a cor do ícone do menu de hambúrguer nas configurações dos ícones também.

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

Dimensionamento

Continue alterando a largura máxima do logotipo em diferentes tamanhos de tela nas configurações de dimensionamento.

• Largura máxima do logotipo: 5vw (desktop), 10vw (tablet), 13vw (telefone)

CSS do link do menu

E conclua as configurações do módulo adicionando duas linhas de código CSS ao link do menu do módulo na guia avançada.

padding-bottom: 1vw;
border-bottom: 1px solid #000;

Adicionar Módulo de Texto à Coluna 3

Adicionar cópia

Vamos para o último módulo! Lá, o único módulo de que precisamos é um Módulo de Texto.

Adicionar Link

Este módulo servirá como um CTA. Adicione um link de sua escolha.

• URL do link do módulo: #

Configurações de texto padrão

Vá para a guia de design do módulo e altere as configurações de texto de acordo:

• Fonte do texto: Cormorant Garamond
• Cor do texto: # 000000
• Tamanho do texto: 1vw (desktop), 2vw (tablet), 3vw (telefone)

Configurações de texto flutuante

Altere a cor do texto ao pairar.

• Cor do texto: # c2ab92

Dimensionamento

Continue alterando as configurações de dimensionamento do módulo em diferentes tamanhos de tela.

• Largura: 12vw (desktop), 18vw (tablet), 22vw (telefone)
• Alinhamento do Módulo: Centro

Espaçamento

E adicione um pouco de preenchimento inferior nas configurações de espaçamento.

• Preenchimento inferior: 0,5vw

Fronteira

Conclua as configurações do módulo adicionando uma borda inferior.

• Largura da borda inferior: 1 px
• Cor da borda inferior: # 000000

Adicionar Módulo de Código à Coluna 2

Inserir código JQuery e CSS

Depois de definir o estilo de todos os módulos na linha, é hora de fazer o efeito de revelar / ocultar acontecer. Para fazer isso, precisaremos adicionar algum código personalizado a um Módulo de Código que colocaremos na coluna 2. Este código funcionará em qualquer seção que você adicionar, não importa como você projeta seu cabeçalho ou quais módulos você usa, apenas certifique-se de adicionar o ID CSS à sua seção. Coloque o código JQuery entre as tags de script e o código CSS entre as tags de estilo, conforme mostrado na tela de impressão abaixo.

jQuery(function($){
  
var topPosition = 0;


$(window).scroll(function() {

    var scrollMovement = $(window).scrollTop();
  
    if (topPosition < 200 ){
    }
    else{
    if(scrollMovement > topPosition) {
          $('#global-header-section').removeClass('show-header');
          $('#global-header-section').addClass('hide-header');
    } else {
          $('#global-header-section').removeClass('hide-header');
          $('#global-header-section').addClass('show-header');
    }
    }
    topPosition = scrollMovement;
});  
  
});

#main-content{
margin-top: 7vw;
}

.hide-header {
opacity: 0;
margin-top: -200px !important;
}

.show-header {
opacity: 1;
margin-top: 0px !important;
}

#global-header-section {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}

3. Salvar as alterações do construtor e visualizar o resultado

Depois de preencher o cabeçalho global, salve todas as alterações e veja 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 fazer seu cabeçalho global aparecer ao rolar para cima e ocultar ao rolar para baixo. Esta é uma forma popular e eficaz de ajudar os visitantes a navegar facilmente sem ocupar uma parte da altura da janela de visualização. Você também conseguiu baixar o arquivo JSON gratuitamente! 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.