Como ocultar seu cabeçalho antes de rolar com as opções fixas do Divi

Uma seção de herói é o destaque do seu site. Geralmente, ele define o tom para o resto do site e mostra aos visitantes o que eles podem esperar. É por isso que pode ser útil certificar-se de que todo o foco esteja nos poucos elementos que você compartilha em sua seção de heróis, como a cópia e a frase de chamariz. Mas só porque você deseja destacar a seção do herói, não significa que você não precisa de uma barra de navegação também. Se você está procurando uma maneira amigável de revelar seu cabeçalho assim que as pessoas começarem a rolar, você vai adorar esta postagem. Hoje, estamos mostrando como ocultar o cabeçalho antes de rolar usando as opções adesivas integradas do Divi. O efeito que estamos alcançando é totalmente responsivo e parece ótimo em todos os tamanhos de tela. Você também poderá baixar o arquivo JSON de modelo 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 GRATUITAMENTE

Para colocar as mãos no modelo de cabeçalho 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!

Ao enviar o modelo para o Divi Theme Builder e inserir o modelo, você notará que a seção não está visível. Isso porque o efeito já está aplicado a ele. Para modificar os diferentes elementos, você pode alternar para o modo wireframe e acessar os elementos lá, ou remover temporariamente as configurações de conversão da seção de transformação e do elemento principal e colocá-las de volta quando terminar de modificar o design do cabeçalho.

1. Construindo a estrutura do elemento de cabeçalho dentro de um novo modelo de cabeçalho

Criar novo modelo de cabeçalho global

Comece acessando o Divi Theme Builder. Lá, comece a construir um novo cabeçalho global ou personalizado.

Configurações da seção

Cor de fundo

Uma vez dentro do editor de template, você notará uma seção. Abra as configurações da seção e altere a cor de fundo.

• Cor de fundo: # 001b34

Espaçamento

Vá para a guia de design da seção e remova todo o preenchimento padrão superior e inferior a seguir.

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

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova linha usando a seguinte estrutura de coluna:

Cor de fundo

Sem adicionar módulos ainda, abra as configurações de linha e aplique uma cor de fundo de sua escolha.

• Cor de fundo: # 001b34

Dimensionamento

Vá para a guia de design da linha e altere as configurações de dimensionamento de acordo:

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

Espaçamento

Continue alterando os valores de preenchimento de acordo:

• Preenchimento superior: 0 px
• Preenchimento inferior: 0
• Preenchimento esquerdo:
  • Área de Trabalho: /
  • Tablet e telefone: 5%
• Preenchimento direito:
  • Área de Trabalho: /
  • Tablet e telefone: 5%

Configurações da coluna 1

Cor de fundo

Depois de concluir as configurações gerais de linha, abra as configurações da coluna 1 e aplique uma cor de fundo.

• Cor de fundo: # f4d5b8

Adicionar Módulo de Menu à Coluna 1

Selecione o menu

É hora de adicionar módulos, começando com um Módulo de Menu na coluna 1. Selecione um menu de sua escolha.

Carregar logotipo

Faça upload de um logotipo a seguir.

Cor de fundo

Em seguida, altere a cor de fundo.

• Cor de fundo: # 063765

Imagem de fundo

E carregue uma imagem de fundo de ilustração à sua escolha. Você pode encontrar e usar o abaixo fazendo o download do brinde no início deste post.

• Tamanho da imagem de fundo: Ajustar
• Posição da imagem de fundo: centro

Configurações de texto do menu

Vá para a guia de design do módulo e altere o tamanho do texto do menu.

• Tamanho do texto do menu: 18 px

Configurações do menu suspenso

Em seguida, altere as configurações do menu suspenso de acordo:

• Cor da linha do menu suspenso: rgba (0,0,0,0)
• Cor de fundo do menu móvel: # ddc1a7
• Cor do texto do menu móvel: # 063765

Configurações de ícones

Altere as cores dos ícones nas configurações dos ícones para branco também.

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

Dimensionamento

Em seguida, modifique a largura máxima do logotipo nas configurações de dimensionamento.

• Largura máxima do logotipo: 70 px

Espaçamento

Aplique alguns valores de preenchimento personalizados a seguir.

• Enchimento superior: 1%
• Estofamento inferior: 1%
• Preenchimento esquerdo: 5%
• Preenchimento direito: 5%

Sombra da caixa

Junto com alguma sombra de caixa personalizada.

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

Transformar Traduzir

E conclua as configurações do módulo, modificando as configurações de conversão de transformação da seguinte maneira:

• Direito:
  • Desktop: 20px
  • Tablet e telefone: 0px

Adicionar Módulo de Botão à Coluna 2

Adicionar cópia

Na coluna 2, o único módulo de que precisamos é um Módulo de botão. Adicione alguma cópia de sua escolha.

Alinhamento de Botão

Vá para a guia de design e altere o alinhamento do botão.

• Alinhamento do Botão: Direito

Configurações de botão

Em seguida, defina o estilo do botão de acordo:

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão: 16 px
• Cor do texto do botão: # 2a2a2a
• Cor de fundo do botão: #ffffff
• Largura da borda do botão: 0 px
• Cor da borda do botão: rgba (0,0,0,0)

• Peso da fonte do botão: negrito
• Estilo da fonte do botão: maiúscula

Espaçamento

Dê alguma forma ao seu botão usando o preenchimento personalizado também.

• Enchimento superior: 20 px
• Preenchimento inferior: 20 px
• Preenchimento esquerdo: 40px
• Preenchimento direito: 40px

Sombra da caixa

Em seguida, aplique uma sombra de caixa.

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

Transformar Traduzir

E conclua as configurações do módulo, modificando os valores de conversão de transformação de acordo:

• Direito:
  • Desktop: 50px
  • Tablet e telefone: 0px

2. Aplique efeitos de aderência personalizados para obter efeito de ocultar antes de rolagem

Tornar a linha posicionada de forma absoluta

Agora que definimos a base de nosso cabeçalho, podemos aplicar o cabeçalho ocultar antes do efeito de rolagem. Você pode aplicar esse efeito a qualquer cabeçalho que construir, contanto que siga as etapas abaixo. A primeira etapa é abrir as configurações de linha e torná-la absoluta. Isso nos ajudará a evitar que o espaço seja ocupado pelo cabeçalho no topo da página.

• Posição: Absoluta
• Localização: Superior Esquerdo

Tornar a seção pegajosa

A seguir, abriremos as configurações da seção e permitiremos que ela fique no topo.

• Posição pegajosa: grudar no topo
• Limite inferior de aderência: Nenhum
• Compensação dos elementos aderentes circundantes: Sim
• Estilos padrão de transição e fixos: Sim

Seção de animação

Adicionaremos uma animação à nossa seção também. Esta animação ajudará a evitar que o cabeçalho apareça quando sua página estiver carregando.

• Estilo de animação: Fade

Duração da transição da seção

Você pode decidir por si mesmo quão lento ou rápido o cabeçalho desliza para baixo, uma vez que você começa a rolar, modificando a duração da transição na guia avançada da seção. Quanto maior a duração, mais devagar o cabeçalho desliza para baixo.

• Duração da transição: 800ms

Section Transform Translate

Agora, em um estado padrão, não queremos que o cabeçalho fique visível. A primeira etapa para conseguir isso é acessar as configurações de transformação da seção e usar um valor negativo para o eixo Y.

• Certo: -300px

Traremos esse valor de volta a zero em um estado fixo. Isso significa que, assim que você começar a rolar, o cabeçalho ficará visível novamente.

• Sticky Right: 0px

Propriedade CSS de visibilidade da seção

A próxima e última etapa deste tutorial não é teoricamente necessária para obter o efeito, mas é uma boa prática ocultar elementos que não estão em uso. É por isso que iremos para a guia avançada da seção e adicionaremos a seguinte linha de código CSS na caixa do elemento principal:

• Elemento Principal:

  visibility: hidden

Vamos mudar nosso conteúdo de volta para visível em um estado fixo. É isso!

• Elemento principal aderente:

  visibility: visible;

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 garantir que sua seção de herói seja o foco de sua página assim que as pessoas entrarem em sua página. Mais especificamente, mostramos como ocultar seu cabeçalho antes de rolar. Isso permite que seus visitantes processem as informações da seção do herói primeiro, antes de terem a capacidade de navegar. 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.