Como aplicar animações de colisão em elementos de design com Divi

Adicionar animações a elementos de design em sua página pode definitivamente ajudar a aumentar o engajamento. Existem muitas opções de animação disponíveis no Divi's Visual Builder e são bastante simples de usar. Mas você também pode ser criativo com essas animações e usá-las de uma maneira única. Nesta postagem, lidaremos com três exemplos de animações em colisão que recriaremos passo a passo, usando apenas as opções integradas do Divi.

Vamos lá!

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida nos três exemplos que recriaremos neste tutorial.

Exemplo # 1: Texto colidindo

Exemplo # 2: Divisores em colisão

Exemplo # 3: Grade em colisão

Flutuar

Inscreva-se no nosso canal no Youtube

Recrie o exemplo nº 1: texto colidindo

Adicionar Seção Especializada

Estrutura

Vamos começar com o primeiro exemplo! Abra uma página nova ou existente e adicione uma nova seção de especialidade usando a seguinte estrutura:

Dimensionamento

Sem adicionar nenhum módulo ou linha, abra as configurações da seção e habilite a opção 'Tornar esta seção largura total' nas configurações de dimensionamento.

Adicionar linha # 1

Estrutura da Coluna

Continue adicionando uma linha à seção de especialidades:

Dimensionamento

Abra as configurações de linha e faça algumas alterações nas configurações de dimensionamento.

• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Espaçamento

Altere também os valores de preenchimento personalizado nas configurações de espaçamento.

• Enchimento superior: 44px
• Preenchimento inferior: 0 px

Adicionar Módulo de Texto à Coluna 1

Adicionar conteúdo

Continue adicionando um Módulo de Texto à primeira coluna da linha e adicione algum conteúdo.

Configurações de texto de título

Altere as configurações de texto do título a seguir.

• Fonte do cabeçalho: Montserrat
• Peso da fonte do cabeçalho: leve
• Tamanho do texto do título: 4,4vw (desktop), 8,2vw (tablet), 40px (telefone)
• Altura da linha de direção: 0,7em

Adicionar Módulo Divisor à Coluna 1

Visibilidade

O segundo módulo necessário na coluna 1 é um Módulo Divisor. Certifique-se de que o divisor apareça habilitando a opção 'Mostrar divisor'.

• Mostrar divisor: Sim

Cor

Vá para a guia de design e altere a cor do divisor.

• Cor: # 000000

Dimensionamento

Diminua a largura da divisória também.

• Largura: 91%

Espaçamento

E adicione alguma margem superior para criar espaço entre o Módulo divisor e o Módulo de texto.

• Margem superior: 30px

Animação

Por último, adicione uma animação sutil ao Módulo Divisor.

• Estilo de animação: slide
• Direção da animação: esquerda

Adicionar Módulo de Texto à Coluna 2

Adicionar conteúdo

Passe para a segunda coluna e adicione o segundo Módulo de Texto com algum conteúdo de sua escolha.

Configurações de texto de título

Altere as configurações de texto do título a seguir.

• Fonte do cabeçalho: Montserrat
• Peso da fonte do cabeçalho: leve
• Cor do texto do título: # 3f46ff
• Tamanho do texto do cabeçalho: 3,8vw (desktop), 6,5vw (tablet), 40px (telefone)
• Altura da linha de direção: 0,8em

Animação

E adicione uma animação a este módulo também.

• Estilo de animação: slide
• Direção da animação: esquerda
• Atraso de animação: 600 ms
• Intensidade de animação: 10%

Adicionar linha # 2

Estrutura da Coluna

Continue adicionando outra linha à seção usando a seguinte estrutura de coluna:

Adicionar Módulos Restantes

Adicione os outros módulos que deseja exibir nesta nova linha e modifique-os de acordo com suas necessidades.

Recrie o Exemplo 2: Divisores em Colisão

Adicionar Seção Especializada

Estrutura

Vamos para o próximo exemplo! Adicione uma nova seção de especialidade usando a seguinte estrutura:

Dimensionamento

Sem adicionar linhas ou módulos, abra as configurações da seção e habilite a opção 'Tornar esta seção largura total'.

• Tornar esta seção com largura total: Sim

Adicionar linha # 1

Estrutura da Coluna

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

Espaçamento

Abra as configurações de linha e modifique as configurações de preenchimento personalizado.

• Enchimento superior: 44px
• Preenchimento inferior: 0 px

Adicionar Módulo de Texto

Adicionar conteúdo

Em seguida, adicione um Módulo de Texto à linha com algum conteúdo de sua escolha.

Configurações de texto de título

Vá para a guia de design e altere as configurações de texto do título.

• Fonte do cabeçalho: Montserrat
• Peso da fonte do cabeçalho: leve
• Tamanho do texto do título: 70 px (desktop), 50 px (tablet), 40 px (telefone)
• Altura da linha de direção: 0,8em

Adicionar linha # 2

Estrutura da Coluna

Continue adicionando outra linha usando a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e modifique as configurações de dimensionamento.

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Largura: 53% (desktop), 100% (tablet e telefone)

Espaçamento

Altere também os valores de preenchimento personalizados.

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

Adicionar Módulo Divisor à Coluna 1

Visibilidade

Quando terminar de modificar as configurações de linha, vá em frente e adicione um Módulo Divisor à primeira coluna e certifique-se de que o divisor apareça habilitando a opção 'Mostrar Divisor'.

• Mostrar divisor: Sim

Cor

Altere a cor do divisor a seguir.

• Cor do divisor: # 3f46ff

Estilos

E mude o estilo do divisor nas configurações de estilos.

• Estilo Divisor: Duplo

Dimensionamento

Aumente o peso do divisor nas configurações de dimensionamento também.

• Peso do divisor: 8px

Animação

Por último, adicione uma animação ao Módulo Divisor.

• Estilo de animação: slide
• Direção da animação: direita

Clonar Módulo Divisor e Colocar na Coluna 2

Quando terminar de modificar as configurações do Módulo divisor, vá em frente e clonar o módulo. Coloque a duplicata na segunda coluna da linha.

Alterar Animação

Para criar um efeito de colisão, altere a direção da animação do Módulo Divisor duplicado.

• Estilo de animação: slide
• Direção da animação: esquerda

Adicionar linha # 3

Estrutura da Coluna

Continue adicionando outra linha usando a seguinte estrutura de coluna:

Adicionar Módulos Restantes

E adicione quantos módulos desejar para finalizar o desenho da seção.

Recrie o Exemplo # 3: Grade em colisão

Adicionar nova seção

Espaçamento

Vamos para o próximo e último exemplo! Adicione uma seção regular e abra as configurações. Vá para as configurações de espaçamento e adicione alguns valores de preenchimento personalizados:

• Preenchimento superior: 300 px
• Preenchimento inferior: 200 px

Adicionar linha # 1

Estrutura da Coluna

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

Adicionar Módulo de Imagem à Coluna

Carregar sobreposição de imagem moldada

Salve a seguinte sobreposição de imagem em forma na sua área de trabalho clicando com o botão direito:

Depois de salvar a sobreposição de imagem em forma, volte ao site Divi e adicione um Módulo de imagem à linha. Faça upload do arquivo de sobreposição de imagem em formato que você pode encontrar em sua pasta de download.

Fundo Gradiente

Em seguida, adicione um fundo gradiente ao módulo.

• Cor 1: # aa2bff
• Cor 2: # 09f7eb

Alinhamento

Altere o alinhamento da imagem também.

• Alinhamento de imagem: centro

Dimensionamento

E habilite a opção 'Forçar largura total' nas configurações de dimensionamento.

• Forçar largura total: Sim

Espaçamento

Adicione alguma margem personalizada ao módulo também.

• Margem esquerda: 200px
• Margem direita: 200px

Animação

Por último, adicione uma animação ao módulo.

• Estilo de Animação: Zoom
• Direção da Animação: Centro
• Duração da animação: 3000ms
• Intensidade de animação: 100%

Adicionar linha # 2

Estrutura da Coluna

Passe para a segunda fila. Use a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e faça algumas alterações nas configurações de dimensionamento.

• Usar largura personalizada: Sim
• Unidade: PX
• Largura personalizada: 944px
• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Adicionar Módulo Blurb à Coluna 1

Adicionar conteúdo

Continue adicionando um Módulo Blurb à primeira coluna. Insira algum conteúdo de sua escolha.

Ícone

Selecione um ícone a seguir.

Cor de fundo

E adicione uma cor de fundo ao módulo também.

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

Configurações de ícone

Vá para a guia de design e altere as configurações do ícone.

• Cor do ícone: # 000000
• Posicionamento do ícone: topo
• Use o tamanho da fonte do ícone: Sim
• Tamanho da fonte do ícone: 73 px

Configurações de texto do título

Modifique as configurações de texto do título também.

• Fonte do título: Open Sans
• Peso da fonte do título: Semi negrito
• Alinhamento do Texto do Título: Centro
• Tamanho do texto do título: 15px
• Espaçamento entre letras de título: -1px
• Altura da linha de título: 1.8em

Dimensionamento

E diminua a largura do conteúdo nas configurações de dimensionamento.

• Largura do conteúdo: 183px

Espaçamento

Vamos adicionar alguns preenchimentos personalizados na parte superior e inferior também.

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

Sombra da caixa

Continue dando ao Módulo Blurb uma sombra de caixa sutil.

• Força do desfoque de sombra da caixa: 80 px
• Cor da sombra: rgba (0,0,0,0.3)

Transições

E aumente a duração da transição na guia avançada.

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

Clone o módulo 8 vezes do Blurb e coloque 3 duplicatas em cada coluna restante

Agora, quando terminar de modificar o primeiro módulo do Blurb, você pode cloná-lo 8 vezes. Coloque três duplicatas na segunda coluna e três na terceira. Na próxima parte deste tutorial, faremos mudanças exclusivas em cada um dos Módulos do Blurb. Para isso, seguiremos a numeração abaixo:

Modifique o módulo nº 1 do Blurb

Espaçamento

Abra o primeiro módulo do Blurb e adicione alguma margem superior negativa.

• Margem superior: -340 px (desktop), 0 px (tablet e telefone)

Espaçamento de pairar

Altere os valores da margem ao passar o mouse.

• Margem superior: -380px
• Margem inferior: 40px
• Margem esquerda: -40px
• Margem direita: 40px

Cantos arredondados

Continue adicionando '30px' ao canto superior esquerdo do módulo.

Animação

E adicione uma animação.

• Estilo de animação: slide
• Direção da animação: esquerda
• Atraso de animação: 200ms

Modifique o Módulo 2 do Blurb

Cor de fundo

Abra o segundo módulo do Blurb e altere a cor de fundo.

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

Espaçamento

Continue adicionando alguma margem superior negativa ao módulo.

• Margem superior: -340 px (desktop), 0 px (tablet e telefone)

Espaçamento de pairar

Altere esses valores de margem ao passar o mouse.

• Margem superior: -380px
• Margem inferior: 40px

Animação

E adicione uma animação ao módulo.

• Estilo de animação: slide
• Direção da animação: esquerda
• Atraso de animação: 400 ms

Modificar Módulo # 3 do Blurb

Espaçamento

Vá para o terceiro módulo do Blurb. Adicione alguma margem superior negativa.

• Margem superior: -340 px (desktop), 0 px (tablet e telefone)

Espaçamento de pairar

Modifique os valores de margem ao passar o mouse.

• Margem superior: -380px
• Margem inferior: 40px
• Margem Esquerda: 40px
• Margem direita: -40px

Cantos arredondados

Adicione '30px' ao canto superior direito do módulo também.

Animação

E adicione uma animação.

• Estilo de animação: slide
• Direção da animação: esquerda
• Atraso de animação: 600 ms

Modificar Módulo # 4 do Blurb

Cor de fundo

Passe para o quarto módulo. Abra as configurações e altere a cor de fundo.

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

Espaçamento de pairar

Adicione alguns valores de margem de foco a seguir.

• Margem esquerda: -40px
• Margem direita: 40px

Animação

E adicione uma animação também.

• Estilo de animação: Fade
• Atraso de animação: 800ms

Modificar Módulo # 5 do Blurb

Animação

Para o quinto módulo. A única coisa que você precisa fazer aqui é adicionar uma animação.

• Estilo de animação: Fade
• Atraso de animação: 1000 ms

Modifique o Módulo # 6 do Blurb

Cor de fundo

Continue abrindo o sexto módulo e altere a cor de fundo.

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

Espaçamento de pairar

Altere os valores de espaçamento ao passar o mouse também.

• Margem Esquerda: 40px
• Margem direita: -40px

Animação

E adicione uma animação.

• Estilo de animação: Fade
• Atraso de animação: 1200 ms

Modificar Módulo # 7 do Blurb

Espaçamento de pairar

Passe para o sétimo módulo. Adicione alguns valores de margem flutuante às configurações de espaçamento.

• Margem superior: 40px
• Margem esquerda: -40px
• Margem direita: 40px

Cantos arredondados

Continue adicionando '30px' do raio da borda ao canto inferior esquerdo do módulo.

Animação

E adicione uma animação.

• Estilo de animação: slide
• Direção da animação: direita
• Atraso de animação: 1400ms

Modificar Módulo # 8 do Blurb

Cor de fundo

Continue abrindo o oitavo módulo e altere a cor de fundo.

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

Espaçamento de pairar

Adicione alguma margem personalizada ao passar o mouse para o próximo módulo.

• Margem superior: 40px

Animação

Adicione uma animação a este módulo do Blurb também.

• Estilo de animação: slide
• Direção da animação: direita
• Atraso de animação: 1600ms

Modificar Módulo # 9 do Blurb

Espaçamento de pairar

Vamos para o nono e último módulo! Vá para as configurações de espaçamento e adicione alguns valores de margem flutuante personalizados.

• Margem superior: 40px
• Margem Esquerda: 40px
• Margem direita: -40px

Cantos arredondados

Adicione '30px' do raio da borda ao canto inferior direito também.

Animação

E adicione uma animação.

• Estilo de animação: slide
• Direção da animação: direita
• Atraso de animação: 1800ms

Adicionar Margem Inferior Negativa ao Módulo de Imagem na Linha 1

Agora, para colidir o círculo que criamos na primeira parte deste exemplo e a grade, vamos dar ao Módulo de Imagem (contendo a sobreposição de imagem em forma) uma margem inferior negativa.

• Margem inferior: -520px

Antevisão

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

Exemplo # 1: Divisores em colisão

Exemplo # 2: Texto colidindo

Exemplo # 3: Grade em colisão

Flutuar

Pensamentos finais

Adicionar animações às suas páginas pode ajudar a criar mais interação entre os visitantes e você. Claro, você pode apenas usar as configurações de animação que possui no Visual Builder, mas também pode dar um passo adiante, aplicando animações em colisão aos elementos de design que o ajudarão a obter resultados impressionantes. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!