Como criar um cabeçalho fixo com as opções adesivas do Divi

A maneira como usamos o Divi Theme Builder ao configurar um site acelerou nosso fluxo de trabalho e tornou tudo mais fácil. Embora tenhamos sido capazes de criar cabeçalhos personalizados desde o primeiro dia, desde o lançamento do Divi Theme Builder, uma coisa foi solicitada continuamente, que é ser capaz de criar um cabeçalho fixo sem usar código adicional. Com as novas opções adesivas do Divi, criar um cabeçalho aderente tornou-se mais fácil do que nunca. As configurações aderentes que o Divi oferece irão ajudá-lo sem esforço a tornar qualquer elemento de design aderente e atribuir estilos personalizados a um estado aderente, o que resulta em infinitas possibilidades de projeto e experiência do usuário.

Neste tutorial, mostraremos como criar um cabeçalho fixo que contém o seguinte:

• O cabeçalho que estamos criando tem uma barra de cabeçalho superior + uma barra de menu
• Estamos tornando a seção que contém a barra de menu fixa quando você passa por ela, assim que você voltar ao topo, a barra de cabeçalho aparecerá novamente
• Estamos mudando os estilos de design da seção aderente (e seus elementos), uma vez que a seção é tornada aderente

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. Construindo a estrutura do elemento de cabeçalho dentro de um novo modelo de cabeçalho

Criar novo modelo de cabeçalho global

Vá para o Divi Theme Builder e comece a construir um novo cabeçalho global ou personalizado.

Seção # 1 Configurações

Fundo Gradiente

Uma vez dentro do editor de template, começaremos construindo a estrutura de elemento de nosso cabeçalho. Na parte dois deste tutorial, vamos nos concentrar em aplicar as diferentes configurações de aderência para completar nosso design de cabeçalho aderente. Dentro do editor de template, você notará uma seção. Abra essa seção e aplique um fundo gradiente.

• Cor 1: # ffba60
• Cor 2: # ffd6a0
• Direção do gradiente: 90 graus
• Posição inicial: 50%
• Posição final: 50%

Espaçamento

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

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

Adicionar nova linha

Estrutura da Coluna

Para criar nossa barra de cabeçalho superior, adicionaremos uma nova linha à nossa seção usando a seguinte estrutura de colunas:

Dimensionamento

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

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Largura: 95%
• Largura máxima: 2580 px

Espaçamento

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

• Enchimento superior: 15px
• Preenchimento inferior: 15 px

CSS do elemento principal

E para garantir que as colunas permaneçam próximas umas das outras em tamanhos de tela menores, adicionaremos uma linha de código CSS ao elemento principal da linha na guia avançada.

display: flex;

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

Adicionar redes sociais de escolha

É hora de adicionar módulos, começando com um Módulo de Acompanhamento de Mídia Social na coluna 1. Adicione as redes sociais de sua escolha junto com seus links correspondentes.

Remova a cor de fundo de cada rede social

Continue removendo cada uma das cores de fundo da rede social individualmente.

Configurações de ícone

Em seguida, volte às configurações gerais do módulo e altere a cor do ícone na guia de design.

• Cor do ícone: # 26333a

Espaçamento

Adicione alguma margem superior também.

• Margem superior: 5px

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.

Adicionar Link

Adicione um link a seguir.

Alinhamento de Botão

Em seguida, vá para a guia de design e altere o alinhamento do botão.

• Alinhamento do Botão: Direito

Configurações de botão

Também estamos estilizando o botão.

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão: 14 px
• Cor do texto do botão: # 26333a
• Largura da borda do botão: 2 px
• Cor da borda do botão: # 26333a
• Raio da borda do botão: 0 px

• Espaçamento entre letras dos botões: 4px
• Peso da fonte do botão: negrito
• Estilo da fonte do botão: maiúscula
• Mostrar botão: Sim

Espaçamento

E vamos completar as configurações do módulo adicionando algum preenchimento superior e inferior às configurações de espaçamento.

• Enchimento superior: 10 px
• Preenchimento inferior: 10 px

Adicionar Seção # 2

Fundo Gradiente

Adicione outra seção regular logo abaixo da anterior. Esta seção será dedicada ao nosso menu e ficará fixa na segunda parte deste tutorial. Depois de adicionar a seção, aplique um fundo gradiente.

• Cor 1: #ffffff
• Cor 2: # f7f7f7
• Tipo de gradiente: Linear
• Direção do gradiente: 90 graus
• Posição inicial: 25%
• Posição final: 25%

Espaçamento

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

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

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova linha à seção usando a seguinte estrutura de coluna:

Dimensionamento

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

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Largura máxima: 2580 px

Espaçamento

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

• Enchimento superior: 10 px
• Preenchimento inferior: 10 px

Adicionar Módulo de Menu à Coluna

Selecione o menu

Em seguida, adicione um Módulo de Menu à coluna da linha e selecione um menu dinâmico de sua escolha.

Carregar logotipo

Faça upload de um logotipo a seguir.

Remover cor de fundo

Em seguida, remova a cor de fundo branca padrão do módulo.

Configurações de texto do menu

Vá para a guia de design e defina o estilo das configurações de texto do menu também.

• Peso da fonte do menu: negrito
• Cor do texto do menu: # 002d4c
• Tamanho do texto do menu: 15px
• Espaçamento entre letras do menu: 4px
• Alinhamento de Texto: Direito

Configurações de texto do menu suspenso

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

• Cor de fundo do menu suspenso: #ffffff
• Cor da linha do menu suspenso: # 002d4c

Configurações de ícones

Junto com as configurações dos ícones.

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

Dimensionamento

E conclua as configurações do módulo adicionando uma altura máxima do logotipo às configurações de dimensionamento.

• Altura máxima do logotipo: 60px

2. Aplique efeitos de aderência personalizados

Vire a seção # 2 pegajosa

Agora que criamos a estrutura de elemento de nosso cabeçalho, é hora de tornar nossa segunda seção fixa e alterar o estilo de design dela e de seus elementos em um estado fixo. Abra as configurações da segunda seção e vá para a guia avançada. Lá, vá para as configurações de efeitos de rolagem e aplique as seguintes opções fixas:

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

Alterar o fundo gradiente da seção no estado fixo

Agora que nossa seção ficou fixa, uma opção adicional aparecerá dentro de nossas configurações de seção, linha e módulo; a opção pegajosa. Ao clicar neste ícone, você poderá criar um estilo alternativo para o elemento que selecionou enquanto estava no estado fixo. Vamos combinar algumas dessas configurações de design pegajoso para personalizar a aparência de nosso cabeçalho pegajoso na rolagem. Comece acessando as configurações de fundo da segunda seção e aplique o seguinte fundo gradiente aderente:

• Cor 1: # 26333a
• Cor 2: # 1e272f

Esticar linha no estado fixo

A seguir, abriremos a linha que contém o Módulo de Menu e modificaremos a largura em um estado fixo.

• Largura: 95%

Remova o preenchimento da linha no estado aderente

Estamos removendo o preenchimento adesivo superior e inferior de nossa linha também.

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

Alterar a cor do texto do menu no estado fixo

A seguir, vamos mudar a cor do texto do menu em um estado fixo.

• Cor do texto do menu: # ffbd68

Alterar as cores do ícone do menu no estado fixo

Junto com as cores dos ícones.

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

Remover altura do logotipo no estado aderente

E por último, mas não menos importante, alteraremos a altura máxima do logotipo para zero em um estado fixo. Isso removerá o logotipo de nosso cabeçalho completamente, uma vez que as configurações fixas da seção sejam habilitadas. É isso! Certifique-se de salvar todas as alterações do Divi Theme Builder depois de concluir o design do cabeçalho e visualizá-lo em seu site.

• Altura máxima do logotipo: 0 px

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 criar um cabeçalho fixo usando o Divi's Theme Builder e as opções adesivas. Assim que a seção que contém nosso menu se torna fixa, também estamos aplicando estilos personalizados. Essas opções são possibilitadas pelas novas opções adesivas Divi, que fornecem inúmeras possibilidades para melhorar a experiência do usuário e o design que você cria. Você também conseguiu fazer o download do modelo de cabeçalho global 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.