Apresentando suas últimas postagens em um design móvel impressionante com Divi

A maneira como você exibe as postagens de blog em seu site tem uma grande influência sobre como os visitantes se comportam quando os encontram enquanto navegam em seu site. Para ajudá-lo a ser criativo e eficaz, mostraremos como apresentar as postagens mais recentes de seu blog de uma forma impressionante.

O exemplo que recriaremos ficará particularmente bom em telas menores, enquanto mantém uma ótima aparência no desktop e no tablet. Esperamos que este tutorial inspire você a criar seus próprios designs de postagens de blog personalizados mais recentes.

Vamos lá!

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.

Vamos começar a recriar!

Adicionar nova seção

Fundo Gradiente

Crie uma nova página ou abra uma existente e adicione uma seção regular a ela. Abra as configurações e adicione um fundo gradiente a seguir.

• Cor 1: # 2e1b8f
• Cor 2: #ffffff
• Direção do gradiente: 90 graus
• Posição inicial: 53,3%
• Posição final: 53,3%

Espaçamento

Em seguida, vá para as configurações de espaçamento. Aqui, vamos reduzir o tamanho do conteúdo da seção na área de trabalho e gradualmente nos livrar desse espaço em telas menores.

• Margem superior: 100px
• Margem inferior: 100px
• Preenchimento esquerdo: 26vw (desktop), 13vw (tablet), 0vw (telefone)
• Preenchimento direito: 22,8vw (desktop), 11,4vw (tablet), 0vw (telefone)

Adicionar nova linha

Estrutura da Coluna

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

Cor de fundo da coluna 2

Sem adicionar nenhum módulo ainda, abra as configurações de linha e adicione uma cor de fundo à segunda coluna.

• Cor de fundo da coluna 2: # f7f7f7

Cor de fundo da coluna 3

Adicione a mesma cor ao plano de fundo da coluna 3 também. Estamos usando a mesma cor para essas duas colunas para conectá-las e fazer com que pareçam uma só peça. Posteriormente na postagem, usaremos isso para manipular as larguras das colunas em telas menores.

• Cor de fundo da coluna 3: # f7f7f7

Dimensionamento

Vá para a próxima guia de design e abra as configurações de dimensionamento. Aqui, vamos remover todo o espaço padrão entre as colunas.

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize Alturas de Coluna: Sim

Exibição

Agora, para garantir que todas as três colunas apareçam lado a lado em tamanhos de tela menores, precisamos adicionar uma única linha de código CSS ao elemento principal da linha.

display: flex;

Adicionar Módulo Blurb à Coluna 1

Selecione o ícone

É hora de começar a adicionar módulos! Comece com um Módulo Blurb na coluna 1 e selecione um ícone de sua escolha.

Fundo Gradiente

Vá para as configurações de fundo do módulo e adicione um fundo gradiente radial.

• Cor 1: # 5000ff
• Cor 2: rgba (41,196,169,0)
• Tipo de gradiente: radial
• Direção Radial: Centro
• Posição inicial: 28%
• Posição final: 28%

Configurações de ícone

Continue indo para a guia de design e modificando as configurações do ícone.

• Cor do ícone: #ffffff
• Posicionamento de imagem / ícone: topo
• Usar fonte do ícone: Sim
• Tamanho da fonte do ícone: 22px

Espaçamento

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

• Enchimento superior: 20 px
• Preenchimento inferior: 10 px

Fronteira

E adicione uma borda inferior sutil para finalizar o design do Módulo Blurb.

• Largura da borda inferior: 1 px
• Cor da borda inferior: #ffffff
• Estilo da borda inferior: tracejado

Adicionar Módulo de Texto à Coluna 1

Adicionar conteúdo

O próximo e último módulo de que precisamos na primeira coluna é um Módulo de Texto. Adicione algum conteúdo de sua escolha.

Configurações de texto

Em seguida, vá para a guia de design e modifique as configurações de texto de acordo:

• Fonte do texto: Didact Gothic
• Peso da fonte do texto: negrito
• Cor do texto: #ffffff

Adicionar Módulo de Texto à Coluna 2

Adicionar conteúdo

Vamos para a segunda coluna! Aqui, o único módulo de que precisaremos é um Módulo de Texto. Insira algum conteúdo de sua escolha.

Cor de fundo

Passe para as configurações de fundo e adicione uma cor de fundo completamente branca.

• Cor de fundo: #ffffff

Configurações de texto

Também estamos mudando a aparência de nosso conteúdo, modificando as configurações de texto na guia de design.

• Fonte do Texto: Fonte Serif Pro
• Peso da fonte do texto: negrito
• Cor do texto: # 000000
• Tamanho do texto: 13px
• Orientação do Texto: Centro

Dimensionamento

Conforme mencionado antes, estamos manipulando as estruturas de coluna para criar um design personalizado em tamanhos de tela menores. Para fazer isso, você precisará diminuir a largura do Módulo de texto e certificar-se de que ele esteja alinhado ao lado esquerdo da coluna.

• Largura: 60%
• Alinhamento do Módulo: Esquerda

Espaçamento

Estamos adicionando alguns valores de preenchimento personalizados a seguir.

• Enchimento superior: 57 px
• Preenchimento inferior: 57 px
• Preenchimento esquerdo: 20px
• Preenchimento direito: 20 px

Sombra da caixa

Junto com uma sombra de caixa sutil.

• Força do desfoque de sombra da caixa: 80 px
• Cor da sombra: rgba (0,0,0,0.23)

Adicionar Módulo de Texto à Coluna 3

Adicionar conteúdo

Passe para a próxima e última coluna. Adicione um Módulo de Texto com o título H3 de sua postagem no blog e um link. Adicione os detalhes da postagem no estilo de texto do parágrafo logo abaixo do título.

Configurações de texto

Vá para a guia de design do Módulo de Texto e modifique as configurações de texto.

• Fonte do Texto: Fonte Serif Pro
• Cor do texto: # a8a8a8
• Tamanho do texto: 12px

Configurações de texto H3

Continue alterando também as configurações de texto H3.

• Fonte do título 3: Didact Gothic
• Peso da fonte do cabeçalho 2: negrito
• Tamanho do texto do título 3: 17 px

Espaçamento

Por último, precisaremos adicionar alguns valores de espaçamento personalizados. Você notará que também estamos adicionando alguma margem esquerda negativa ao módulo. Esta é a última etapa para criar um tipo diferente de estrutura de coluna em telas menores. Portanto, embora a estrutura da coluna ainda seja tecnicamente a mesma, combinamos os fundos das colunas, as larguras dos módulos e a margem esquerda negativa para criar um resultado de aparência diferente.

• Margem superior: 35px
• Margem esquerda: -80px (desktop), -50px (tablet e telefone)
• Preenchimento direito: 20 px

Clonar linha duas vezes

Assim que terminar de modificar a linha e todos os seus módulos, você pode clonar a linha inteira quantas vezes quiser, dependendo de quantas postagens de blog mais recentes deseja apresentar.

Alterar ícones

Altere o ícone de cada duplicata.

Modificar conteúdo e links

Junto com o conteúdo e os links que estão envolvidos e pronto!

Antevisão

Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Pensamentos finais

Nesta postagem, mostramos como criar um design incrível para celular que exibe suas últimas postagens de blog. O design que recriamos passo a passo foi feito principalmente para telas menores, mas fica ótimo em tablets e desktops também. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!