Como criar uma linha do tempo com o módulo Blurb da Divi

Neste post, mostraremos como você pode criar facilmente uma linha do tempo simples, mas elegante, com seus módulos Blurb da Divi. Estaremos combinando as diferentes opções que os módulos e linhas fornecem para alcançar o resultado que você pode ver abaixo. O exemplo que compartilharemos é baseado apenas nas opções Divi integradas, o que significa que você não precisará adicionar nenhum código CSS adicional! Também estamos garantindo que ele tenha uma boa aparência tanto no desktop quanto no celular.

Resultado

A aparência de uma linha do tempo é obtida com dois elementos de design; a linha que cruza todos os três módulos do Blurb e os números. A versão para desktop tem esta aparência:

E a versão móvel se parece com isto:

Vamos começar!

Como criar uma linha do tempo com o módulo Blurb da Divi

Inscreva-se no nosso canal no Youtube

Adicionar seção padrão

Cor de fundo da seção

Comece adicionando uma nova seção padrão e usando 'rgba (0,0,0,0.12)' como sua cor de fundo.

Preenchimento de seção

Vá para a guia Design e use um preenchimento superior de '300px'.

Adicionar linha de três colunas (linha do tempo)

Fundos de coluna

Depois de criar a seção, adicione uma linha de três colunas a ela. Na guia Conteúdo dessa linha, use '# e09900' como a cor de fundo da Coluna 1, '# 0c71c3' como a cor de fundo da Coluna 2 e '# 8300e9' como a cor de fundo da Coluna 3.

Dimensionamento

Vá para a guia Design e use as seguintes configurações para a subcategoria Dimensionamento:

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

Margem e preenchimento personalizados

Em seguida, adicione o seguinte preenchimento personalizado e margem personalizada à linha:

• Enchimento superior: 1px
• Preenchimento inferior: 0 px
• Margem inferior: -200px

E adicione '3px' ao preenchimento superior e inferior de cada coluna.

Desativar no tablet e telefone

Por último, desative a linha no tablet e no telefone.

Adicionar outra linha de três colunas (módulos do Blurb)

Fundo do gradiente da coluna

Depois de criar a primeira linha de três colunas, você pode prosseguir e criar a segunda logo abaixo dela (elas compartilham a mesma seção). Cada uma das colunas precisa de um fundo gradiente com as mesmas configurações, mas com uma primeira cor diferente:

• Primeira cor: # e09900 (coluna 1), # 0c71c3 (coluna 2), # 8300e9 (coluna 3)
• Segunda cor: rgba (255, 255, 255, 0)
• Tipo de gradiente: Linear
• Direção do gradiente: 180 graus
• Posição inicial: 73%
• Posição final: 92%

Aumentar a largura total da linha

Em seguida, vá para a guia Design e ative a opção 'Make This Row Fullwidth'.

Preenchimento personalizado de linha

Abra a subcategoria de espaçamento e use o seguinte Preenchimento e Margem Personalizados para a linha:

• Preenchimento superior: 0 px
• Preenchimento direito: 60px
• Preenchimento inferior: 100px
• Preenchimento esquerdo: 60px
• Margem superior: -100px

Adicione '5px' ao preenchimento superior de cada coluna também.

Módulo Blurb

Depois de concluir as configurações de linha, você pode adicionar um Módulo Blurb à primeira coluna da linha que acabou de criar. Na subcategoria Imagem e Ícone da guia de conteúdo, ative a opção 'Usar Ícone' e selecione um ícone de sua escolha.

Role para baixo na mesma guia e use '# f4f4f4' como cor de fundo.

Vá para a guia Design e faça os seguintes ajustes na subcategoria Imagem e Ícone:

• Cor do ícone: # e09900
• Posicionamento de imagem / ícone: esquerda
• Use o tamanho da fonte do ícone: Sim
• Tamanho da fonte do ícone: 50px

Na subcategoria Texto, certifique-se de que a Orientação do texto à esquerda esteja ativada.

As opções para a subcategoria Texto do cabeçalho são as seguintes:

• Fonte do cabeçalho: Rodada de Creta
• Alinhamento do Texto do Cabeçalho: Esquerda
• Tamanho da fonte do cabeçalho: 32px
• Altura da linha de cabeçalho: 1em

Em seguida, abra a subcategoria do corpo do texto e use as seguintes configurações:

• Alinhamento do corpo do texto: esquerda
• Tamanho da fonte do corpo: 12px
• Altura da linha corporal: 1,7em

Usaremos uma borda com as seguintes configurações também:

• Borda de uso: Sim
• Cor da borda: # 000000
• Largura da borda: 2 px
• Estilo da borda: pontilhada

Em seguida, abra a subcategoria Sizing e use '279px' para a largura do conteúdo e '100%' para a largura.

Por último, adicione '30px' ao preenchimento superior, direito, inferior e esquerdo.

Módulo de Texto

Depois de adicionar e modificar o Módulo Blurb, vá em frente e adicione um Módulo de Texto logo abaixo dele. O Módulo de Texto também precisará de um fundo gradiente:

• Primeira cor: # e09900
• Segunda cor: rgba (255, 255, 255, 0)
• Tipo de gradiente: radial
• Direção Radial: Centro
• Posição inicial: 20%
• Posição final: 24%

Vá para a guia Design e use as seguintes configurações para a subcategoria Texto:

• Tamanho da fonte do texto: 21px
• Cor do texto: #FFFFFF
• Altura da linha de texto: 1,7em
• Orientação do Texto: Centro

Abra a subcategoria Sizing, use uma largura de '48% 'e selecione o Alinhamento de Módulo correto.

Por último, use uma margem superior de '-100px' e adicione '50px' ao preenchimento superior e inferior.

Clone Blurb e módulo de texto

Depois de preencher a primeira coluna, você pode clonar os dois módulos e colocá-los nas outras duas colunas. As únicas coisas que você terá que mudar são o ícone da sinopse, a cor da sinopse e a primeira cor gradiente do Módulo de Texto em '# 0c71c3' para a segunda coluna e '# 8300e9' para a última coluna.

Desativar no tablet e telefone

Depois de concluir esta segunda linha, certifique-se de desativá-la também para o telefone e o tablet.

Clonar linha de três colunas (tablet e telefone)

A versão da linha do tempo no tablet e no telefone é um pouco diferente. Clone a linha com sinopses que você criou na parte anterior deste post e siga as próximas etapas para ajustá-la ao telefone e ao tablet.

Adicionar fundo gradiente de linha

A linha no tablet e no telefone precisará do seguinte fundo gradiente:

• Primeira cor: rgba (0,0,0,0.7)
• Segunda cor: rgba (255, 255, 255, 0)
• Tipo de gradiente: Linear
• Direção do gradiente: 90 graus
• Posição inicial: 1%
• Posição final: 0%

Preenchimento de linha

Exclua todo o preenchimento e margem personalizados que foram usados ​​na versão desktop e adicione '100px' ao preenchimento superior.

Desativar no desktop

Por último, em vez de desativar a linha no telefone e no tablet, desative-a no desktop.

Resultado

Depois de seguir todas as etapas da postagem, você deve ser capaz de obter o seguinte resultado no desktop:

E o seguinte resultado no tablet e telefone:

Pensamentos finais

Nesta postagem, mostramos como você pode criar uma linha do tempo simples de seu módulo Blurb usando nada mais do que as opções Divi integradas. Dois fatores que ajudam a identificar os Módulos Blurb como uma linha do tempo são a linha que conecta todos os três Módulos Blurb e os números. Se você tiver dúvidas ou sugestões; certifique-se de deixar um comentário na seção de comentários abaixo!

Certifique-se de se inscrever em nosso boletim informativo por e-mail e canal no YouTube para que você nunca perca um grande anúncio, dica útil ou brinde Divi!