Como colocar automaticamente o cabeçalho abaixo da primeira seção divi de cada página

Desde que o Divi Theme Builder foi lançado, compartilhamos tutoriais sobre como criar e personalizar um cabeçalho para combiná-lo com as diferentes necessidades que você possa ter. No tutorial de hoje, continuaremos essa jornada mostrando como colocar automaticamente um cabeçalho personalizado abaixo da primeira seção Divi de cada página. Essa abordagem permite que os visitantes vejam a seção principal de suas páginas primeiro e, em seguida, tenham acesso ao menu e todos os seus itens. O estilo que estamos usando para o cabeçalho personalizado corresponde ao Pacote de Layout do Bistro, você também poderá baixar o modelo de página personalizado 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 personalizado GRATUITAMENTE

Para colocar as mãos no modelo de cabeçalho personalizado 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. Vá para Divi Theme Builder e adicione um novo modelo de página

Vá para Divi Theme Builder e adicione um novo modelo

Comece acessando o Divi Theme Builder e adicione um novo modelo.

Usar em

Use este novo modelo em todas as páginas.

• Use em: todas as páginas

2. Comece a construir um design de cabeçalho personalizado

Continue criando um cabeçalho personalizado dentro do modelo de página.

Configurações da seção

Cor de fundo

Uma vez dentro do editor de template, você notará uma seção. Abra essa seção e mude a cor de fundo.

• Cor de fundo: #FFFFFF

Espaçamento

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

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

Fronteira

Adicione uma borda superior e inferior também.

• Largura das bordas superior e inferior: 1 px
• Cor das bordas superior e inferior: # 002d4c

ID CSS

E inclua um ID CSS. Posteriormente no tutorial, usaremos esse ID CSS para colocar a seção abaixo da primeira seção de cada página.

• ID CSS: custom-header

Índice Z

Por último, mas não menos importante, aumentaremos o índice z da seção para garantir que ele apareça no topo de todo o conteúdo da página.

• Índice Z: 99999

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova 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 seção.

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

Espaçamento

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

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

Elemento Principal

Para garantir que todas as colunas permaneçam próximas umas das outras em tamanhos de tela menores e para centralizar o conteúdo da coluna, também adicionaremos duas linhas de código CSS ao elemento principal da linha.

display: flex;
align-items: center;

Coluna 1

Espaçamento

Continue abrindo as configurações da coluna 1 e adicione algum preenchimento superior e inferior às configurações de espaçamento.

• Enchimento superior: 20 px
• Preenchimento inferior: 20 px

Fronteira

Adicione uma borda direita à coluna também.

• Largura da borda direita: 1px
• Cor da borda direita: # 002d4c

Adicionar Módulo de Imagem à Coluna 1

Carregar logotipo

É hora de começar a adicionar módulos! Na coluna 1, precisaremos de um Módulo de imagem. Faça upload do seu logotipo.

Alinhamento

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

• Alinhamento de imagem: centro

Dimensionamento

Modifique a largura do módulo em diferentes tamanhos de tela também.

• Largura: 4vw (desktop), 7vw (tablet), 12vw (telefone)

Adicionar Módulo de Menu à Coluna 2

Selecione o menu

Na segunda coluna, precisaremos de um Módulo de Menu. Selecione um menu de sua escolha.

Layout

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

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

Texto do Menu

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

• Fonte do Menu: Cabine
• Cor do texto do menu: # 77848d
• Tamanho do texto do menu: 16px (desktop), 15px (tablet), 14px (telefone)
• Altura da linha do menu: 1.8em

Texto Suspenso

Em seguida, altere algumas cores nas configurações de texto suspenso.

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

Ícones

E conclua as configurações do módulo alterando a cor do ícone do menu de hambúrguer nas configurações dos ícones.

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

Adicionar Módulo de Botão à Coluna 3

Adicionar cópia

Passe para a próxima e última coluna. Lá, precisaremos de um Módulo de botão. Adicione alguma cópia de sua escolha.

Alinhamento

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

• Alinhamento do botão: Centro

Configurações de botão

Continue definindo o estilo do botão nas configurações do botão.

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão: 13px
• Cor do texto do botão: # 002d4c
• Cor de fundo do botão: #ffffff
• Largura da borda do botão: 2 px
• Cor da borda do botão: #ffffff (padrão), # d1d1d1 (pairar)
• Raio da borda do botão: 0 px

• Espaçamento entre letras dos botões: 2 px
• Fonte do botão: Cabine
• Peso da fonte do botão: Semi negrito
• Estilo da fonte do botão: maiúscula

Espaçamento

Em seguida, adicione algum preenchimento personalizado em diferentes tamanhos de tela.

• Preenchimento superior: 16 px
• Preenchimento inferior: 16 px
• Preenchimento esquerdo: 24px (Desktop e Tablet), 13px (Telefone)
• Preenchimento direito: 24px (desktop e tablet), 13px (telefone)

Sombra da caixa

Complete as configurações do módulo adicionando uma sombra de caixa.

• Posição horizontal da sombra da caixa: 0 px
• Posição vertical da sombra da caixa: 0 px
• Força do desfoque de sombra da caixa: 0 px
• Força de propagação da sombra da caixa: 2 px (padrão), 6 px (pairar)
• Cor da sombra: # 002d4c
• Posição da sombra da caixa: sombra interna

3. Coloque automaticamente o cabeçalho após a primeira seção de cada página usando JQuery

Adicionar Módulo de Código à Coluna 2

Agora, para colocar automaticamente o menu abaixo da primeira seção de cada página, precisaremos de um pouco de código JQuery. Para incluir este código em nosso cabeçalho personalizado, adicione um Módulo de Código à coluna 2.

Insira o código JQuery

Adicione as seguintes linhas de código JQuery, entre as tags de script, como você pode observar na tela de impressão abaixo , ao Módulo de Código para aplicar o efeito:

jQuery (function ($) {
$ ('# custom-header'). insertAfter ('. et_pb_section_0');
});

4. Salve as alterações do Theme Builder e visualize o resultado

E complete o cabeçalho customizado salvando todas as mudanças do construtor de tema e visualizando o resultado em suas páginas!

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 colocar automaticamente o cabeçalho personalizado que você construiu usando o Divi's Theme Builder após a primeira seção Divi de cada página. Você só precisará construir o cabeçalho personalizado uma vez, adicionar o código JQuery e o cabeçalho personalizado será reposicionado automaticamente. Esta é uma ótima maneira de mudar a posição normal da página inicial do menu e permitir que a seção do seu herói brilhe primeiro. Você também pode baixar o modelo 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.