Como criar seções de post-heróis dinâmicas e atraentes em blogs com a Divi

Cada vez que uma nova atualização é lançada, as possibilidades de design que você tem aumentam. Combinar conteúdo dinâmico e opções de foco, por exemplo, pode trazer resultados impressionantes. Para demonstrar isso, mostraremos como criar três seções de heróis de postagens de blog dinâmicas impressionantes usando apenas as opções integradas do Divi. Nós o guiaremos passo a passo por cada um dos exemplos que o inspirarão a criar suas próprias variações também.

Vamos lá!

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada no resultado final de todos os três exemplos que iremos criar.

Exemplo 1

Exemplo # 2

Exemplo # 3

Adicionar uma nova postagem no blog

Detalhes da postagem

Em primeiro lugar, comece criando uma nova postagem no blog. Adicione o título, a categoria de escolha e a imagem em destaque. Feito isso, ative o Divi Builder.

Configurações da página Divi

Antes de mudar para o Visual Builder, altere as configurações da página Divi no canto superior direito da nova postagem do blog.

• Layout da página: largura total
• Título da postagem: Ocultar

Mude para o Visual Builder

É hora de mudar para o Visual Builder para começar a criar os diferentes exemplos!

Criando os Módulos

Adicionar uma nova seção + linha de uma coluna

Antes de mergulhar em cada um dos exemplos separadamente, começaremos criando os Módulos de Texto contendo conteúdo dinâmico. Ao longo de todos os três exemplos, usaremos esses módulos predefinidos para finalizar o design. Depois de adicionar uma nova seção, adicione uma nova linha a ela usando a seguinte estrutura de coluna:

Módulo de Texto de Título de Postagem

Selecione o conteúdo dinâmico do título da postagem

O primeiro módulo dinâmico de que precisamos conterá o título da postagem. Adicione um novo Módulo de texto e selecione Título da postagem na lista de conteúdo dinâmico.

Configurações de texto

Em seguida, vá para as configurações de texto e faça algumas alterações.

• Fonte do texto: Lato
• Peso da fonte do texto: negrito
• Cor do texto: # 000000
• Tamanho do texto: 58 px (desktop), 45 px (tablet), 35 px (telefone)
• Altura da linha de texto: 1em
• Orientação do Texto: Centro

Espaçamento

Altere também os valores de espaçamento.

• Margem inferior: 50px
• Enchimento superior: 10 px
• Preenchimento inferior: 10 px

Módulo de texto de data de pós-publicação

Selecione a data de publicação do conteúdo dinâmico

O segundo módulo de que precisaremos é um Módulo de Texto contendo a Data de Pós-Publicação. Vá em frente e adicione um e selecione Post Publish Date na lista de conteúdo dinâmico.

Configurações de texto

Altere as configurações de texto deste módulo a seguir.

• Peso da fonte do texto: leve
• Cor do texto: # 000000
• Tamanho do texto: 30 px (desktop), 20 px (tablet), 16 px (telefone)
• Espaçamento entre letras do texto: 14px
• Orientação do Texto: Centro

Espaçamento

Adicione alguma margem inferior também.

• Margem inferior: 50px

Módulo de texto de categorias de postagem

Selecione as categorias de conteúdo dinâmico

O último módulo que adicionaremos é um Módulo de Texto contendo conteúdo dinâmico de Categorias de Postagem.

Configurações de texto

Vá para as configurações de texto e altere a orientação do texto.

• Orientação do Texto: Centro

Configurações de texto de link

Em seguida, aplique algumas modificações nas configurações de texto do link.

• Peso da Fonte do Link: Ultra Negrito
• Estilo da fonte do link: maiúsculas
• Cor do texto do link: # 000000
• Tamanho do texto do link: 15px
• Espaçamento entre letras de link: 5px

Espaçamento

Em seguida, adicione preenchimento inferior.

• Preenchimento inferior: 20 px

Fronteira

E finalize com uma borda inferior sutil.

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

Criando o Exemplo # 1

Adicionar nova seção

Espaçamento

Vamos começar criando o primeiro exemplo! Logo abaixo da seção anterior que você criou, vá em frente e adicione uma nova. Abra suas configurações e remova todo o preenchimento personalizado padrão.

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

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova linha com a seguinte estrutura de coluna:

Dimensionamento

Abra as configurações de dimensionamento desta linha e mude as coisas.

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize a altura das colunas: Sim

Espaçamento

Adicione alguns valores de espaçamento personalizados a seguir.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px
• Preenchimento superior da coluna 2: 130px
• Preenchimento inferior da coluna 2: 130 px
• Preenchimento esquerdo da coluna 2: 50 px
• Preenchimento direito da coluna 2: 50 px

Adicionar Módulo de Imagem à Coluna 1

Selecione o conteúdo dinâmico da imagem em destaque

Continue adicionando um Módulo de Imagem à primeira coluna. Em vez de enviar uma imagem, vincule o módulo à imagem dinâmica em destaque.

Padrão de borda

Também estamos adicionando uma borda direita ao pairar. Para fazer isso, escolha primeiro a seguinte largura de borda padrão:

• Largura da borda direita: 0 px

Border Hover

E adicione as seguintes configurações ao passar o mouse:

• Largura da borda direita: 24px
• Cor da borda direita: #FFFFFF

Caixa de sombra padrão

O mesmo vale para a sombra da caixa, aplique as seguintes configurações de sombra da caixa padrão:

• Posição vertical da sombra da caixa: 0 px
• Força do desfoque de sombra da caixa: 0 px
• Força de propagação da sombra da caixa: 80px
• Cor da sombra: rgba (255,255,255,0)

Box Shadow Hover

E mudar as coisas ao pairar:

• Posição horizontal da sombra da caixa: 600px
• Posição vertical da sombra da caixa: 0 px
• Força do desfoque de sombra da caixa: 0 px
• Força de propagação da sombra da caixa: 80px
• Cor da sombra: # E4BAC7

Transições

Para criar uma transição suave, altere a duração da transição na guia avançada.

• Duração da transição: 1200ms

Colocar Módulos Dinâmicos na Coluna 2

A única coisa que falta fazer para completar este exemplo é colocar os módulos que criamos na primeira parte deste tutorial na segunda coluna.

Criando o Exemplo # 2

Adicionar nova seção

Padrão de divisor superior

Para o próximo! Adicione uma nova seção com o seguinte divisor superior:

• Estilo do divisor: Encontrar na lista
• Cor do divisor: #FFFFFF
• Altura do divisor: 50px
• Disposição do divisor: no topo do conteúdo da seção

Top Divider Hover

Altere a altura do divisor ao pairar.

• Altura do divisor: 174px

Espaçamento

Remova todo o preenchimento personalizado da próxima seção. Isso permitirá que a linha e a seção colidam em uma das próximas etapas.

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

Transições

Para criar uma transição divisória suave, altere a duração da transição na guia avançada.

• Duração da transição: 500ms

Adicionar nova linha

Estrutura da Coluna

Agora, vá em frente e adicione uma linha à sua seção usando a seguinte estrutura de colunas:

Padrão de cor de fundo

Adicione a seguinte cor de fundo a ele:

• Cor de fundo: #FFFFFF

Passe o mouse sobre a cor de fundo

Altere a cor do plano de fundo ao pairar.

• Cor de fundo: rgba (255,255,255,0,56)

Imagem em destaque Imagem de fundo dinâmica

Faça upload da imagem em destaque também como uma imagem de plano de fundo de linha dinâmica. Depois de fazer isso, altere a mistura da imagem de fundo.

• Mistura de imagem de fundo: tela

Dimensionamento

Permita que a linha ocupe toda a largura da tela, alterando as configurações de dimensionamento.

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

Espaçamento

E adicione alguns valores de espaçamento de preenchimento personalizados.

• Preenchimento superior: 200px
• Preenchimento inferior: 200 px
• Preenchimento esquerdo: 100 px (desktop), 50 px (tablet), 20 px (telefone)
• Preenchimento direito: 100 px (desktop), 50 px (tablet), 20 px (telefone)

Transições

Por último, mas não menos importante, crie uma transição suave alterando a duração da transição.

• Duração da transição: 700ms

Colocar Módulos Dinâmicos na Coluna

Agora você pode colocar todos os módulos dinâmicos na coluna da linha e está feito com o segundo exemplo!

Criando o Exemplo # 3

Adicionar nova seção

Imagem em destaque Imagem de fundo dinâmica

Vamos para o último exemplo! Adicione uma nova seção e selecione a Imagem em destaque como a imagem de plano de fundo da seção.

Espaçamento Padrão

Em seguida, remova todo o preenchimento personalizado padrão da seção.

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

Spacing Hover

Adicione alguma margem personalizada ao pairar para criar um efeito de encolhimento.

• Preenchimento esquerdo: 150 px (desktop), 50 px (tablet), 30 px (telefone)
• Preenchimento direito: 150 px (desktop), 50 px (tablet), 30 px (telefone)

Transições

Altere também a duração da transição.

• Duração da transição: 500ms

Adicionar nova linha

Estrutura da Coluna

Quando terminar de modificar as configurações da seção, continue adicionando uma nova linha com a seguinte estrutura de coluna:

Padrão de cor de fundo

Adicione a seguinte cor de fundo:

• Cor de fundo: #ffffff

Passe o mouse sobre a cor de fundo

Altere a cor do plano de fundo ao pairar.

• Cor de fundo: rgba (255,255,255,0,46)

Fundo Gradiente

Adicione um fundo gradiente radial também.

• Cor 1: rgba (41,196,169,0)
• Cor 2: #ffffff
• Tipo de gradiente: radial
• Posição inicial: 29%
• Posição final: 29%

Dimensionamento

Altere as configurações de dimensionamento da próxima linha.

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

Espaçamento

E adicione alguns valores de preenchimento personalizados.

• Preenchimento superior: 200px
• Preenchimento inferior: 200 px
• Preenchimento esquerdo: 100 px (desktop), 50 px (tablet), 20 px (telefone)
• Preenchimento direito: 100 px (desktop), 50 px (tablet), 20 px (telefone)

Transições

Por último, mas não menos importante, altere a duração da transição para uma transição suave.

• Duração da transição: 500ms

Colocar Módulos Dinâmicos na Coluna

Vá em frente e coloque todos os módulos predefinidos na coluna da linha.

Alterar a orientação do texto de todos os módulos

A única coisa que você precisa mudar nesses módulos é a orientação do texto e pronto!

• Orientação do Texto: Esquerda

Antevisão

Agora que passamos por todas as etapas, vamos dar uma olhada final em todos os três exemplos que criamos.

Exemplo 1

Exemplo # 2

Exemplo # 3

Pensamentos finais

Nesta postagem, mostramos como combinar conteúdo dinâmico com as opções de foco do Divi para criar seções de heróis de postagens de blog impressionantes. Esses exemplos irão, inegavelmente, inspirar você a criar suas próprias variações e personalizar a postagem do blog que você publicou. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!