Como combinar seu cabeçalho e corpo usando o módulo de conteúdo de postagem e divisores de seção da Divi

Agora, todos nós já nos acostumamos com o divisor de seção embutido do Divi. Eles ajudam a adicionar um toque extra aos sites que construímos. Eles também servem como uma transição suave entre duas seções diferentes, mas com o Divi's Theme Builder, a abordagem para criar essa transição é um pouco diferente. Nesta postagem, vamos guiá-lo pelas etapas que você deve seguir para chegar lá. Você também poderá baixar o arquivo JSON de modelo 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 página do divisor de seção GRATUITAMENTE

Para colocar as mãos no modelo de página do divisor de seção 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!

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.

Adicionar novo modelo para páginas

Lá, crie um novo modelo clicando no ícone de adição.

Selecione 'Todas as páginas' se desejar que o efeito de mesclagem seja aplicado em todas as suas páginas. Você pode fazer o mesmo efeito funcionar em outros tipos de modelos também, mas terá que incluir separadamente o divisor de seção superior em cada um de seus modelos. Depois de criar um novo modelo, comece a construir o cabeçalho personalizado.

2. Crie um cabeçalho personalizado

Configurações da seção

Fundo Gradiente

Dentro do editor de template, você notará uma seção. Abra essa seção e adicione um fundo gradiente a ela.

• Cor 1: # d13232
• Cor 2: # fc6a3c

Espaçamento

Adicione um pouco de preenchimento personalizado superior e inferior à seção também.

• Preenchimento superior: 1vw (desktop), 2vw (tablet e telefone)
• Preenchimento inferior: 1vw (desktop), 2vw (tablet e telefone)

Índice Z

E para garantir que seu cabeçalho permaneça acima de todo o conteúdo, aumentaremos o índice z nas configurações de visibilidade.

• Índice Z: 99999

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova linha à sua 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: 100%
• Largura máxima: 100%

Espaçamento

Remova também todo o preenchimento superior e inferior.

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

Elemento Principal

Por último, mas não menos importante, centralize o conteúdo da coluna e permita que as colunas permaneçam próximas umas das outras em tamanhos de tela menores, adicionando duas linhas simples de código CSS ao elemento principal da linha.

display: flex;
align-items: center;

Adicionar Módulo de Imagem à Coluna 1

Carregar logotipo

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

Alinhamento

Em seguida, 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: 6vw (desktop), 13vw (tablet), 17vw (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.

Remover cor de fundo

Continue removendo a cor de fundo do módulo.

Layout

Vá para a guia de design e altere o layout.

• Estilo: alinhado à esquerda
• Direção do menu suspenso: para baixo

Texto do Menu

Em seguida, estilize o texto do menu de acordo:

• Fonte do Menu: Oswald
• Peso da fonte do menu: leve
• Estilo da fonte do menu: maiúscula
• Cor do texto do menu: #ffffff (Desktop), # 202332 (Tablet e telefone)
• Tamanho do texto do menu: 0,8vw (desktop), 2vw (tablet), 2,5vw (telefone)
• Espaçamento entre letras do menu: 0.1vw

Menu suspenso

Altere também a cor da linha do menu suspenso nas configurações do menu suspenso.

• Cor da linha do menu suspenso: #ffffff

Ícones

E conclua as configurações do módulo usando uma cor de ícone de menu de hambúrguer branco.

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

Adicionar Módulo de Botão à Coluna 3

Adicionar cópia

Vamos para a última coluna! Lá, o único módulo de que precisaremos é 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: 0,6vw (desktop), 1vw (tablet), 1,5vw (telefone)
• Cor do texto do botão: # 000000
• Cor de fundo do botão: #FFFFFF
• Largura da borda do botão: 0 px

• Raio da borda do botão: 100 px
• Espaçamento entre letras dos botões: 2 px
• Fonte do botão: Open Sans
• Peso da fonte do botão: negrito
• Estilo da fonte do botão: maiúscula

Espaçamento

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

• Preenchimento superior: 0,8vw (desktop), 1,6vw (tablet), 2,2vw (telefone)
• Preenchimento inferior: 0,8vw (desktop), 1,6vw (tablet), 2,2vw (telefone)
• Preenchimento esquerdo: 1,5 vw (desktop), 2,5 vw (tablet), 3,5 vw (telefone)
• Preenchimento direito: 1,5 vw (desktop), 2,5 vw (tablet), 3,5 vw (telefone)

3. Construir corpo personalizado e adicionar divisor superior

Depois de concluir o cabeçalho personalizado do seu modelo, vá em frente e comece a construir o corpo personalizado.

Configurações da seção

Divisor superior

Você, novamente, notará uma seção na página. Abra essa seção e adicione um divisor superior a ela.

• Estilo do divisor: Encontrar na lista
• Cor do divisor: # fc6a3c
• Altura do divisor: 6vw
• Repetição horizontal do divisor: 15x
• Divider Flip: Vertical
• Disposição do divisor: no topo do conteúdo da seção

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 à sua seção usando a seguinte estrutura de colunas:

Dimensionamento

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

• 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

Adicionar módulo de conteúdo de postagem à coluna

Agora, para fazer com que todo o conteúdo da sua página apareça, você precisará adicionar um Módulo de Conteúdo de Postagem à sua linha. Este módulo representa o layout que você construiu dentro da própria página usando Divi. Se você estiver adicionando essa transição a uma página de produto, por exemplo, um modelo em que o conteúdo dinâmico está envolvido, uma abordagem diferente ocorre. A única coisa importante a lembrar é que você terá que adicionar um divisor superior à primeira seção do corpo do seu modelo. Certifique-se de que a cor do seu divisor seja igual à cor usada para o fundo do cabeçalho global.

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

Depois de concluir o corpo do seu modelo, você pode salvar as alterações 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

Nesta postagem, mostramos como combinar o cabeçalho e o corpo do seu template usando divisores de seção Divi e o Módulo Post Content. A transição do divisor se aplica imediatamente a todas as suas páginas. 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.