Como criar um cabeçalho global de tela inteira personalizado com o Divi's Theme Builder

Se você está procurando uma maneira de criar um cabeçalho global para o seu site que não ocupe muito espaço, vai adorar este tutorial. Mostraremos como criar um cabeçalho global em tela cheia usando o Divi's Theme Builder. Ao rolar a página para baixo, as únicas duas coisas adicionais que você notará em sua postagem / página são 1) um ícone de hambúrguer clicável no canto superior esquerdo e 2) um logotipo no canto superior direito. Esses dois itens seguirão seus visitantes durante todo o processo de navegação e, assim que o ícone de hambúrguer for clicado, um menu de tela inteira personalizado será aberto e permitirá que os visitantes acessem outras páginas do seu site. O resultado desse design é altamente responsivo e 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 em tela cheia GRATUITAMENTE

Para colocar suas mãos no modelo de cabeçalho global em tela cheia, 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. Vá para Divi Theme Builder e comece a construir o cabeçalho global

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 prossiga para clicar em 'Criar Cabeçalho Global'.

2. Dedique a Seção 1 à Navegação em Tela Cheia

Configurações da seção

Cor de fundo

É hora de começar a criar! Abra as configurações da seção que você pode notar dentro do editor de modelos e mude a cor de fundo para uma completamente transparente.

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

Espaçamento

Em seguida, remova o preenchimento padrão superior e inferior da seção.

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

Classe CSS

Continue adicionando uma classe CSS à seção. Posteriormente neste post, precisaremos desta classe CSS para ativar o menu em tela cheia.

• Classe CSS: section-transform

Visibilidade padrão

Em seguida, vá para as configurações de visibilidade e oculte os transbordamentos. Certifique-se de aumentar o índice z da seção também, isso garantirá que a seção permanecerá no topo de todo o conteúdo da página e da postagem.

• Excesso horizontal: oculto
• Estouro vertical: oculto
• Índice Z: 999999

Hover Visibility

Depois de adicionar o índice z, ative a opção de foco e certifique-se de que o mesmo índice z esteja sendo aplicado lá também.

• Índice Z: 999999

Adicionar linha # 1

Estrutura da Coluna

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

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e permita que a linha ocupe toda a largura da tela.

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

Espaçamento

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

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

Adicionar Módulo de Texto à Coluna

Adicionar conteúdo

O único módulo de que precisamos nesta linha é um Módulo de Texto. Adicione um símbolo de menu de sua escolha à caixa de conteúdo. Neste tutorial, estamos usando '≡'.

Configurações de texto

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

• Fonte do Texto: Abril Fatface
• Cor do texto: # 000000
• Tamanho do texto: 3vw (desktop), 5vw (tablet), 7vw (telefone)
• Altura da linha de texto: 1em

Espaçamento

Modifique os valores de espaçamento em diferentes tamanhos de tela a seguir.

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

ID CSS

Este módulo de texto servirá como gatilho para o menu em tela cheia. É por isso que precisaremos atribuir um ID CSS ao módulo de texto. Posteriormente no tutorial, usaremos o CSS ID em nosso código.

• ID CSS: menu aberto

Adicionar linha # 2

Estrutura da Coluna

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

Dimensionamento

Abra as configurações de linha e altere as configurações de dimensionamento da seguinte forma:

• Largura: 100%
• Largura máxima: 100%

Espaçamento

Modifique os valores de espaçamento também.

• Margem superior: 2vw (desktop), 4vw (tablet), 6vw (telefone)
• Margem inferior: 2vw (desktop), 4vw (tablet), 6vw (telefone)
• Preenchimento esquerdo: 19vw
• Preenchimento direito: 19vw

Adicionar Módulo de Texto à Coluna

Adicionar conteúdo

Em seguida, adicione um novo Módulo de Texto à coluna. Este Módulo de Texto representa seu primeiro item de menu.

Adicionar Link

Certifique-se de adicionar um link adequado para o módulo a seguir.

• URL do link do módulo: #

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: Poppins
• Peso da Fonte do Texto: Semi Negrito
• Cor do texto: # 000000
• Tamanho do texto: 3vw (desktop), 7vw (tablet), 8vw (telefone)
• Espaçamento entre letras do texto: -0,1vw
• Altura da linha de texto: 1em

Espaçamento

Modifique as configurações de espaçamento do módulo a seguir.

• Margem superior: 1vw
• Preenchimento inferior: 2vw
• Preenchimento esquerdo: 3vw

Fronteira

Adicione uma borda inferior também.

• Largura da borda inferior: 1 px
• Cor da borda inferior: # 333333

Classe CSS

E conclua as configurações do módulo adicionando uma classe CSS personalizada. Você precisará adicionar essa classe CSS a cada item de menu que colocar em sua seção.

Clonar Módulo de Texto Três Vezes

Depois de concluir o primeiro Módulo de Texto, você pode cloná-lo quantas vezes quiser (dependendo dos itens de menu que deseja mostrar em seu menu). No entanto, certifique-se de que os módulos não ultrapassem a altura da tela.

Alterar conteúdo e link de cada duplicado

Você terá que alterar o conteúdo e o link de cada duplicata.

Adicionar Módulo de Acompanhamento de Mídia Social

Adicionar redes sociais de escolha

O próximo e último módulo de que precisamos nesta linha é um Módulo de Acompanhamento de Mídia Social. Adicione todas as redes sociais que deseja exibir.

Redefinir estilos de redes sociais individuais

Continue redefinindo os estilos de cada rede social individualmente.

Configurações de ícone

Em seguida, vá para a guia de design do módulo e modifique as configurações do ícone da seguinte forma:

• Cor do ícone: # 000000
• Usar tamanho de ícone personalizado: Sim
• Tamanho da fonte do ícone: 1vw (desktop), 2vw (tablet), 3vw (telefone)

Espaçamento

Adicione um pouco de preenchimento à esquerda também.

• Preenchimento esquerdo: 3vw

Classe CSS

Conclua as configurações do módulo adicionando uma classe CSS.

Adicionar linha # 3

Estrutura da Coluna

A última linha de que precisamos nesta seção contém a seguinte estrutura de coluna:

Espaçamento

Limite o espaço ocupado por esta linha removendo todo o preenchimento padrão superior e inferior.

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

Adicionar Módulo de Código à Coluna

Inserir código JQuery e CSS

Em seguida, adicione um Módulo de Código e insira algum código CSS e JQuery para fazer o menu de tela cheia funcionar. Certifique-se de colocar manualmente o código JQuery entre as tags de script e o código CSS entre as tags de estilo, como você pode observar na tela de impressão abaixo.

jQuery(function($){
$('#menu-open').click(function() {
$('.section-transform').toggleClass('section-transform-active');
});
$('.menu-item-click').click(function() {
$('.section-transform').removeClass('section-transform-active');
});
});

.section-transform{
cursor: pointer;    
}
.section-transform-active {
height: 100% !important;
width: 100% !important;
z-index: 99999 !important;
background-color: #FFFFFF !important; 
}   
.section-transform {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}

3. Dedique a Seção 2 ao logotipo do canto superior direito

Configurações da seção

Cor de fundo

Para a próxima seção! Esta seção conterá o logotipo no canto superior direito. Abra as configurações da seção e mude a cor de fundo para uma completamente transparente.

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

Espaçamento

Em seguida, remova o preenchimento padrão superior e inferior da seção.

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

Visibilidade padrão

Aumente o índice z da seção também.

• Índice Z: 99999

Hover Visibility

Habilite a opção de foco no índice z e certifique-se de que o mesmo valor se aplica ao foco também.

• Índice Z: 99999

Adicionar nova linha

Estrutura da Coluna

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

Dimensionamento

Abra as configurações de linha e altere as configurações de dimensionamento da seguinte forma:

• Largura: 100%
• Largura máxima: 100%

Espaçamento

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

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

Adicionar Módulo de Imagem à Coluna

Carregar imagem do logotipo em PNG

O único módulo de que precisamos nesta linha e seção é um Módulo de imagem. Faça upload do arquivo de imagem do logotipo semitransparente.

Dimensionamento

Vá para as configurações de dimensionamento do módulo e force a largura total.

• Forçar largura total: Sim

Espaçamento

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

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

4. Configurações de seção adicional

Seção 1

Dimensionamento

Depois de concluir as duas seções e todos os módulos, é hora de alterar seus tamanhos. Abra a primeira seção e aplique os seguintes valores de largura e altura:

• Largura: 8vw (desktop), 11vw (tablet), 18vw (telefone)
• Altura: 7vw (desktop), 11vw (tablet), 18vw (telefone)

Elemento Principal Padrão

Em seguida, vá para a guia avançada da seção e adicione as seguintes linhas de código CSS:

position: fixed;
top: 0;

Hover Main Element

Certifique-se de que essas mesmas linhas de código CSS sejam aplicadas ao passar o mouse.

position: fixed;
top: 0;

Seção 2

Dimensionamento

Continue abrindo as configurações da segunda seção e altere a largura em diferentes tamanhos de tela.

• Largura: 13vw (desktop), 21vw (tablet), 30vw (telefone)

Elemento Principal Padrão

Em seguida, vá para a guia avançada e adicione as seguintes linhas de código CSS:

position: fixed;
right: 0;
top: 0;

Hover Main Element

Certifique-se de que essas mesmas linhas de código CSS sejam aplicadas ao passar o mouse.

position: fixed;
right: 0;
top: 0;

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

Depois de concluir todas as etapas acima, você pode salvar o modelo de 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 tutorial, mostramos como criar um cabeçalho global em tela cheia usando o Divi's Theme Builder. Adicionamos dois elementos fixos ao nosso design; um ícone de hambúrguer no canto superior esquerdo e um logotipo no canto superior direito. Ao clicar, o ícone de hambúrguer abre um menu em tela cheia feito com os elementos integrados do Divi. Você está livre para usar o Divi para criar este menu em tela cheia como quiser! No início deste tutorial, você também conseguiu baixar o arquivo JSON gratuitamente. Se você tiver alguma dúvida, sinta-se à 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.