Ao criar seu cabeçalho global, há muitas coisas que você precisa considerar. Os elementos que você coloca em seu cabeçalho devem ajudar seu visitantes para navegar facilmente. Para reduzir o tempo que as pessoas gastam navegando, muitos web designers optam por um cabeçalho superior fixo, permitindo visitantes para acessar imediatamente outras páginas ou publicações. Isso é realmente útil, mas ao criar um cabeçalho fixo, grande parte da altura da sua janela de visualização visitantes está ocupado, o que permite menos de conteúdo para exibir de uma vez. Se você não está pronto para fazer esse sacrifício, saiba que não é necessário. Você pode colher os benefícios de um cabeçalho fixo, permitindo que seu cabeçalho geral seja revelado quando os visitantes rolam para cima e o ocultam quando rolam para baixo. Hoje iremos guiá-lo para ocultar e revelar seu cabeçalho global usando o Theme Builder da Divi.

Visão geral

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

1. Vá para Divi Theme Builder e adicione um novo modelo

Comece indo para o Divi Theme Builder.

Comece a criar um cabeçalho global

Lá, clique em "Adicionar um cabeçalho global" e selecione "Criar um cabeçalho global".

2. Comece a criar um cabeçalho global

Configurações de seção

Cor de fundo

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

• Cor de fundo: #ffffff

dimensionamento

Vá para a guia de design e atribua 100% de largura para sua próxima seção.

• Largura: 100%

espaçamento

Adicione também preenchimento superior e inferior personalizado.

• Estofamento superior: 2vw
• Estofamento inferior: 2vw

Caixa de sombra

Também aplicaremos um tom sutil à nossa seção.

• Força do Borrão da Sombra da Caixa: 50px
• Cor da sombra: rgba (0,0,0,0,08)

ID CSS

Posteriormente neste tutorial, precisaremos de algum código personalizado para que o efeito de rolagem ocorra. Para se preparar para isso, adicionamos um ID CSS à seção.

• ID CSS: seção de cabeçalho global

Elemento principal

Também faremos da seção 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 da página ou conteúdo da postagem, também aumentaremos o índice z nas configurações de visibilidade.

• Índice Z: 99999

Adicione uma nova linha

Estrutura da coluna

Depois de concluir todos os parâmetros da seção, continue adicionando uma nova linha à seção usando a seguinte estrutura de colunas:

dimensionamento

Sem adicionar um módulo ainda, abra as configurações de linha e deixe a linha preencher toda a largura da tela.

• Use uma largura de calha personalizada: Sim
• Largura da calha: 1
• Equalizar as alturas das colunas: Sim
• Largura: 100%
• Largura máxima: 100%

espaçamento

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

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

Elemento principal

centralize conteúdo da coluna e permitir que as colunas permaneçam lado a lado em telas menores, adicionando duas linhas de código CSS ao elemento principal da linha.

display: flex;align-items: center;

Adicione o módulo de rastreamento de mídia social à coluna 2

Adicionar redes sociais

É hora de adicionar módulos, começando com um módulo de rastreamento de mídia social na coluna 1. Adicione as redes sociais que deseja mostrar.

Redefinir estilos de mídia social individuais

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

Adicionar um espaço de rede social individual

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

• Estofamento inferior: 0.5vw

alignement

Depois de adicionar individualmente o preenchimento inferior a cada rede social, volte às configurações gerais do seu mod. Mude para a guia de design e altere o alinhamento do módulo.

• Alinhamento do módulo: centro

Configurações de ícone padrão

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

• Cor do ícone: # 000000

Configurações do ícone de passar o mouse

E mude a cor do ícone de foco.

• Cor do ícone: # c2ab92

Fronteira

Complete os parâmetros do módulo adicionando uma borda inferior nos parâmetros da borda.

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

Adicione um módulo de menu à coluna 2

Selecione o menu

Vamos passar para a próxima coluna! Adicione um módulo de menu e selecione um menu de sua escolha.

Baixar logo

Em seguida, faça o upload de um logotipo no módulo.

Remover cor de fundo

E remova a cor de fundo.

Provisão

Em seguida, mude para a guia 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 maneira:

• 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

Altere 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

Também estamos mudando a cor do ícone do menu de hambúrguer nas configurações do ícone.

• 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 (mesa), 10vw (tablet), 13vw (telefone)

Menu de Link CSS

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;

Adicione um módulo de texto à coluna 3

Adicione uma cópia

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

Adicionar um 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

Mude 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 (computador), 2vw (tablet), 3vw (telefone)

Configurações de texto suspenso

Mude a cor do texto ao passar o mouse.

• Cor do texto: # c2ab92

dimensionamento

Continue alterando os parâmetros de dimensionamento do módulo em diferentes tamanhos de tela.

• Largura: 12vw (computador), 18vw (tablet), 22vw (telefone)
• Alinhamento do módulo: centro

espaçamento

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

• Estofamento inferior: 0.5vw

Fronteira

Complete os parâmetros do módulo adicionando uma borda inferior.

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

Adicione um módulo de código à coluna 2

Inserir código JQuery e CSS

Depois de definir o estilo de todos os mods na linha, é hora de fazer o efeito de revelar / ocultar acontecer. Para fazer isso, precisaremos adicionar código personalizado a um módulo de código que colocaremos na coluna 2. Esse código funcionará em qualquer seção que você adicionar, não importa como você projete seu cabeçalho ou os módulos. que você está usando, 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 = $(window).scrollTop(); $(window).scroll(function() {var scrollMovement = $(window).scrollTop();if(scrollMovement > topPosition) {$('#global-header-section').slideUp();} else {$('#global-header-section').slideDown();}topPosition = scrollMovement;}); });

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

3. Salve as modificações do gerador e exiba o resultado

Depois de concluir o cabeçalho global, salve todas as alterações e visualize o resultado em seu site da Web!

Visão geral

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

Considerações finais

Neste artigo, mostramos como fazer seu cabeçalho global aparecer ao rolar para cima e ocultá-lo 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. Você também pode 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.