Como dividir a tela do modelo de postagem do seu blog com o Divi's Theme Builder

Ao criar um site, há grandes chances de incluir uma página de blog e postagens de blog nela. Claro, a parte mais importante de uma estratégia de blog é criar conteúdo de postagem de blog de alta qualidade, mas a parte de design de tudo isso desempenha um grande papel no sucesso de sua estratégia também. Ao criar um site com Divi, você pode otimizar a aparência de suas postagens no Divi Theme Builder criando um modelo de postagem com conteúdo dinâmico. Compartilhamos consistentemente modelos de postagens em nosso blog que ajudam você a acelerar o processo, mas se você está procurando especificamente criar uma postagem em tela dividida, você vai adorar esta postagem. Mostraremos passo a passo como fazer isso e 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 postagem do blog em tela dividida GRATUITAMENTE

Para colocar suas mãos no modelo de postagem de blog em tela dividida gratuita, primeiro você precisa fazer o download 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 postagem

Vá para Divi Theme Builder e adicione um novo modelo

Comece acessando o Divi Theme Builder. Uma vez lá, adicione um novo modelo.

Use o modelo em todas as postagens

Use o novo modelo em todas as suas postagens.

• Use em: todas as postagens

Comece a construir o corpo do modelo

E comece a construir o corpo do modelo.

2. Construir corpo do modelo de postagem do blog

Configurações da seção

Espaçamento

Uma vez dentro do editor de template, você notará uma seção. Abra suas configurações, vá para a guia de design 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:

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
• Equalize Alturas de Coluna: Sim
• Largura: 100%
• Largura máxima: 100%
• Altura mínima: 100vh (desktop), automático (tablet e telefone)
• Altura máxima: 100vh (desktop), nenhuma (tablet e telefone)

Espaçamento

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

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

Transbordamentos

E defina os transbordamentos da linha como ocultos.

• Excesso horizontal: oculto
• Estouro vertical: oculto

Configurações da coluna 1

Fundo Gradiente

Em seguida, abra as configurações da coluna 1 e adicione um fundo gradiente.

• Cor 1: rgba (255,255,255,0)
• Cor 2: # 000000
• Tipo de gradiente: Linear
• Colocar gradiente acima da imagem de fundo: Sim

Imagem de fundo

Estamos usando a imagem dinâmica em destaque como imagem de fundo para a próxima coluna.

• Imagem de fundo: imagem em destaque

Configurações da coluna 2

Espaçamento

Em seguida, abriremos as configurações da coluna 2 e adicionaremos alguns valores de preenchimento personalizados às configurações de espaçamento.

• Enchimento superior: 8%
• Estofamento inferior: 8%
• Preenchimento esquerdo: 8%
• Preenchimento direito: 8%

Transbordamentos

Para permitir que as pessoas percorram a segunda coluna, onde o conteúdo da postagem e a caixa de comentários aparecerão, vamos alterar o estouro vertical nas configurações de visibilidade.

• Excesso vertical: rolagem (área de trabalho), visível (tablet e telefone)

Adicionar Módulo de Título de Postagem à Coluna 1

Elementos

É hora de adicionar módulos, começando com um Módulo de Título de Postagem na coluna 1. Desative a opção de imagem em destaque nas configurações de elementos.

• Mostrar imagem em destaque: Não

Configurações de texto do título

Vá para a guia de design e altere as configurações de texto H1 de acordo:

• Nível do título do título: H1
• Fonte do título: Work Sans
• Peso da fonte do título: negrito
• Cor do texto do título: #ffffff
• Tamanho do texto do título: 60 px (desktop), 45 px (tablet), 35 px (telefone)
• Espaçamento entre letras de título: -1px
• Altura da linha de título: 1,2em

Configurações de meta texto

Modifique as configurações de metatexto a seguir.

• Meta Font: Work Sans
• Estilo de fonte meta: maiúsculas
• Meta Cor do Texto: #eaeaea
• Meta espaçamento entre letras: 2px

Dimensionamento

Em seguida, altere a largura em diferentes tamanhos de tela.

• Largura: 81% (desktop), 100% (tablet e telefone)

Espaçamento

Adicione alguns valores de preenchimento responsivo a seguir.

• Preenchimento superior: 8% (apenas tablet e telefone)
• Acolchoamento inferior: 8% (apenas tablet e telefone)
• Preenchimento esquerdo: 7% (tablet), 8% (telefone)
• Preenchimento direito: 7% (tablet), 8% (telefone)

Posição

E conclua as configurações do módulo alterando as configurações de posição da seguinte forma:

• Posição: Absoluta (Desktop), Padrão (Tablet e Telefone)
• Localização: Centro Inferior
• Deslocamento vertical: 10%

Adicionar Módulo de Postagem à Coluna 2

Para a próxima coluna. Lá, o primeiro módulo de que precisamos é um Módulo de Postagem de Conteúdo. Este módulo exibirá dinamicamente o conteúdo da sua postagem.

Configurações de texto de título

Faça algumas alterações nas configurações de texto do título do módulo.

• Fonte do cabeçalho: Work Sans
• Peso da fonte do cabeçalho: Semi negrito
• Tamanho do texto do título:
  • H2: 40px
  • H3: 30px
  • H4: 25px
  • H5: 16px
  • H6: 14px
• Espaçamento entre letras de cabeçalho: -1px (H2, H3 e H4)

Classe CSS

E adicione uma classe CSS. Na próxima etapa deste tutorial, usaremos essa classe CSS para gerar algum espaço entre títulos e parágrafos.

• Classe CSS: blog-post-content

Adicionar Módulo de Código à Coluna 2

Adicionar código CSS para espaço entre parágrafos e títulos

Adicione um Módulo de Código logo abaixo do Módulo de Postagem de Conteúdo e adicione as seguintes linhas de código CSS para gerar espaço entre títulos e parágrafos:

<style>
.blog-post-content h1,
.blog-post-content h2,
.blog-post-content h3,
.blog-post-content h4,
.blog-post-content h5,
.blog-post-content h6
{
margin-top: 20px;
margin-bottom: 20px;
}
</style>

Adicionar Módulo de Comentários à Coluna 2

Configurações de campos

O próximo e último módulo de que precisamos na coluna 2 para concluir este tutorial é um Módulo de Comentários. Altere as configurações de campos do módulo de acordo:

• Cor de fundo dos campos: #ffffff
• Cor do texto dos campos: # 000000
• Preenchimento superior dos campos: 30 px
• Preenchimento inferior dos campos: 30 px
• Preenchimento esquerdo dos campos: 30px
• Preenchimento direito dos campos: 30px
• Fonte dos Campos: Work Sans

• Estilo da fonte dos campos: maiúsculas
• Tamanho do texto dos campos: 15px
• Espaçamento entre letras dos campos: 3px
• Campos arredondados: 10px (todos os cantos)

• Força do borrão de sombra da caixa de campos: 30px
• Cor da sombra da caixa de campos: rgba (0,0,0,0.06)

Configurações de texto de contagem de comentários

Em seguida, altere as configurações de texto de contagem de comentários.

• Fonte de contagem de comentários: Work Sans
• Peso da fonte de contagem de comentários: negrito

Configurações de texto do título do formulário

Modifique as configurações de texto do título do formulário também.

• Nível de cabeçalho do título do formulário: H3
• Fonte do título do formulário: Work Sans
• Peso da fonte do título do formulário: Semi negrito

Configurações de meta texto

A seguir, faremos algumas alterações nas configurações de meta texto.

• Meta Font: Work Sans
• Meta Font Weight: Semi Negrito
• Meta Cor do Texto: # 000000

Configurações de botão

Em seguida, definiremos o estilo do botão de acordo:

• 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: # 000000
• 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: Work Sans
• Estilo da fonte do botão: maiúscula

• Padding Top Button: 2%
• Preenchimento inferior do botão: 2%
• Padding Buttom Left: 5%
• Preenchimento do botão direito: 5%

Espaçamento

Vamos adicionar alguma margem superior também.

• Margem superior: 15%

CSS do corpo do comentário

E concluiremos as configurações do módulo adicionando uma linha de código CSS ao corpo do comentário do módulo na guia avançada.

margin-top: 50px

3. Salvar alterações do Theme Builder e visualizar o resultado

Agora que concluímos o modelo de postagem do blog, a única coisa que resta a fazer é salvar todas as alterações do Divi Theme Builder e ver o resultado em nossas postagens do blog!

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 uma abordagem diferente na criação de um modelo de postagem de blog para o seu site Divi. Mais especificamente, mostramos como criar um design de modelo de postagem de blog em tela dividida usando o Criador de temas da Divi e conteúdo dinâmico. Nós o orientamos passo a passo pelo processo e adicionamos um arquivo JSON que você também pode baixar 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.