Criando uma seção “Nosso Processo” com as Novas Estruturas de Coluna da Divi

As novas estruturas de coluna do Divi inegavelmente adicionaram uma tonelada de possibilidades de design integrado ao Divi. Para mostrar como você pode se tornar único com as versáteis estruturas de coluna do Divi, mostraremos como criar uma seção exclusiva de “nosso processo” usando apenas as opções integradas do Divi. Além disso, também adicionaremos um efeito de foco sutil que aparece ao passar o mouse em uma das etapas do processo. Essas seções são ótimas para explicar como você faz o que faz com seus clientes ou clientes em potencial.

Vamos lá!

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada no resultado que você pode esperar deste tutorial.

Adicionar nova seção

Cor de fundo

Adicione uma seção padrão a uma página nova ou existente e use a seguinte cor de fundo para ela:

• Cor de fundo: # 3a1dad

Espaçamento

Vá para as configurações de espaçamento a seguir e adicione algum preenchimento personalizado superior e inferior.

• Enchimento superior: 170px
• Preenchimento inferior: 170px

Visibilidade

Estamos criando uma alternativa em tamanhos de tela menores, mas começaremos criando a versão para desktop. É por isso que estamos desativando esta seção no telefone e tablet nas configurações de visibilidade.

Adicionar linha # 1

Estrutura da Coluna

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

Adicionar fundo gradiente às colunas 1, 3 e 5

Para criar um bom efeito de foco, vamos adicionar um fundo gradiente às colunas 1, 3 e 5. Essas são as colunas que conterão, cada uma, uma etapa do processo. Usaremos as duas colunas restantes para conectar as etapas uma à outra. Cada uma das três colunas que mencionamos precisará do mesmo fundo gradiente:

• Cor 1: # 580cf2
• Cor 2: rgba (41,196,169,0)
• Tipo de gradiente da coluna 1: Radial
• Posição inicial da coluna 1: 38%
• Posição final da coluna 1: 38%

Dimensionamento

Depois de adicionar os fundos gradientes, vá para as configurações de dimensionamento e habilite a opção de largura total.

• Tornar esta linha com largura total: Sim

Espaçamento

Também precisaremos de alguns valores de preenchimento personalizados para toda a linha e coluna que são dedicados a conter as etapas do processo.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px
• Preenchimento superior da coluna 1: 20 px
• Preenchimento inferior da coluna 1: 20 px
• Preenchimento superior da coluna 3: 20 px
• Preenchimento inferior da coluna 3: 20 px
• Preenchimento superior da coluna 5: 20 px
• Preenchimento inferior da coluna 5: 20 px

Clone a linha # 1 duas vezes

Antes de adicionar qualquer módulo, vamos clonar a linha duas vezes. Isso nos ajudará a economizar tempo nas próximas etapas.

Modificar a primeira duplicata

Remover fundos gradientes da coluna

Abra a segunda linha em sua seção (a primeira duplicata) e remova todos os fundos gradientes da coluna que foram aplicados a ela. Não precisaremos deles, pois a segunda linha não conterá nenhuma etapa do processo, apenas um título e divisórias verticais que conectarão as etapas.

Remover espaçamento entre colunas

Da mesma forma, remova todo o preenchimento personalizado da coluna que foi aplicado às colunas 1, 3 e 5.

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

Adicione o módulo do Blurb à primeira coluna da linha 1

Adicionar conteúdo

É hora de começar a adicionar os módulos! Começaremos com um módulo Blurb na coluna 1 da primeira linha. Este Módulo do Blurb conterá o conteúdo de nossa primeira etapa, então vá em frente e adicione algum texto de sua escolha.

Escolha o ícone

Também estamos usando o seguinte ícone que indica onde procurar a próxima etapa:

Cor de fundo padrão

Em seguida, adicione uma cor de fundo padrão ao Módulo Blurb. Esta cor de fundo é a mesma que usamos para a seção. Ele oculta o fundo gradiente da coluna que adicionamos na parte anterior deste tutorial.

• Cor de fundo: # 3a1dad

Hover Background Color

No entanto, queremos que o fundo gradiente da coluna apareça ao passar o mouse. É por isso que estamos mudando a cor de fundo ao pairar para uma completamente transparente.

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

Configurações de ícone padrão

Continue acessando as configurações do ícone e fazendo algumas alterações.

• Cor do ícone: # 9d8ad8
• Posicionamento do ícone: topo
• Use o tamanho da fonte do ícone: Sim
• Tamanho da fonte do ícone: 80px

Configurações do ícone de pairar

Aplique uma cor de ícone e tamanho de fonte diferentes ao passar o mouse.

• Cor do ícone: #ffffff
• Tamanho da fonte do ícone: 120px

Configurações de texto

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

• Orientação do Texto: Centro
• Cor do Texto: Claro

Configurações de texto do título

As configurações do texto do título também precisam ser modificadas.

• Peso da fonte do título: Ultra negrito
• Estilo da fonte do título: maiúsculas

Transições

Para criar uma transição suave, aumentaremos a duração da transição.

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

Clone o módulo do Blurb e coloque em colunas desiguais (linha 1 e 3)

Agora que criamos a primeira etapa do módulo Blurb, podemos cloná-lo 5 vezes e colocar as duplicatas nas colunas marcadas na tela de impressão abaixo.

Alterar conteúdo e ícone de cada duplicado

Claro, você terá que alterar o conteúdo de cada uma das duplicatas junto com o ícone para ter certeza de que o processo está fazendo sentido.

Adicionar divisor horizontal à segunda coluna da linha 1

Visibilidade

O segundo módulo que precisaremos adicionar é um Módulo divisor. Estamos usando este módulo para conectar todas as etapas do Módulo Blurb entre si. Vá em frente e adicione um à segunda coluna da primeira linha.

• Mostrar divisor: Sim

Divider Color

Altere a cor do divisor a seguir.

• Cor: #dddddd

Espaçamento

Para alinhar o Módulo Divisor verticalmente, usaremos alguma margem superior. Também aumentaremos a largura do módulo usando alguma margem esquerda e direita negativa.

• Margem superior: 150px
• Margem esquerda: -60px
• Certo: -60px

Clone o divisor horizontal e coloque-o em colunas pares (linha 1 e 3)

Clone o Módulo Divisor e coloque-o nas colunas que estão marcadas na tela de impressão abaixo:

Adicionar divisor vertical à primeira coluna da linha 2

Visibilidade

Precisamos de um divisor vertical também. Para criar um, adicionaremos um novo Módulo Divisor à coluna 1 da segunda linha, mas nos certificaremos de que a opção 'Mostrar Divisor' esteja desabilitada.

• Mostrar divisor: Não

Cor de fundo

Em seguida, adicione uma cor de fundo ao módulo.

• Cor de fundo: #dddddd

Dimensionamento

E altere as configurações de dimensionamento a seguir. Depois de fazer isso, você observará um divisor vertical se encaixar.

• Largura: 0,5%
• Alinhamento do Módulo: Centro

Espaçamento

Para aumentar a altura do divisor vertical, usaremos alguns valores de espaçamento personalizados.

• Margem superior: 20px
• Enchimento superior: 120px
• Preenchimento inferior: 120px

Clone o divisor vertical e coloque a duplicata na coluna 5 da linha 2

Clone o divisor vertical que você criou e coloque-o na última coluna da segunda linha.

Adicionar Módulo de Texto de Título à Coluna 3 da Linha # 2

Adicionar conteúdo

O último módulo de que precisaremos é um Módulo de texto de título. Adicione este módulo à terceira coluna da segunda linha com algum conteúdo de sua escolha.

Configurações de texto de título

Vá para as configurações de texto do título e faça algumas alterações na aparência do seu título.

• Peso da fonte do cabeçalho 2: ultra negrito
• Alinhamento de Texto do Título 2: Centro
• Cor do texto do título 2: rgba (255,255,255,0,09)
• Tamanho do texto do título 2: 220 px (desktop), 150 px (tablet), 100 px (telefone)
• Cabeçalho 2 espaçamento entre letras: -50px (desktop), -30px (tablet), -25px (telefone)

Espaçamento

Por último, adicione alguns valores de espaçamento personalizados para permitir que o Módulo de texto do título se encaixe no lugar.

• Margem superior: 30px
• Margem esquerda: -800px
• Margem direita: -800px

Criar alternativa para tablet e telefone

Adicionar nova seção

Cor de fundo

Conforme mencionado no início deste post, vamos criar uma alternativa para telas menores. Vá em frente e adicione uma nova seção regular usando a mesma cor de fundo da anterior.

• Cor de fundo: # 3a1dad

Espaçamento

Adicione alguns valores personalizados de preenchimento superior e inferior.

• Enchimento superior: 170px
• Preenchimento inferior: 170px

Visibilidade

E esconda a seção na área de trabalho nas configurações de visibilidade.

Adicionar linha # 1

Estrutura da Coluna

Em vez de usar uma linha de 6 colunas, como fizemos para a seção da área de trabalho, estamos usando apenas uma coluna.

Clonar Módulo de Texto de Título da Seção Anterior e Colocar na Linha 1

Clone o título Módulo de texto de sua seção da área de trabalho e coloque a duplicata em sua nova linha.

Remover Espaçamento

Continue removendo as configurações de espaçamento deste módulo.

Adicionar linha # 2

Estrutura da Coluna

Em seguida, adicione outra linha com uma coluna.

Clone o módulo do Blurb da seção anterior e coloque na linha 2

Clone uma das etapas do Módulo Blurb na seção da área de trabalho e coloque a duplicata em sua nova linha.

Alterar ícone

Mude o ícone para aquele que aponta para baixo.

Mudar o tamanho

Altere as configurações de dimensionamento a seguir.

• Largura: 39% (tablet), 59% (telefone)
• Alinhamento do Módulo: Centro

Clonar divisor vertical da seção anterior e colocar na linha 2

Estamos usando o divisor vertical da seção anterior aqui também. Vá em frente, clone-o e coloque a duplicata logo abaixo do Módulo Blurb.

Alterar espaçamento

Altere as configurações de espaçamento deste módulo para diminuir sua altura.

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

Clone os dois módulos quantas vezes quiser

Você pode clonar esses dois módulos quantas vezes quiser para mostrar todas as etapas do processo em telas menores.

Antevisão

Agora que passamos por todas as etapas, vamos dar uma olhada final no resultado.

Pensamentos finais

Neste post, mostramos como usar criativamente as estruturas de coluna do Divi para criar uma seção de processo impressionante e única. Além disso, também adicionamos um efeito de foco sutil a cada uma das etapas do processo que aparece quando você passa o mouse sobre um elemento. Sinta-se à vontade para brincar com este design para criar sua própria alternativa única. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!