Como criar lindas transições de seção usando os novos recursos de design da Divi

Neste tutorial Divi, vamos mostrar como criar belas transições de seção usando nada mais do que as opções Divi integradas.

As seções são a base de todo o conteúdo que você compartilha em seu site. Cada seção é um capítulo e ir de uma seção para a outra faz parte do processo de narrativa. Tornar essa transição o mais suave possível enfatizará a mensagem que você está tentando articular. Para ajudá-lo com isso, vamos mostrar como você pode criar belas transições de seção para o seu próximo projeto de site.

Espiada

Antes de mergulhar em todas as diferentes transições de seção individualmente, vamos dar uma olhada no que você pode esperar:

Como criar lindas transições de seção usando os novos recursos de design da Divi

Inscreva-se no nosso canal no Youtube

Recriar Seções

Vamos começar recriando as duas seções que usaremos em todos os exemplos. Nessas duas seções, usamos o preenchimento necessário para obter o melhor das transições. No entanto, se estiver usando seções com alturas diferentes, talvez seja necessário ajustar levemente os planos de fundo gradientes que estão sendo usados ​​para corresponder às seções perfeitamente.

Criar primeira seção

Comece criando a primeira seção padrão e escolhendo uma linha de largura total.

Configurações da seção

Precisaremos de um preenchimento superior e inferior de '300px', que você pode adicionar na subcategoria Espaçamento da guia Design.

Módulo de Primeiro Texto

Então, vamos adicionar um Módulo de Texto à nossa linha de largura total. Digite o texto que deseja que apareça e vá para a guia Design. Na guia Design, use as seguintes configurações para a subcategoria Texto:

• Fonte do texto: Comfortaa
• Tamanho da fonte do texto: 50
• Altura da linha de texto: 1,7em
• Orientação do Texto: Centro

Segundo Módulo de Texto

Faça o mesmo para o segundo Módulo de Texto, mas use as seguintes configurações:

• Fonte do texto: Comfortaa
• Tamanho da fonte do texto: 16
• Altura da linha de texto: 1,7em
• Orientação do Texto: Centro

Módulo de Botão

Por último, também adicionaremos um Módulo de botão. Comece escolhendo o alinhamento central na guia Design.

Em seguida, abra a subcategoria Botão, ative a opção 'Usar estilos personalizados para o botão' e escolha '20' como o tamanho do texto do botão.

Ainda na subcategoria Botão, use o seguinte fundo gradiente para o botão:

• Primeira cor: # 2b87da
• Segunda cor: # 29c4a9
• Tipo de gradiente: Linear
• Direção do gradiente: 162 graus
• Posição inicial: 0%
• Posição final: 100%

Criar segunda seção

Adicione outra seção padrão, mas escolha uma linha de três colunas.

Configurações da seção

A segunda seção usará um preenchimento de '300 px' para a parte superior e inferior também.

Módulo Blurb

A seguir, vamos adicionar um Módulo Blurb à primeira coluna da linha. Depois de decidir o texto que deseja exibir, role para baixo na guia Conteúdo, ative a opção 'Usar ícone' e selecione um ícone.

Depois de fazer isso, vá para a guia Design e use as seguintes configurações para a subcategoria do ícone:

• Cor do ícone: # 515151
• Posicionamento de imagem / ícone: topo
• Use o tamanho da fonte do ícone: Sim
• Tamanho da fonte do ícone: 55px

Em seguida, certifique-se de que as seguintes configurações se apliquem à subcategoria Texto do cabeçalho:

• Fonte do cabeçalho: Comfortaa
• Alinhamento do Texto do Cabeçalho: Centro
• Tamanho da fonte do cabeçalho: 18

E, por último, estas são as configurações para a subcategoria do corpo do texto:

• Fonte do corpo: Comfortaa
• Alinhamento do corpo do texto: centro
• Tamanho da fonte do corpo: 14
• Altura da linha corporal: 1,7em

Clone Blurb Module

Depois de criar o Módulo Blurb, clone-o duas vezes e coloque-o nas outras duas colunas da linha.

1. Diagonal em toda a extensão

Agora que criamos as seções, é hora de começar a adicionar as transições de seção. O primeiro exemplo que vamos mostrar a você como criar consiste em linhas diagonais simples.

Configurações de fundo gradiente da primeira seção

Abra as configurações da primeira seção e adicione o seguinte fundo gradiente:

• Primeira cor: #dddddd
• Segunda cor: # f7f7f7
• Tipo de gradiente: Linear
• Direção do gradiente: 183 graus
• Posição inicial: 85%
• Posição final: 70,05%

Configurações de fundo gradiente da segunda seção

A segunda seção precisará das seguintes configurações de fundo gradiente:

• Primeira cor: # f7f7f7
• Segunda cor: #dddddd
• Tipo de gradiente: Linear
• Direção do gradiente: 183 graus
• Posição inicial: 85%
• Posição final: 69,05%

Remova o acolchoamento superior da segunda seção

A última coisa que você precisa fazer neste exemplo é remover o preenchimento superior da segunda seção.

2. Encontre-me na metade do caminho

O próximo exemplo que gostaríamos de compartilhar é muito elegante, onde dois fundos gradientes opostos estão sendo usados. Ao usar esse efeito, as seções parecem estar se complementando.

Configurações de fundo gradiente da primeira seção

Para a primeira seção, precisaremos das seguintes configurações de fundo gradiente:

• Primeira cor: rgba (255,255,255,0)
• Segunda cor: rgba (224,43,32,0,07)
• Tipo de gradiente: radial
• Direção radial: canto superior esquerdo
• Posição inicial: 60%
• Posição final: 50%

Configurações de fundo gradiente da segunda seção

A segunda seção terá o seguinte fundo gradiente:

• Primeira cor: rgba (255,255,255,0)
• Segunda cor: rgba (224,43,32,0,33)
• Tipo de gradiente: radial
• Direção radial: inferior direito
• Posição inicial: 58%
• Posição final: 50%

3. Fusão

O próximo exemplo é um pouco diferente do resto. Será necessária uma seção extra entre as duas seções para atingir o resultado que você pode notar na imagem abaixo.

Configurações de fundo gradiente da primeira seção

Para sua primeira seção, você precisará do seguinte fundo gradiente:

• Primeira cor: rgba (12.113.195,0.19)
• Segunda cor: rgba (255,255,255,0,39)
• Tipo de gradiente: radial
• Direção Radial: Esquerda Inferior
• Posição inicial: 50%
• Posição final: 50%

Configurações de fundo gradiente da segunda seção

Para a segunda seção, usaremos as seguintes configurações de fundo gradiente:

• Primeira cor: rgba (224,43,32,0,17)
• Segunda cor: rgba (255,255,255,0,39)
• Tipo de gradiente: radial
• Direção radial: canto superior direito
• Posição inicial: 50%
• Posição final: 50%

Adicionar nova seção padrão no meio

Depois de adicionar os planos de fundo gradientes a ambas as seções, é hora de adicionar uma seção bem entre eles.

Adicionar cor de fundo gradiente à nova seção

Essa nova seção também precisará de um fundo gradiente, usando as seguintes configurações:

• Primeira cor: rgba (12.113.195,0.19)
• Segunda cor: rgba (224,43,32,0.17)
• Tipo de gradiente: Linear
• Direção do gradiente: 92 graus
• Posição inicial: 43%
• Posição final: 62%

4. Inverso

Então, também temos uma transição de seção que não é tão marcante quanto as outras, mas ainda consegue adicionar um toque sutil às suas seções.

Configurações de fundo gradiente da primeira seção

O fundo gradiente da primeira seção é o seguinte:

• Primeira cor: # f2f2f2
• Segunda cor: rgba (104,153,193,0,58)
• Tipo de gradiente: radial
• Direção radial: inferior direito
• Posição inicial: 7,9%
• Posição final: 7,9%

Configurações de fundo gradiente da segunda seção

E o segundo fundo gradiente precisará das seguintes configurações de fundo gradiente:

• Primeira cor: rgba (104,153,193,0,58)
• Segunda cor: # f2f2f2
• Tipo de gradiente: radial
• Direção radial: canto superior direito
• Posição inicial: 8%
• Posição final: 8%

5. Dicas

O quinto exemplo parece um pouco mais limpo e minimalista do que os outros. Você pode perceber a transição de duas maneiras, vendo os ponteiros ou os círculos (ou ambos).

Configurações de fundo gradiente da primeira seção

Use o seguinte fundo gradiente para a primeira seção:

• Primeira cor: # f4f4f4
• Segunda cor: #ffffff
• Tipo de gradiente: radial
• Direção Radial: Topo
• Posição inicial: 88%
• Posição final: 88,05%

Configurações de fundo gradiente da segunda seção

Por último, aplique as seguintes configurações de fundo gradiente à segunda seção:

• Primeira cor: rgba (43.135.218,0)
• Segunda cor: rgba (12.113.195,0.43)
• Tipo de gradiente: radial
• Direção radial: inferior
• Posição inicial: 87%
• Posição final: 87%

6. Quebra-cabeça

O último exemplo definitivamente faz com que as seções pareçam pertencer umas às outras.

Configurações de fundo gradiente da primeira seção

Abra as configurações da primeira seção e use o seguinte fundo gradiente:

• Primeira cor: rgba (160,181,193,0,46)
• Segunda cor: rgba (255,255,255,0)
• Tipo de gradiente: radial
• Direção Radial: Topo
• Posição inicial: 56,3%
• Posição final: 43%

Configurações de fundo gradiente da segunda seção

Em seguida, use as seguintes configurações de fundo gradiente para a segunda seção:

• Primeira cor: rgba (242.242.242,0)
• Segunda cor: rgba (160,181,193,0,46)
• Tipo de gradiente: radial
• Direção Radial: Topo
• Posição inicial: 56%
• Posição final: 40%

Alterar o preenchimento da primeira seção

Para fazer com que as duas seções se encaixem melhor, vamos alterar o preenchimento superior e inferior da primeira seção para '150px'.

Remova o acolchoamento superior da segunda seção

Por último, removeremos também o preenchimento superior da segunda seção.

Pensamentos finais

As transições de seção ajudam a conectar diferentes seções e sua finalidade. Neste post, compartilhamos 6 exemplos que você pode recriar usando nada mais do que as opções integradas do Divi. Se você tiver dúvidas ou sugestões; sinta-se à vontade para 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!

Imagem em destaque por NikVector / shutterstock.com