Como criar uma barra de menu flutuante global e transparente com o Divi's Theme Builder

Procurando uma maneira de colocar seu cabeçalho global no topo das seções heróicas de suas páginas? No tutorial Divi de hoje, mostraremos exatamente como fazer isso. Vamos recriar um cabeçalho global impressionante do zero (usando o Divi's Theme Builder) e aplicaremos um efeito flutuante à barra de menus. 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 da barra de menu flutuante GRATUITAMENTE

Para colocar suas mãos no modelo de cabeçalho global da barra de menu flutuante, primeiro você precisará 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!

Inscreva-se no nosso canal no Youtube

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

Vá para Divi Theme Builder

Comece acessando o Divi Theme Builder.

Comece a construir o cabeçalho global

Em seguida, clique em 'Adicionar Cabeçalho Global' e continue selecionando 'Criar Cabeçalho Global'.

2. Comece a construir o cabeçalho global

Configurações da seção

Cor de fundo

Assim que estiver dentro do editor de modelos, você notará uma seção na página. Abra essa seção e mude a cor de fundo para uma completamente transparente. Isso permitirá que tudo abaixo da seção apareça.

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

Dimensionamento

Vá para a guia de design da seção a seguir e altere a largura.

• Largura: 100%

Espaçamento

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

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

Índice Z

E para garantir que a seção permaneça no topo de todo o conteúdo da seção hero, precisaremos aumentar o índice z da seção nas configurações de visibilidade.

• Índice Z: 99999

Adicionar nova linha

Estrutura da Coluna

Depois de concluir as configurações da seção, você pode adicionar uma nova linha usando a seguinte estrutura de coluna:

Dimensionamento

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

• Equalize Alturas de Coluna: Sim
• Largura: 100%
• Largura máxima: 100%

Espaçamento

Adicione um pouco de preenchimento personalizado superior e inferior a seguir.

• Preenchimento superior: 2vw
• Preenchimento inferior: 0vw

Elemento Principal

Em seguida, vá para a guia avançada e certifique-se de que as colunas permaneçam próximas umas das outras em tamanhos de tela menores, adicionando uma única linha de código CSS ao elemento principal da linha.

display: flex;

Coluna 2

Cor de fundo

Continue abrindo as configurações da coluna 2 e altere a cor de fundo para uma semitransparente.

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

Fronteira

Adicione uma borda inferior à coluna também.

• Largura da borda inferior: 2 px
• Cor da borda inferior: # f4583f

Sombra da caixa

E crie um efeito flutuante adicionando uma sombra de caixa sutil.

• Posição vertical da sombra da caixa: 20 px
• Força do desfoque de sombra da caixa: 50 px
• Força de propagação da sombra da caixa: -20px
• Cor da sombra: rgba (0,0,0,0.23)

Adicionar Módulo de Imagem à Coluna 1

Carregar logotipo

Depois de concluir as configurações de linha e coluna, é hora de adicionar os módulos, começando com um Módulo de imagem na coluna 1. Carregue um logotipo com um fundo transparente.

Alinhamento

Vá para a guia de design do módulo e altere o alinhamento.

• Alinhamento de imagem: centro

Dimensionamento

Altere a largura do módulo nas configurações de dimensionamento também.

• Largura: 8vw (desktop), 14vw (tablet), 21vw (telefone)

Adicionar Módulo de Menu à Coluna 2

Selecione o menu

Para a próxima coluna. Lá, o único módulo de que precisamos é um Módulo de Menu. Selecione um menu de sua escolha.

Remover cor de fundo

Em seguida, vá para as configurações de fundo e remova a cor de fundo.

Layout

Vá para a guia de design do módulo e altere o layout.

• Estilo: centrado
• Direção do menu suspenso: para baixo

Texto do Menu

Defina também as configurações de texto do menu.

• Fonte do Menu: Muli
• Cor do texto do menu: # 6f6666
• Tamanho do texto do menu: 1vw (desktop), 2vw (tablet), 3vw (telefone)

Menu suspenso

Altere as configurações do menu suspenso a seguir.

• Cor da linha do menu suspenso: # f4583f

Ícones

Use essa mesma cor para a cor do ícone do menu de hambúrguer nas configurações dos ícones.

• Cor do ícone do menu de hambúrguer: # f4583f

Espaçamento

Complete as configurações do módulo adicionando algum preenchimento superior e inferior nas configurações de espaçamento.

• Enchimento superior: 1,5vw
• Preenchimento inferior: 1,5vw

Adicionar Módulo de Botão à Coluna 3

Adicionar cópia

Passe para a próxima e última coluna. Adicione um Módulo de Botão com alguma cópia de sua escolha.

Alinhamento

Altere o alinhamento do módulo a seguir.

• Alinhamento do botão: Centro

Configurações de botão

Continue definindo o estilo do botão de acordo:

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão: 0,9vw (desktop), 1,5vw (tablet), 2,5vw (telefone)
• Cor do texto do botão: #ffffff
• Cor de fundo do botão: # f4583f
• Largura da borda do botão: 0 px
• Cor da borda do botão: # f4583f
• Raio da borda do botão: 0 px

• Fonte do botão: Muli
• Peso da fonte do botão: negrito

Espaçamento

E complete as configurações do módulo adicionando algum preenchimento personalizado em diferentes tamanhos de tela.

• Preenchimento superior: 1vw (desktop), 2vw (tablet), 3vw (telefone)
• Preenchimento inferior: 1vw (desktop), 2vw (tablet), 3vw (telefone)
• Preenchimento esquerdo: 2vw (desktop), 3vw (tablet), 4vw (telefone)
• Preenchimento direito: 2vw (desktop), 3vw (tablet), 4vw (telefone)

Configurações de seção adicionais

Elemento Principal Padrão

Depois de concluir o design geral, resta uma coisa a fazer; colocando a seção no topo do conteúdo da sua página. Para fazer isso, precisaremos adicionar duas linhas de código CSS ao elemento principal da seção.

position: absolute;
top: 0;

Hover Main Element

Certifique-se de adicionar essas mesmas linhas de código CSS à opção de foco do elemento principal. Isso evitará que a seção pisque quando você passar o mouse sobre ela.

position: absolute;
top: 0;

3. Salvar as alterações do construtor e visualizar o resultado

Depois de concluir a seção, você pode salvar o cabeçalho global e visualizar o resultado em seu site!

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 artigo, mostramos como criar uma barra de menu flutuante com o Divi's Theme Builder. Esta é uma ótima maneira de combinar suas seções de cabeçalho e herói. O cabeçalho é colocado no topo da primeira seção de sua página ou postagem. 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.