Como deixar seu cabeçalho transparente aderente na rolagem com Divi

Quando se trata de configurar um cabeçalho global para seu site, há muitas maneiras de abordá-lo. Uma das abordagens mais sutis é um cabeçalho transparente. Cabeçalhos transparentes são colocados no topo das seções principais de suas páginas, o que pode levar a belos designs que se concentram em uma abordagem mínima, mas clara. Se você decidir ir para um cabeçalho transparente, mas precisa de um cabeçalho fixo na rolagem, você vai adorar este tutorial. Usando as opções de sticky integradas do Divi, mostraremos como ir de um cabeçalho transparente para um cabeçalho sticky de estilo diferente na rolagem. A transição entre transparente e pegajoso é fácil! 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. 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.

Seção # 1 Configurações

Cor de fundo

Uma vez dentro do editor de template, você notará uma seção. Esta seção será dedicada à barra de cabeçalho superior que você pode notar na visualização deste post. Abra as configurações da seção e adicione uma cor de fundo preta.

• Cor de fundo: # 000000

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 usando a seguinte estrutura de coluna:

Adicionar Módulo de Texto à Coluna

Adicionar conteúdo

Adicione um Módulo de Texto à coluna da linha e insira alguma cópia de sua escolha.

Configurações de texto

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

• Fonte do Texto: Oswald
• Estilo da fonte do texto: maiúsculas
• Cor do texto: #ffffff
• Tamanho do texto:
  • Desktop: 19px
  • Tablet: 18px
  • Telefone: 16px
• Alinhamento de Texto: Centro

Adicionar Seção # 2

Espaçamento

Logo abaixo da primeira seção, adicione outra seção regular. Esta seção será dedicada ao nosso menu transparente que ficará fixo na rolagem. Abra as configurações de seção e remova todo o preenchimento padrão superior e inferior na guia de design.

• 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 transparente

Abra as configurações da linha e aplique uma cor de fundo totalmente transparente à linha.

• Cor de fundo: rgba (255,255,255,0)

Dimensionamento

Vá para a guia de design da linha e modifique as configurações de dimensionamento.

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

Espaçamento

Adicione um pouco de preenchimento personalizado à esquerda e à direita a seguir.

• Preenchimento esquerdo: 10%
• Preenchimento direito: 10%

Sombra da caixa

Em seguida, aplique uma sombra de caixa transparente. Posteriormente no tutorial, usaremos esta sombra de caixa em um estado pegajoso com uma cor de sombra diferente.

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

Posição

Para garantir que a linha apareça no topo do conteúdo da página, com um fundo transparente, usaremos uma posição absoluta para nossa linha na guia avançada.

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

Visibilidade da coluna 2

Também estamos ocultando a segunda coluna de nossa linha no tablet e no telefone para ter um design de cabeçalho menos complexo em telas menores.

Adicionar Módulo de Menu à Coluna 1

Selecione o menu

Agora que nossas configurações de linha estão definidas, é 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.

Remover cor de fundo

Remova a cor de fundo do módulo também.

Configurações de texto do menu

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

• Fonte do Menu: Oswald
• Peso da fonte do menu: negrito
• Estilo da fonte do menu: maiúscula
• Cor do texto do menu: #efefef
• Tamanho do texto do menu: 18 px
• Alinhamento de Texto: Direito

Configurações do menu suspenso

Altere também as configurações do menu suspenso.

• Cor da linha do menu suspenso: rgba (0,0,0,0)
• Cor de fundo do menu móvel: rgba (0,0,0,0.95)

Configurações de ícones

Em seguida, altere as cores dos ícones nas configurações 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

Configurações do logotipo

Estamos mudando a cor do nosso logotipo nas configurações do logotipo também, alterando o filtro de inversão da imagem.

• Inverter imagem: 90%

Dimensionamento

Em seguida, atribuiremos uma altura máxima ao nosso logotipo.

• Altura máxima do logotipo: 40px

Espaçamento

A seguir, adicionaremos algum preenchimento superior e inferior em telas menores.

• Enchimento superior:
  • Tablet e telefone: 10px
• Preenchimento inferior:
  • Tablet e telefone: 10px

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 do módulo e altere o alinhamento do botão.

• Alinhamento do Botão: Direito

Configurações de botão

Defina o estilo do botão a seguir.

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão: 16 px
• Cor do texto do botão: #ffffff
• Cor de fundo do botão: # ed4441
• Cor da borda do botão: # ed4441

• Raio da borda do botão: 0 px
• Espaçamento entre letras dos botões: 4px
• Fonte do botão: Oswald
• Peso da fonte do botão: negrito
• Estilo da fonte do botão: maiúscula
• Mostrar ícone do botão: Sim
• Cor do ícone do botão: # 1a1a1a

Espaçamento

E complete as configurações do módulo adicionando alguns valores de espaçamento personalizados.

• Margem superior: -70px
• Enchimento superior: 25px
• Preenchimento inferior: 25 px

2. Aplique efeitos de aderência personalizados

Vire a seção # 2 pegajosa

Agora que definimos a base de nosso cabeçalho, é hora de aplicar o efeito adesivo! Para fazer isso, comece abrindo as configurações da segunda seção e aplique as seguintes configurações fixas à guia avançada:

• 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

Cor de fundo da linha pegajosa

Agora que a opção sticky está ativada, podemos fazer alterações de design sticky em todos os elementos dentro da seção. Começaremos abrindo a linha que contém o nosso menu e aplicaremos uma cor de fundo branca pegajosa.

• Cor de fundo: #FFFFFF

Espaçamento entre linhas aderentes

A seguir, modificaremos os valores de espaçamento fixo da linha.

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

Sticky Row Box Shadow

Estamos mudando a cor da sombra da caixa em um estado pegajoso também.

• Cor da sombra: rgba (0,0,0,0,08)

Posicionamento de linha aderente

Em seguida, trazeremos de volta o posicionamento da linha para relativo em um estado fixo.

• Cargo: Relativo
• Origem do deslocamento: canto superior esquerdo

Configurações de texto do menu fixo

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

• Cor do texto do menu: # 000000

Configurações suspensas do menu fixo

Junto com a cor de fundo do menu móvel nas configurações suspensas do menu.

• Cor de fundo do menu móvel: #ffffff

Cores do ícone do menu fixo

Altere as cores do ícone em um estado fixo também.

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

Filtro de logotipo pegajoso

Em seguida, remova o filtro de inversão da imagem do logotipo em um estado aderente.

• Inverter imagem: 0%

Espaçamento de botão aderente

E conclua o tutorial removendo a margem superior negativa do botão enquanto pegajoso.

• Margem superior: 0px

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, mostramos como combinar o Divi's Theme Builder com as novas opções adesivas. Mais especificamente, mostramos como ir de um cabeçalho transparente para um cabeçalho aderente com um estilo diferente na rolagem. Essa abordagem permite que você mescle o design da página com o menu, mantendo um lindo cabeçalho pegajoso na rolagem. 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.