Como criar um modelo de postagem de blog com o Divi's Theme Builder (download GRATUITO)

Publicados: 2019-11-05

Um modelo de postagem de blog é provavelmente o modelo mais importante que você pode adicionar a um site de blog. Ele fornece uma estrutura e um design que é "magicamente" aplicado a todas as postagens de blog no front end, enquanto os blogueiros só precisam se preocupar em escrever a postagem no backend. Isso economiza tempo drasticamente ao simplificar o processo de criação para colocar sua postagem na web rapidamente. E com o Divi Theme Builder, você não terá que se contentar com um modelo de postagem chato que se parece com qualquer outra postagem de blog na web. Você pode criar incontáveis designs autênticos (visualmente) e adicionar diferentes combinações de conteúdo estático e dinâmico em todo o seu modelo com facilidade.

Nesta postagem, cobriremos tudo o que você precisa saber para construir um modelo de postagem de blog usando o Divi Theme Builder. Cobriremos muito conteúdo, mas acho que você ficará surpreso com a facilidade com que esses modelos podem ganhar vida diante de seus olhos.

Agora vamos começar!

Espiada

Aqui está uma rápida olhada no modelo de postagem do blog que criaremos neste tutorial.

Você deve ter notado a semelhança deste design em nosso Pacote de Layout de Marketing Digital. Este modelo de postagem foi criado para corresponder ao layout para que você possa usá-lo em combinação com o Pacote de Layout de Marketing Digital.

Aproveitar!

Baixe o modelo de postagem do blog GRATUITAMENTE

Para colocar suas mãos no modelo deste tutorial, 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á faz parte da lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será inscrito ou 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.

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!

Para importar o layout do modelo para o seu site, você precisará ir ao Divi Theme Builder e usar a opção de portabilidade para importar o arquivo .json para o tema builder.

modelo de página de categoria divi

O que é um modelo de postagem de blog e por que você precisa de um?

Um modelo de postagem de blog é um modelo para todo o site usado para todas (ou algumas) suas únicas postagens de blog em seu site. É um modelo predefinido construído com conteúdo dinâmico para que qualquer postagem nova ou existente herde automaticamente o layout e o design do modelo atribuído.

Existem alguns motivos convincentes para usar um modelo de postagem de blog. O principal motivo para usar um modelo de postagem de blog é para agilizar o processo de blog. Ter um modelo pronto já projetado para suas postagens pode acelerar drasticamente o processo de criação, eliminando a necessidade de projetar os elementos da postagem imediatamente e deixando os blogueiros com mais tempo para fazer o que fazem de melhor - escrever conteúdo. Mas isso não é tudo! Um modelo de postagem de blog pode incorporar elementos extras (como comentários, botões de compartilhamento e opções de e-mail) à postagem para aumentar o envolvimento do usuário e aumentar as conversões.

Com o Divi Theme Builder, criar um modelo de postagem de blog é surpreendentemente fácil. O segredo para construir um modelo de postagem de blog no Divi é entender quais Módulos usar e como incorporar elementos de conteúdo dinâmico ao modelo de maneira eficaz.

Antes de começarmos a construir um modelo de postagem de blog juntos, vamos primeiro examinar algumas das ferramentas disponíveis para construir um.

Blocos de construção de um modelo de postagem de blog

Os modelos de postagem no blog podem variar dependendo das necessidades do blog. Mas, normalmente, um modelo de postagem de blog consiste na seguinte estrutura:

Título - A área superior da postagem que geralmente inclui o título da postagem, a imagem em destaque e os metadados da postagem (categorias, tags, autor, data da postagem, etc.)
Post Content - O conteúdo principal do artigo.
Postagens relacionadas - Links para outros artigos nos quais os leitores possam estar interessados.
Comentários - uma seção para os usuários adicionarem e responderem aos comentários sobre a postagem.
Call to Action - Normalmente um formulário de inscrição por e-mail, ícones de compartilhamento social ou uma oferta promocional de algum tipo.

Módulos Divi e conteúdo dinâmico

Um modelo de postagem de blog pode ser criado no Divi Theme Builder usando os recursos de conteúdo dinâmico integrados do Divi inerentes aos Módulos Divi. Existem alguns Módulos Divi que são construídos especificamente para postagens. No entanto, a maioria dos Módulos Divi terá a capacidade de extrair conteúdo dinâmico disponível relacionado a uma postagem. Aqui está uma análise de algumas das opções disponíveis para você ao criar um modelo de postagem de blog no Divi.

Módulos Divi criados para modelos de postagem
- Módulo de navegação de postagem - útil para fornecer links de navegação para postagens anteriores e posteriores.
- Módulo de controle deslizante de postagem - útil para fornecer uma galeria de postagens organizadas pela mais recente ou por categoria.
- Módulo de título da postagem - útil para exibir o título da postagem com uma imagem em destaque em um módulo conveniente.
- Módulo de conteúdo de postagem - um módulo necessário para o modelo de postagem para exibir o conteúdo de uma postagem. O módulo de conteúdo de postagem também inclui opções de design que podem ser usadas como design padrão para conteúdo de postagem em todo o site.

Elementos de conteúdo dinâmico para modelo de postagem disponíveis em todos os módulos Divi
- Post / Título do Arquivo
- Post Excerpt
- Data atual
- Tagline do site
- Biografia do autor
- Autor da postagem
- Post Link
- Categorias de postagem
- Contagem de comentários de postagem
- Post Publish Date
- Os campos personalizados

Agora que você tem uma boa ideia das ferramentas disponíveis, vamos ver como podemos construir um modelo de postagem de blog no Divi do zero.

O que você precisa para começar

Para começar, você precisará fazer o seguinte:

Se ainda não o fez, instale e ative o Divi Theme (ou o Divi Builder Plugin se não estiver usando o Divi Theme).
Certifique-se de ter pelo menos algumas postagens de blog criadas para ver os resultados do modelo de postagem de blog que iremos construir. Certifique-se de incluir o máximo de conteúdo possível em cada postagem (ou seja, imagem em destaque, categorias, etc.) para que você tenha um bom exemplo de uma postagem real.

Depois disso, você está pronto para começar a construir um novo modelo para suas postagens de blog no Divi.

Como construir um modelo de postagem de blog no Divi Theme Builder

Inscreva-se no nosso canal no Youtube

Como todos os modelos, um modelo de postagem de blog é criado no Divi Theme Builder, o que permitirá que você crie o modelo completamente do zero com o poder do Divi Builder.

Criação de um novo modelo

No painel do WordPress, navegue até Divi> Theme Builder. Em seguida, clique no quadrado vazio “adicionar novo modelo”.

Atribuindo o modelo a todas as postagens do blog

Depois de adicionar um novo modelo, a caixa de configurações do modelo aparecerá, permitindo que você atribua o modelo a páginas e / ou postagens em todo o seu site. Como queremos criar um modelo de postagem de blog para todas as postagens de todo o site, selecione “Todas as postagens” e clique no botão criar modelo.

Criação de um layout personalizado para a área do corpo

Em seguida, clique na área “Adicionar corpo personalizado” do modelo para criar uma nova área do corpo para o modelo de postagem. Em seguida, selecione “Build Custom Body”.

Selecione a opção “Construir do zero” para iniciar o processo de construção.

Criação do layout personalizado do corpo para o modelo de postagem

Depois que o Editor de layout de modelo é iniciado, você tem a liberdade de criar todo o corpo do modelo de postagem do seu blog do zero usando o Divi Builder.

Para começar, adicione uma linha de uma coluna à seção regular padrão.

Então, antes de adicionar um módulo, atualize as configurações da seção com um design de plano de fundo e algum preenchimento da seguinte forma:

Cor do gradiente de fundo à esquerda: # 8624e1
Cor certa do gradiente de fundo: # 3607a6
Direção do gradiente: 130 graus
Posição inicial: 25%
Imagem de fundo: inserir imagem
Use o efeito de paralaxe: SIM
Preenchimento: 7vw superior, 7vw inferior

Criando o Título do Postagem como Conteúdo Dinâmico com Módulo de Texto

Dentro da linha de uma coluna, adicione um módulo de texto.

Em seguida, clique no ícone de conteúdo dinâmico ao passar o mouse sobre a área de conteúdo do corpo.

Selecione o elemento Post / Archive Title na lista.

Em seguida, clique no ícone de engrenagem no elemento Post / Archive Title e atualize as áreas de entrada antes e depois com as tags h1 da seguinte maneira:

Antes:

<h1>

Depois de:

</h1>

Agora projete o título com as seguintes configurações de design:

Fonte do texto: Roboto
Tamanho do texto do texto: 16px
Altura da linha de texto: 1.8em
Alinhamento de texto: centro
Fonte do título: Roboto
Peso da fonte do cabeçalho: negrito
Tamanho do texto do título: 60 px (desktop), 40 px (tablet), 32 px (telefone)
Altura da linha de direção: 1,2em

Adicionar a imagem em destaque usando um módulo de imagem como conteúdo dinâmico

Depois que a seção de título estiver pronta, vamos adicionar a imagem em destaque para o modelo de postagem. Para fazer isso, adicione outra seção regular com um layout de coluna de dois terços e um terço.

Em seguida, adicione um módulo de imagem à coluna esquerda.

Em seguida, adicione o elemento de conteúdo dinâmico da imagem em destaque para a imagem.

Projetando o Módulo de Imagem

Vá para a guia de design e personalize a imagem da seguinte maneira:

Alinhamento de imagem: centro
Margem: -9vw (desktop), 0vw (tablet)
Cantos arredondados: 8px
Sombra da caixa: veja a imagem
Posição vertical da sombra da caixa: 16 px
Força do desfoque de sombra da caixa: 96 px
Força de propagação da sombra da caixa: -24px

Adicionar pós-autor e biografia do autor ao módulo do Blurb como conteúdo dinâmico

A seguir, vamos adicionar um Autor da postagem e uma biografia do autor da postagem usando um módulo de blog. Então, vá em frente e adicione um módulo de blog à coluna certa.

Nas configurações da sinopse, passe o mouse sobre a caixa de entrada Título e clique no ícone de conteúdo dinâmico. Em seguida, adicione o elemento de conteúdo dinâmico Post Author para o conteúdo do Título.

Em seguida, abra as configurações do Post Author e atualize a entrada antes da seguinte forma:

Antes: Escrito por

Para o conteúdo do corpo do módulo blurb, clique no ícone de conteúdo dinâmico e selecione o elemento de conteúdo dinâmico “Autoria” na lista.

Para a imagem do módulo de sinopse, adicione a "Imagem do perfil do autor da postagem" como conteúdo dinâmico.

Design Post Author e Bio Blurb Module

Agora otimize o design da imagem da seguinte maneira:

Posicionamento de imagem / ícone: esquerda
Cantos arredondados da imagem: 50%
Fonte do título: Roboto
Peso da fonte do título: negrito
Altura da linha do título: 1,3em
Fonte do corpo: Lato
Altura da linha corporal: 1,4em
Largura da imagem: 50px

Adicionar categorias de postagem ao módulo Blurb como conteúdo dinâmico

No Módulo de autor e biografia do autor recém-criado, adicione outro módulo de sinopse abaixo dele e selecione o elemento de conteúdo dinâmico Categorias de postagem para o Título.

Em seguida, atualize a sinopse com um ícone da seguinte maneira:

Ícone de uso: SIM
Ícone: veja a captura de tela

Módulo do Blurb da categoria da postagem do projeto

Atualize as configurações de design da seguinte forma:

Cor do ícone: #dddddd
Posicionamento de imagem / ícone: esquerda
Use o tamanho da fonte do ícone: SIM
Tamanho da fonte do ícone: 20px
Fonte do título: Roboto
Peso da fonte do título: médio
Cor do texto do título: # f92c8b
Tamanho do texto do título: 16px
Altura da linha de título: 20 px
Preenchimento: 16 px restantes

Adicionar contagem de comentários ao módulo Blurb como conteúdo dinâmico

Para adicionar a contagem de comentários de postagem para o modelo de postagem do blog, duplique o módulo de propaganda que acabou de criar.

Em seguida, atualize o conteúdo do Título com o elemento de conteúdo dinâmico Post Comment Count.

Como a contagem de comentários exibe apenas um número, precisamos complementar o número com algum texto de adição após o número. Para fazer isso, abra as configurações de Contagem de comentários de postagem e atualize o seguinte:

Depois: Comentário (s)

Em seguida, atualize o ícone da seguinte forma:

Ícone de uso: SIM
Ícone: veja a captura de tela

Adicionar data de publicação ao módulo Blurb como conteúdo dinâmico

Para a última parte dos metadados, duplique o módulo de propaganda com a contagem de comentários. Em seguida, atualize o conteúdo do título com o elemento de conteúdo dinâmico “Data de publicação”.

Dica: Você sempre pode abrir as configurações do elemento dinâmico Post Publish Date para alterar o formato de exibição da data.

Em seguida, atualize o ícone da seguinte forma:

Ícone de uso: SIM
Ícone: veja a captura de tela

Adicionar módulo de conteúdo de postagem com configurações de design para conteúdo

Com o título da postagem, a imagem em destaque, o autor da postagem e os metadados no lugar, estamos prontos para o conteúdo principal da postagem.

Adicione uma nova linha com um layout de uma coluna.

Em seguida, adicione um módulo de conteúdo de postagem à linha.

Este módulo de conteúdo de postagem é onde o conteúdo principal da postagem será exibido. Além disso, podemos atualizar as configurações de design para estabelecer o design padrão de todo o conteúdo da postagem inserido usando o editor padrão. Podemos atualizar as configurações do Módulo de Postagem da mesma forma que faríamos com qualquer outro módulo. E podemos ver o conteúdo simulado fornecido pelo módulo conforme atualizamos o módulo.

Abra as configurações do módulo de conteúdo de postagem e atualize as seguintes configurações de imagem:

Cantos arredondados da imagem: 8 px
Sombra da caixa de imagem: veja a captura de tela
Posição vertical da sombra da caixa: 16 px
Força do desfoque de sombra da caixa: 96 px
Força de propagação da sombra da caixa: -24px

Em seguida, precisamos definir o design de todos os elementos de conteúdo de texto possíveis para quando um usuário criar uma postagem de blog usando o editor padrão. Abra o alternador do grupo de opções de texto para revelar as 5 guias diferentes de tipos de designs de texto - parágrafo, link, lista não ordenada, lista ordenada e aspas.

Em seguida, atualize as seguintes opções em cada uma das guias.

Continue a atualizar as configurações de texto do título para cada um dos níveis de título - h1, h2, h3, h4, h5, h6.

Fonte do título: Roboto
Peso da fonte do cabeçalho: negrito
Tamanho do texto do título (h1): 56 px (desktop), 42 px (tablet), 28 px (telefone)
Tamanho do texto do título (h2): 45 px (desktop), 35 px (tablet), 24 px (telefone)
Tamanho do texto do título (h3): 40 px (desktop), 30 px (tablet), 20 px (telefone)
Tamanho do texto do título (h4): 32 px (desktop), 24 px (tablet), 18 px (telefone)
Tamanho do texto do título (h5): 28 px (desktop), 20 px (tablet), 16 px (telefone)
Tamanho do texto do título (h6): 24 px (desktop), 18 px (tablet), 14 px (telefone)

Adicionar módulo de pós-navegação

No Módulo de conteúdo de postagem, adicione uma nova linha de uma coluna com um Módulo de navegação de postagem.

Atualize o texto do Link Anterior e Próximo da seguinte maneira:

Link anterior: Prev:% title
Próximo Link: Próximo:% title

Em seguida, atualize o design de pós-navegação da seguinte maneira:

Fonte dos Links: Roboto
Peso da Fonte dos Links: Negrito
Cor do texto dos links: # f92c8b

Adicionar seção de postagens relacionadas

Após a navegação da postagem, estamos prontos para adicionar uma seção de “postagens relacionadas” ao nosso modelo de postagem do blog. Isso será útil para fornecer postagens sugeridas ao usuário com base na categoria atual da postagem que está sendo visualizada.

Adicionar título de postagem relacionado usando módulo de texto

Antes de adicionar o Módulo de Blog para obter as postagens relacionadas, precisamos criar um Título estático para a seção. Para fazer isso, crie uma nova seção com uma linha de uma coluna. Em seguida, adicione um módulo de texto à linha.

Atualize o conteúdo do texto com o seguinte título H2:

<h2>You May Also Like...</h2>

Em seguida, atualize o design do texto do título da seguinte maneira:

Fonte do título 2: Roboto
Tamanho do texto do título 2: 48 px (desktop), 38 px (tablet), 28 px (telefone)

Agora que nosso título está definido, estamos prontos para adicionar nossas postagens relacionadas.

Adicionar postagens relacionadas usando o módulo de blog com postagens da categoria atual

Sob o módulo de texto que contém o título, adicione um novo Módulo de Blog.

Em seguida, atualize o conteúdo do módulo do blog da seguinte maneira:

Post Count: 3
Categorias incluídas: categoria atual
Comprimento do trecho: 120
Mostrar Autor: NÃO
Mostrar categorias: NÃO
Mostrar paginação: NÃO

O aspecto mais importante dessas configurações é a seleção da “categoria atual”. Isso permitirá que o modelo de postagem obtenha as postagens mais recentes que compartilham a mesma categoria da postagem atual.

Com as configurações de conteúdo do módulo de blog no lugar, vá para as configurações de design e atualize o seguinte:

Layout: Grade
Fonte do título: Roboto
Tamanho do texto do título: 14px
Altura da linha do título: 1,3em
Fonte do corpo: Lato
Meta Font: Lato
Meta Cor do Texto: # f92c8b
Tamanho do metatexto: 13px
Layout de grade com cantos arredondados: 20 px

Continue a atualizar o design com uma sombra de caixa da seguinte maneira:

Largura da borda do layout da grade: 0 px
Sombra da caixa: Veja a captura de tela
Posição vertical da sombra da caixa: 16 px
Força do desfoque de sombra da caixa: 96 px
Força de propagação da sombra da caixa: -24px

Adicionar Módulo de Comentários

A seção final deste modelo de postagem de blog conterá os comentários. Para adicionar comentários à postagem, simplesmente crie uma nova linha de uma coluna e coloque o módulo de comentários dentro.

Módulo de comentários do projeto

Tudo o que resta fazer agora é personalizar o design do módulo de comentários para corresponder ao nosso modelo. Atualize as seguintes configurações de design:

Cor de fundo: # f2f5f9
Cor de fundo dos campos: #ffffff
Cor de fundo do foco dos campos: #ffffff
Cor do texto do foco dos campos: # 222222
Margem dos campos: 3px inferior
Preenchimento dos campos: 18px superior, 18px inferior
Fonte dos Campos: Lato
Tamanho do texto dos campos: 16px
Altura da linha dos campos: 1,4em

Continue a atualizar as configurações da seguinte maneira:

Cantos arredondados da imagem: 60 px
Fonte do título: Roboto
Tamanho do texto do título: 26 px (desktop), 20 px (tablet), 15 px (telefone)
Altura da linha do título: 1,3em
Meta Font: Lato
Fonte do comentário: Lato
Cor do texto do comentário: # 222222
Preenchimento: 5% superior, 5% inferior, 5% esquerdo, 5% direito

Por fim, personalize o estilo do botão para os comentários da seguinte maneira:

Tamanho do texto do botão: 14 px
Largura da borda do botão: 0 px
Raio da borda do botão: 4px
Espaçamento entre letras dos botões: 5 px (desktop), 5.5 px (pairar)
Fonte do botão: Roboto
Peso da fonte do botão: negrito
Estilo da fonte do botão: maiúscula (TT)
Preenchimento do botão: 16 px superior, 16 px inferior

Adicionar divisor de seção ao cabeçalho

Não se esqueça de todas as opções de design incríveis à sua disposição ao projetar o modelo de postagem. Por exemplo, podemos dar à seção de cabeçalho um design divisor. Para fazer isso, volte ao topo da página e abra as configurações da seção superior que contém o cabeçalho. Em seguida, atualize o seguinte:

Estilo do divisor inferior: veja a captura de tela
Cor do divisor: #ffffff
Altura do divisor: 10vw
Divider Flip: horizontal

Não se esqueça de salvar suas configurações para o layout e também para o Theme Builder para que suas alterações sejam salvas.

É isso! Vamos conferir o resultado final.

Resultado final

Para ver o resultado final, podemos abrir qualquer postagem de blog em nosso site Divi (já que o modelo foi atribuído a todas as postagens de blog).

Aqui está um exemplo de postagem ao visualizá-lo no editor de postagem no backend.

E aqui está a postagem no front end com nosso modelo de postagem no blog.

E aqui está na tela do tablet e do telefone:

Usando o Divi Builder para criar uma postagem de blog com um modelo de postagem de blog no local

Se preferir, você pode facilmente implantar o Divi Builder para criar uma postagem de blog usando um modelo de postagem de blog como este. Qualquer conteúdo criado e projetado com o Divi Builder será exibido na área do Módulo de Postagem do modelo.

Pensamentos finais

Espero que este tutorial sirva como um bom ponto de partida para criar seu próprio modelo de postagem de blog do zero usando o Divi Builder. Não se esqueça de considerar todas as ferramentas disponíveis e também como você deseja estruturar o layout do modelo de postagem. É sempre importante usar o máximo de elementos de conteúdo dinâmico em todo o modelo de postagem do blog para simplificar melhor o processo de criação envolvido com o blog. Com um lindo modelo instalado, um blogueiro pode realmente se concentrar na criação de conteúdo, enquanto o modelo faz todo o trabalho pesado do design automaticamente.

Você construiu um modelo de postagem de blog usando o Divi Theme Builder? Deixe-nos saber o que você pensa.

Estou ansioso para ouvir de você nos comentários.

Saúde!