Procurando uma maneira clássica, mas criativa, de exibir postagens de blog em seu site? Em caso afirmativo, você vai adorar este brinde Divi. Projetamos um modelo clássico de postagem de blog inspirado em uma máquina de escrever que se aplica automaticamente a todas as postagens de blog em seu site! Ao longo desta postagem, também mostraremos passo a passo como você pode recriar o design do zero dentro do Theme Builder.

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 inspirado na máquina de escrever GRATUITAMENTE

Para colocar suas mãos no modelo de postagem de blog gratuito inspirado em uma máquina de escrever, 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

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 este 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 novo modelo.

2. Comece a construir o corpo da postagem do blog

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: # fff4d8

Espaçamento

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

• Preenchimento superior: 200px
• Preenchimento inferior: 200 px

Fronteira

E complete as configurações da seção adicionando uma borda.

• Largura da borda: 100 px (desktop), 20 px (tablet e telefone)
• Cor da borda: #ffffff

Adicionar linha # 1

Estrutura da Coluna

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

Espaçamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e remova todo o preenchimento padrão superior e inferior.

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

Adicionar Módulo de Imagem à Coluna

Enviar Imagem

Em seguida, adicione um Módulo de imagem à coluna da linha e carregue uma ilustração de sua escolha. A ilustração que estamos usando neste tutorial pode ser encontrada na pasta para download no início deste tutorial.

Espaçamento

Vá para a guia de design do módulo e modifique os valores de espaçamento da seguinte forma:

• Margem superior: -150px
• Margem esquerda: -12vw (desktop), 0px (tablet e telefone)

Adicionar linha # 2

Estrutura da Coluna

Para a próxima linha. Use a seguinte estrutura de coluna:

Adicionar Módulo de Texto à Coluna 1

Conteúdo Dinâmico

Adicione um módulo de texto à primeira coluna da linha e use o seguinte conteúdo dinâmico:

• Corpo: Data de publicação da postagem

• Formato de data: 08/06/1999 m / d / A

Configurações de texto

Altere as configurações de texto de acordo:

• Fonte do texto: Elite especial
• Peso da fonte do texto: negrito
• Cor do texto: # 000000
• Tamanho do texto: 1,4 rem

Clonar Módulo de Texto Três Vezes

Depois de concluir as configurações do Módulo de texto, você pode clonar o módulo inteiro três vezes.

Alterar conteúdo dinâmico

Modifique o conteúdo dinâmico dos módulos duplicados da seguinte maneira:

• Duplicado nº 1: Categorias de postagem
• Duplicado nº 2: Autor da postagem
• Duplicado nº 3: contagem de comentários de postagem
  • Depois: comentários
  • Link para a área de comentários: Sim

Coloque dois módulos de texto na coluna 2

Continue colocando os dois últimos Módulos de Texto na segunda coluna da linha,

Alterar a cor do texto do link da categoria e contagem de comentários

Modifique a cor do texto do link quando necessário.

• Cor do texto do link: # 000000

Alterar a orientação do texto dos módulos na coluna 2

E complete os Módulos de Texto na coluna 2, modificando o alinhamento do texto em diferentes tamanhos de tela.

• Alinhamento de texto: direita (área de trabalho), esquerda (tablet e telefone)

Adicionar linha # 3

Estrutura da Coluna

Para a próxima linha! Use a seguinte estrutura de coluna:

Adicionar Módulo de Texto à Coluna

Conteúdo Dinâmico

Adicione um módulo de texto à coluna da linha e use o seguinte conteúdo dinâmico:

• Corpo: Postagem / Título do arquivo

• Antes:

• Depois de:

Configurações de texto H1

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

• Fonte do título: Elite especial
• Cor do texto do título: # 000000
• Tamanho do texto do cabeçalho: 3,5 rem (desktop), 2,5 rem (tablet), 2 rem (telefone)
• Altura da linha de direção: 1,5em

Espaçamento

Adicione algumas margens superior e inferior personalizadas também.

• Margem superior: 150px
• Margem inferior: 150px

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

Configurações de texto

Passe para o próximo módulo, que é o Módulo Post Content. Modifique as configurações de texto de acordo:

• Fonte do texto: Elite especial
• Tamanho do texto: 1,2 rem
• Altura da linha de texto: 2,5em

Configurações de texto de título

Altere também as diferentes configurações de texto do título.

• Fonte do título: Elite especial
• Cor do texto do título: # 000000
• Cabeçalho 2 Tamanho do texto: 2 rem (H2), 1,9 rem (H3), 1,8 rem (H4), 1,7 rem (H5), 1,6 rem (H6)

ID CSS

E atribua um ID CSS ao módulo.

• CSS ID: post-content-module

Adicionar Módulo de Código à Coluna

Adicionar código CSS de cabeçalho

Agora, para adicionar alguma margem personalizada aos diferentes cabeçalhos, adicionaremos o seguinte CSS personalizado a um Módulo de Código:

<style>
#post-content-module h2, h3, h4, h5, h6 {
margin-top: 70px;
margin-bottom: 70px;
}
</style>

Adicionar Seção # 2

Cor de fundo

Adicione outra seção ao modelo de postagem, abra as configurações da seção e altere a cor de fundo da seção.

• Cor de fundo: # fff4d8

Fronteira

Adicione uma borda também.

• Largura da borda: 100 px (desktop), 20 px (tablet e telefone)
• Largura da borda superior: 0 px
• Cor da borda: #ffffff

Adicionar nova linha

Estrutura da Coluna

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

Adicionar Módulo de Comentários à Coluna

Configurações de campos

O único módulo de que precisamos nesta linha é um Módulo de Comentários. Altere as configurações dos campos de acordo:

• Cor de fundo dos campos: rgba (0,0,0,0)
• Cor do texto dos campos: # 000000
• Preenchimento inferior dos campos: 50 px
• Fonte Fields: Special Elite
• Tamanho do texto dos campos: 1,2 rem

• Largura da borda inferior dos campos: 1px
• Cor da borda inferior dos campos: # 000000

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

Junto com as configurações de texto de contagem de comentários.

• Nível de cabeçalho de contagem de comentários: H2
• Fonte de contagem de comentários: Elite especial
• Cor do texto da contagem de comentários: # 000000
• Tamanho do texto da contagem de comentários: 2rem

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

Faça algumas alterações nas 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: Elite especial
• Cor do texto do título do formulário: # 000000
• Tamanho do texto do título do formulário: 1.5 rem

Configurações de meta texto

Em seguida, altere as configurações de meta texto.

• Meta Font: Special Elite
• Meta Cor do Texto: # 000000
• Tamanho do metatexto: 1.5 rem

Configurações de texto de comentário

Faremos algumas alterações nas configurações de texto do comentário também.

• Fonte do comentário: Elite especial
• Tamanho do texto do comentário: 1,2 rem
• Altura da linha de comentário: 2,5em

Configurações de botão

Continue definindo o estilo do botão da seguinte maneira:

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão: 1,2 rem
• Cor do texto do botão: #ffffff
• Fundo do botão: # 000000
• Largura da borda do botão: 0 px
• Raio da borda do botão: 0 px

• Fonte do botão: Elite especial

CSS do corpo do comentário

E conclua as configurações do módulo adicionando alguma margem superior ao corpo do comentário na guia avançada.

margin-top: 100px;

3. Salvar todas as alterações do Theme Builder e o resultado da visualização

Depois de criar o corpo da postagem do blog personalizado do seu modelo, você pode salvar todas as alterações e visualizar o resultado nas postagens do seu 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, compartilhamos um modelo clássico de postagem de blog inspirado em uma máquina de escrever que você pode baixar gratuitamente e usar em seu próximo projeto Divi! Recriamos o design do modelo de postagem do zero também. 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.