Como “pegar” o cabeçalho adesivo Divi ao passar pela seção do herói da sua página
Publicados: 2020-11-18Desde que a atualização das opções adesivas do Divi foi lançada, compartilhamos dicas e truques sobre como usá-los em todas as compilações do seu site com Divi e, hoje, estamos adicionando outro para você marcar! Este tutorial será sobre interação. Colocaremos automaticamente um cabeçalho personalizado abaixo da seção principal de cada página e tornaremos esse cabeçalho fixo assim que os visitantes passarem por ele, o que resulta em uma bela experiência de rolagem. 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 GRATUITAMENTE
Para colocar as mãos no template de página grátis, 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.
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.
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. Crie uma nova página usando a página inicial do pacote de layout de estofamento da Divi
Para este tutorial, usaremos o Upholstery Layout Pack e seu modelo gratuito de cabeçalho e rodapé que você pode baixar no blog. Embora estejamos usando este pacote de layout específico, você pode aplicar esse método a qualquer tipo de site que estiver construindo. Para visualizar o resultado enquanto segue o tutorial abaixo, recomendamos que você configure uma página que você mantém aberta em uma guia separada. Para combinar o cabeçalho e rodapé que usaremos, estamos configurando uma nova página usando um layout de escolha que vem com o Pacote de Layout de Estofamento da Divi.
2. Baixe e instale o cabeçalho e rodapé gratuitos para o pacote de layout de estofamento da Divi
Baixe o cabeçalho e rodapé grátis em nosso blog
A seguir, faremos o download do modelo de cabeçalho e rodapé gratuito para o Pacote de layout de estofamento da Divi. Baixar e instalar este brinde nos ajudará a focar na parte importante deste tutorial, que é acertar a técnica. Depois de acessar a postagem do blog, navegue até o formulário de inscrição por e-mail e preencha seu endereço de e-mail. Em seguida, um botão de download aparecerá. Este botão de download permitirá que você baixe uma pasta compactada. Depois de descompactar a pasta, você pode encontrar um arquivo JSON que contém um modelo de site padrão com um cabeçalho e rodapé globais.
Navegue até o Divi's Theme Builder
Para usar o arquivo JSON que você acabou de baixar, navegue até o Divi Theme Builder.
Faça upload do modelo de site padrão com designs de cabeçalho e rodapé
Lá, clique no botão importar e exportar no canto superior direito e carregue o arquivo JSON que você pode encontrar em sua pasta de download.
Criar novo modelo de página
Assim que tiver carregado o modelo, você verá um cabeçalho e rodapé globais aparecerem dentro do modelo de site padrão. Para evitar posicionamentos estranhos de cabeçalho, aplicaremos apenas o efeito “pegar cabeçalho aderente” em nossas páginas, mas se você também tiver uma seção hero construída pelo Divi em outros tipos de postagem personalizados, sinta-se à vontade para usar o cabeçalho lá também. Adicione um novo modelo e use-o em todas as páginas.
- Use em: todas as páginas
Remover modelo de cabeçalho e rodapé do modelo de site padrão
Assim que você adicionar o modelo de página, o cabeçalho global e o rodapé serão adicionados automaticamente a esse modelo. Estamos transformando este cabeçalho global em um cabeçalho personalizado, removendo o cabeçalho global e rodapé em nosso modelo de site padrão. Dessa forma, as alterações que fizermos em nosso cabeçalho se aplicarão apenas às páginas.
3. Coloque a seção do cabeçalho abaixo da seção do herói
Abrir modelo de cabeçalho global
Agora que configuramos o ambiente do criador de temas para o nosso cabeçalho, é hora de mudar para o nosso modelo de cabeçalho clicando no ícone de lápis.
Atribuir um ID CSS personalizado à seção dentro do cabeçalho global
Uma vez dentro do editor de modelos, você verá um design de cabeçalho que contém uma seção, linha e alguns módulos. Para colocar automaticamente o cabeçalho abaixo da primeira seção de herói de cada página, vamos precisar atribuir um ID personalizado à nossa seção. A técnica que estamos usando é baseada em um tutorial anterior. A diferença entre este post e o mencionado na frase anterior é que assim que um visitante passar pelo cabeçalho, ele ficará pegajoso. Quando as pessoas rolarem de volta para cima, ele retornará ao seu lugar abaixo da seção do herói.
- ID CSS: custom-header
Adicionar Módulo de Código Abaixo do Módulo de Menu na Coluna 1
Continue adicionando um novo Módulo de Código à primeira coluna da linha.
Adicione o código JQuery para colocar a seção abaixo da primeira seção de cada página
Lá, inseriremos algum código JQuery que colocará automaticamente a seção de cabeçalho abaixo da primeira seção de herói de cada página.
jQuery(function($){
$(document).ready(function(){
$('#custom-header').insertAfter('.et_pb_section_0');
});
});
Adicionar código CSS ao mesmo módulo de código
Incluiremos uma classe CSS entre as tags de estilo também para evitar que o cabeçalho apareça no construtor durante a construção de páginas.
#et_pb_root #custom-header {
display: none;
}
4. Aplicar Posição e Estilos Fixos ao Cabeçalho
Adicionar posicionamento fixo à seção
Agora que nossa seção está localizada abaixo da primeira seção de herói de cada página, é hora de aplicar o efeito pegajoso também. Para fazer isso, usaremos as configurações adesivas integradas do Divi na guia avançada.
- Posição pegajosa: grudar no topo
Adicionar sombra de caixa aderente à seção
Agora que a posição fixa foi aplicada, podemos começar a fazer alterações fixas em nossa seção e em todos os elementos filhos que ela contém. Começaremos adicionando uma sombra de caixa adesiva ao nosso contêiner de seção.
- Força do desfoque de sombra da caixa: 30 px
- Cor da Sombra
- Padrão: rgba (0,0,0,0)
- Pegajoso: rgba (0,0,0,0.13)
Modificar fundo gradiente de linha aderente
Em seguida, aplicaremos um fundo gradiente aderente à nossa linha.
- Cor 1: #ffffff
- Cor 2: # e8e8e8
Modificar a cor do texto do módulo de menu fixo
Em seguida, abriremos o Módulo de Menu e alteraremos a cor do texto do menu em um estado fixo.
- Cor do texto do menu: # 2d2e34
Modificar a cor do ícone de hambúrguer do menu pegajoso
Também modificaremos a cor do ícone do hambúrguer do menu fixo.
- Cor do ícone do menu de hambúrguer: # 2d2e34
Adicionar filtro de inversão de logotipo aderente
E concluiremos o tutorial adicionando um filtro de inversão de imagem. É isso! Depois de aplicar todas essas alterações ao seu cabeçalho, certifique-se de salvar o modelo e as alterações do Divi Theme Builder antes de visualizar o resultado na página que você criou na primeira parte do tutorial.
- Inverter imagem: 80%
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
Neste post, compartilhamos outra dica e truque que você pode aplicar com as opções adesivas integradas do Divi. Mais especificamente, mostramos como “pegar” seu cabeçalho depois de rolar por ele. O cabeçalho será colocado automaticamente abaixo da primeira seção de cada página. 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.