Como criar dinamicamente um modelo simples de postagem de blog amigável com a experiência do usuário com a Divi

Publicados: 2019-12-16

Ao compartilhar novas postagens de blog em seu site, é importante tornar a experiência de leitura o mais fácil possível para seus visitantes. Isso significa livrar-se do máximo de distrações possível e, ao mesmo tempo, corresponder à marca do seu site. Também é importante permitir que os visitantes controlem o tamanho do texto por meio do navegador, é aí que a unidade de fonte rem relativa é útil. Ele permite que as pessoas ajustem o tamanho da fonte exibida no navegador. Neste tutorial, construiremos um modelo de postagem de blog bonito e simples que leva em consideração a experiência do usuário. Você também poderá baixar o arquivo JSON 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

modelo de postagem

Móvel

modelo de postagem

Baixe GRATUITAMENTE o modelo simples de postagem de blog amigável para UX

Para colocar suas mãos no modelo de postagem de blog simples e gratuito para UX, 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.

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 crie um novo modelo

Vá para Divi Theme Builder

Comece acessando o Divi Theme Builder.

modelo de postagem

Criar novo modelo

Crie um novo modelo e use-o em todas as suas postagens.

Use em: todas as postagens

modelo de postagem

2. Comece a construir o corpo da postagem do blog

Em seguida, comece a construir o corpo personalizado do seu modelo de postagem.

modelo de postagem

Adicione a linha # 1 à seção existente

Estrutura da Coluna

Dentro do editor de modelo, adicione uma nova linha à seção que já está lá usando a seguinte estrutura de coluna:

modelo de postagem

Dimensionamento

Sem adicionar nenhum módulo ainda, 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

modelo de postagem

Borda da coluna 1 e 2

Adicione uma borda direita à primeira e segunda colunas a seguir.

Largura da borda direita: 1 px (desktop), 0 px (tablet e telefone)
Cor da borda direita: # 333333

modelo de postagem

Adicionar Módulo de Texto a Cada Coluna

Conteúdo Dinâmico

Continue adicionando um Módulo de Texto a cada coluna e selecione algum conteúdo dinâmico para cada módulo individualmente.

Módulo de texto na coluna 1: Categorias de postagem

modelo de postagem

Módulo de texto na coluna 2: data de pós-publicação

modelo de postagem

Módulo de texto na coluna 3: contagem de comentários de postagem
Depois: comentários

modelo de postagem

Configurações de texto

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

Fonte do texto: Lato
Tamanho do Texto: 1.1 Rem
Espaçamento entre letras do texto: 1px
Altura da linha de texto: 2em

modelo de postagem