Como Usar as Novas Estruturas de Coluna da Divi para Criar Transições de Seção Impressionantes

Todas as semanas, fornecemos pacotes de layout Divi novos e gratuitos que você pode usar em seu próximo projeto. Para um dos pacotes de layout, também compartilhamos um caso de uso que o ajudará a levar seu site para o próximo nível.

Esta semana, como parte de nossa iniciativa de design Divi em andamento, vamos mostrar como usar as novas estruturas de coluna do Divi para criar transições de seção impressionantes. Vamos combinar diferentes estruturas de coluna com algumas das opções integradas do Divi para levar o design de nossa página para o próximo nível.

Vamos lá!

Antevisão

Vamos começar dando uma olhada nos três exemplos diferentes que criaremos do zero usando apenas as opções integradas do Divi. Esses exemplos parecem igualmente bons em tamanhos de tela menores.

Use a página inicial do pacote de layout do maquiador da Divi

Vamos usar a página de destino do Pacote de Layout do Maquiador da Divi. Se você quiser verificar o pacote de layout, vá para a seguinte postagem do blog. Embora estejamos demonstrando este tutorial usando um pacote de layout específico, você também pode usar facilmente as técnicas em outros layouts.

Seção Transição # 1

Adicionar nova seção

Localizar

Abra a página de destino do Pacote de layout do maquiador usando o Visual Builder do Divi. Em seguida, adicione uma nova seção regular logo abaixo da seção do herói:

Espaçamento

Remova todo o espaçamento padrão de sua seção a seguir:

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

Adicionar nova linha

Estrutura da Coluna

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

Dimensionamento

Aumente a largura da linha também:

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

Espaçamento

Remova o preenchimento padrão superior e inferior a seguir:

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

Filtro

Para tornar a linha mais vibrante, aumente a saturação nas configurações do Filtro:

• Saturação: 200%

Adicionar Módulo Divisor # 1 à Coluna 1

Ocultar divisor

Para criar o primeiro quadrado em nosso design, vamos adicionar um Módulo Divisor à coluna 1. Desative a opção 'Mostrar Divisor'.

Fundo Gradiente

Em seguida, adicione um fundo gradiente ao Módulo Divisor:

• Cor 1: rgba (255,255,255,0)
• Cor 2: rgba (176,182,219,0,34)

Espaçamento

Para criar o quadrado, altere os valores de Espaçamento:

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

Clonar Módulo Divisor e Colocar na Coluna 2

Quando terminar de modificar o Módulo Divider, clone-o e coloque-o na segunda coluna.

Alterar fundo gradiente

Algumas alterações precisam ser feitas nesta duplicata, começando com o fundo gradiente:

• Cor 1: rgba (228.237.234,0.58)
• Cor 2: rgba (255,255,255,0)

Alterar espaçamento

Altere as configurações de Espaçamento também. Isso aumentará a distância entre este Módulo Divisor e o da primeira coluna.

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

Clone o módulo divisor nº 1 duas vezes e coloque na coluna 3 e 5

Clone o Módulo Divisor roxo duas vezes e coloque as duplicatas nas colunas 3 e 5.

Clone o Módulo Divisor nº 2 e coloque-o na Coluna 4

Clone o módulo divisor verde também e coloque-o na coluna 4.

Oculte o Módulo Divisor nas Colunas 3, 4 e 5 no Tablet e no Telefone

Abra o Módulo Divisor na Coluna 3

Obviamente, queremos que essas transições de seção tenham a mesma aparência em telas menores. É por isso que vamos ocultar alguns dos módulos que usamos. Comece abrindo as configurações do Módulo Divisor na coluna 3.

Ocultar no tablet e telefone

Vá para a guia Avançado e desative o módulo no telefone e tablet.

Copiar Estilos de Visibilidade

Teremos de ocultar as divisórias nas colunas 4 e 5 também. Para acelerar o processo, copie as configurações de visibilidade do divisor na coluna 3:

Colar Estilos de Visibilidade

E cole-os nos Módulos do divisor nas colunas 4 e 5.

Seção Transição # 2

Adicionar nova seção

Localizar

Para criar a transição da segunda seção, adicione uma nova seção aqui:

Divisor superior

Abra as configurações da seção e adicione o seguinte divisor superior:

• Estilo do divisor: Encontrar na lista
• Cor do divisor: #ffffff
• Altura do divisor: 236 px
• Divider Flip: Vertical
• Disposição do divisor: no topo do conteúdo da seção

Divisória Inferior

Da mesma forma, adicione um divisor inferior também:

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

Espaçamento

Altere as configurações de espaçamento a seguir:

• Margem superior: 100px
• Margem inferior: 100px
• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Adicionar nova linha

Estrutura da Coluna

É hora de adicionar uma linha à nova seção! Escolha a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar nenhum módulo, abra as configurações de linha e altere a largura:

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

Espaçamento

Remova também todo o preenchimento padrão superior e inferior:

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

Adicionar Módulo Divisor # 1 à Coluna 1

Cor de fundo

Em seguida, adicione um Módulo Divisor à primeira coluna. Abra suas configurações e adicione uma cor de fundo:

• Cor de fundo: rgba (176,182,219,0,34)

Divider Color

Altere também a cor do divisor:

• Cor do divisor: #ffffff

Estilo Divisor

Em seguida, vá para as configurações de Estilos e use o seguinte Estilo de divisor:

• Estilo Divisor: Duplo

Peso Divisor

O peso do divisor deve ser o seguinte:

• Peso do divisor: 18px

Espaçamento

Por último, mas não menos importante, aumente o tamanho do Módulo Divisor usando preenchimento personalizado:

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

Clonar Módulo Divisor e Colocar na Coluna 2

Quando terminar de usar o Módulo divisor na primeira coluna, clone-o e coloque a duplicata na segunda coluna.

Mudar a cor do fundo

Altere a cor de fundo desta duplicata de acordo:

• Cor de fundo: # e4edea

Clone o Módulo Divisor nº 1 e coloque-o nas Colunas 3 e 5

Continue clonando o Módulo Divisor roxo duas vezes e colocando as duplicatas nas colunas 3 e 5.

Clone o Módulo Divisor nº 2 e coloque-o na Coluna 4

Clone também o módulo divisor verde e coloque a duplicata na coluna 4.

Oculte o Módulo Divisor nas Colunas 3, 4 e 5 no Tablet e no Telefone

Ocultar no tablet e telefone

Faremos a mesma coisa que fizemos no exemplo de transição da primeira seção. Abra as configurações do Módulo Divisor na coluna 3 e oculte-o no telefone e no tablet.

Copiar Estilos de Visibilidade

Copie esses estilos de visibilidade.

Colar Estilos de Visibilidade

E cole-os nos Módulos do divisor nas colunas 4 e 5.

Seção Transição # 3

Adicionar nova seção

Localizar

Para adicionar a transição da última seção à sua página, adicione uma nova seção aqui:

Divisor superior

Abra as configurações da seção e adicione um divisor superior:

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

Divisória Inferior

Adicione um de baixo a seguir:

• Estilo do divisor: Encontrar na lista
• Cor do divisor: #ffffff
• Altura do divisor: 150px
• Divider Flip: Vertical
• Disposição do divisor: no topo do conteúdo da seção

Espaçamento

Em seguida, vá para as configurações de Espaçamento e faça algumas alterações:

• Margem superior: 100px
• Margem inferior: 100px
• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Adicionar nova linha

Estrutura da Coluna

A linha de que precisaremos nesta seção tem a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar nenhum módulo, abra as configurações de linha e aumente a largura de sua linha:

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

Espaçamento

Remova todo o preenchimento padrão superior e inferior a seguir:

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

Adicionar Módulo Divisor # 1 à Coluna 1

Ocultar divisor

Continue adicionando um Módulo Divisor à primeira coluna. Desative a opção 'Mostrar divisor'.

Cor de fundo

Em vez disso, adicione uma cor de fundo ao divisor:

• Cor de fundo: rgba (176,182,219,0,34)

Espaçamento

Aumente o tamanho do módulo usando o preenchimento superior e inferior:

• Enchimento superior: 100px
• Preenchimento inferior: 100px

Clonar Módulo Divisor e Colocar na Coluna 2

Mudar a cor do fundo

Clone o Módulo Divisor na primeira coluna e coloque a duplicata na segunda. Abra suas configurações e altere a cor de fundo:

• Cor de fundo: rgba (228.237.234,0.58)

Clone o Módulo Divisor nº 1 e coloque-o nas Colunas 3 e 5

Clone o Módulo Divisor roxo duas vezes e coloque-o nas colunas 3 e 5.

Clone o Módulo Divisor nº 2 e coloque-o na Coluna 4

Clone também o módulo divisor verde e coloque a duplicata na coluna 4.

Oculte o Módulo Divisor nas Colunas 3, 4 e 5 no Tablet e no Telefone

Ocultar no tablet e telefone

Oculte o Módulo divisor na coluna 3 no tablet e telefone.

Copiar estilos de visibilidade

Copie esses estilos de visibilidade.

Colar Estilos de Visibilidade

E cole-os no Módulo Divisor nas colunas 4 e 5 e pronto!

Antevisão

Agora que passamos por todas as etapas, vamos dar uma olhada final nos três exemplos diferentes que criamos.

Pensamentos finais

Nesta postagem do blog de caso de uso, mostramos como usar as novas estruturas de coluna do Divi para criar transições de seção impressionantes. Este tutorial é parte de nossa iniciativa de design Divi em andamento, onde tentamos colocar algo em sua caixa de ferramentas de design a cada semana. Se você tiver alguma dúvida, deixe um comentário na seção de comentários abaixo!