Como criar animações sobrepostas em atraso com Divi

Uma grande parte do sucesso do seu site depende de você ser capaz de impressionar os visitantes ou não. Não apenas com seus produtos ou serviços, mas também com a maneira como você se comunica e como seu site é bem projetado. Porque vamos enfrentá-lo, os sites costumam ser as primeiras impressões. E, como acontece com qualquer outro tipo de primeira impressão, você quer deixar um bom gosto na boca.

Agora, se você está procurando uma maneira única de colocar parte do seu conteúdo em destaque, criar animações sutis sobrepostas pode ser exatamente o que você está procurando. Essas animações sobrepostas sutis são como uma espécie de apresentação de slides para seus visitantes. Eles não precisam rolar ou clicar em nada, o conteúdo apenas aparece de uma forma elegante.

Vamos lá!

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Abordagem

• Começaremos adicionando todos os elementos de design de que precisamos em uma ordem vertical, sem a sobreposição
• Como estamos adicionando todos os elementos de design, também adicionaremos animações personalizadas com um certo atraso de animação
• Esses atrasos na animação só farão sentido depois que você passar pela última parte do tutorial, que foca nas sobreposições
• Uma parte importante deste tutorial é usar Módulos Divisores em forma com a mesma cor de fundo da seção para fazer o conteúdo da linha 'desaparecer' com atraso
• Você pode aplicar esta técnica a qualquer tipo de design em que estiver trabalhando, uma vez que você compreenda as diferentes etapas necessárias para fazer a abordagem funcionar

Vamos começar a criar!

Adicionar nova seção

Cor de fundo

Comece criando uma nova página ou abrindo uma existente e adicione uma seção regular a ela. Abra as configurações da seção e adicione um plano de fundo.

• Cor de fundo: # f3f3ec

Adicionar linha # 1

Estrutura da Coluna

Continue adicionando uma nova linha à sua seção usando a seguinte estrutura de colunas:

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e permita que a linha ocupe toda a largura da tela. O motivo pelo qual estamos fazendo isso é nos livrar de todo o espaçamento padrão entre pixels. Nas próximas etapas, adicionaremos todo o espaço de que precisamos usando uma unidade de janela de visualização.

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

Adicionar Módulo de Texto à Coluna

Adicionar conteúdo H2

Vamos começar a adicionar módulos! O primeiro módulo de que precisamos é um Módulo de Texto com algum conteúdo H2. Lembre-se de que este módulo irá 'desaparecer' após alguns segundos, então você deseja mantê-lo curto, relevante e fácil de lembrar.

Configurações de texto H2

Em seguida, vá para a guia de design e modifique as configurações de texto H2.

• Fonte do título 2: Poppins
• Cor do texto do título 2: # 333333
• Tamanho do texto do título 2: 5vw

Espaçamento

Crie o espaço desejado usando algum preenchimento esquerdo e direito nas configurações de espaçamento.

• Preenchimento esquerdo: 15vw
• Preenchimento direito: 39vw

Adicionar Módulo Divisor à Coluna

Visibilidade

Passe para o próximo módulo, que é um Módulo Divisor. Estamos usando este módulo para fazer o Módulo de Texto 'desaparecer'. Precisamos de quatro coisas para isso; uma cor de fundo (que está na mesma cor da seção, então você não pode notar), preenchimento suficiente (para se certificar de que você pode sobrepor todo o conteúdo do módulo anterior), uma sobreposição vertical (para cobrir todo o módulo área), e um retardo de animação (para dar ao primeiro módulo tempo para brilhar antes de assumir). Depois de adicionar o Módulo Divisor, certifique-se de desabilitar a opção 'Mostrar Divisor'.

• Mostrar divisor: Não

Cor de fundo

Em seguida, vá para as configurações de fundo e adicione uma cor de fundo. Certifique-se de usar a mesma cor de fundo da seção para criar um efeito suave.

• Cor de fundo: # f3f3ec

Espaçamento

Continue dando ao módulo divisor um tamanho maior, adicionando algum preenchimento superior e inferior nas configurações de espaçamento.

• Enchimento superior: 9vw
• Preenchimento inferior: 9vw

Animação

E complete as configurações do divisor adicionando uma animação atrasada.

• Estilo de animação: slide
• Direção da animação: para cima
• Duração da animação: 1200 ms
• Atraso de animação: 1500ms
• Intensidade de animação: 50%
• Opacidade inicial da animação: 50%

Adicionar linha # 2

Estrutura da Coluna

Para a segunda fila! Selecione a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e permita que a linha ocupe toda a largura da tela.

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

Espaçamento

Em seguida, adicione um pouco de preenchimento ao lado esquerdo e direito da linha nas configurações de espaçamento.

• Preenchimento esquerdo: 10vw (desktop), 2vw (tablet e telefone)
• Preenchimento direito: 10vw (desktop), 2vw (tablet e telefone)

Exibição

Também estamos garantindo que as colunas apareçam lado a lado em tamanhos de tela menores, adicionando uma única linha de código CSS ao elemento principal da linha.

display: flex;

Adicionar Módulo Blurb à Coluna 1

Adicionar conteúdo

É hora de começar a adicionar módulos! Adicione um Módulo Blurb à coluna 1 e insira algum conteúdo de sua escolha.

Selecione o ícone

Continue selecionando um ícone de sua escolha.

Configurações de ícone

Modifique a aparência do seu ícone a seguir.

• Cor do ícone: # dbd6bd
• Ícone de círculo: Sim
• Ícone de círculo: #ffffff
• Posicionamento de imagem / ícone: topo
• Use o tamanho da fonte do ícone: Sim
• Tamanho da fonte do ícone: 2,5vw (desktop), 1,7vw (tablet), 1,9vw (telefone)

Configurações de texto do título

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

• Fonte do título: Fonte Serif Pro
• Alinhamento do Texto do Título: Centro
• Tamanho do texto do título: 1.7vw (desktop), 2.1vw (tablet), 2.5vw (telefone)
• Altura da linha do título: 1,9em

Configurações do corpo do texto

Junto com as configurações do corpo do texto.

• Fonte do corpo: Open Sans
• Alinhamento do corpo do texto: centro
• Tamanho do corpo do texto: 0.8vw (desktop), 1.2vw (tablet), 1.6vw (telefone)
• Altura da linha corporal: 2,5em

Dimensionamento

Estamos reduzindo um pouco o tamanho do módulo para garantir que haja espaço suficiente entre este módulo e os módulos que adicionaremos à segunda e terceira colunas.

• Largura: 91,7%
• Alinhamento do Módulo: Centro

Espaçamento

Também adicionaremos algum espaço extra ao módulo usando valores de preenchimento personalizados.

• Preenchimento superior: 2vw
• Preenchimento inferior: 2vw
• Preenchimento esquerdo: 1vw
• Preenchimento direito: 1vw

Fronteira

Em seguida, vá para as configurações de borda e adicione uma borda sutil para definir o módulo.

• Largura da borda: 1px
• Cor da borda: # 333333

Animação

Conclua o design do Módulo Blurb adicionando uma animação atrasada. Como você pode notar, quanto mais elementos de design adicionarmos, maior será o atraso da animação.

• Estilo de animação: slide
• Repetição de animação: uma vez
• Direção da animação: para cima
• Duração da animação: 1000ms
• Atraso de animação: 2.000 ms
• Intensidade de animação: 16%
• Opacidade inicial da animação: 0%

Clone o módulo do Blurb duas vezes e coloque duplicatas nas colunas restantes

Depois de concluir o design do módulo Blurb, você pode cloná-lo duas vezes. Coloque as duplicatas nas duas colunas restantes da linha.

Alterar animação da duplicata # 1

Altere o atraso da animação da primeira duplicata.

• Atraso de animação: 2200ms

Alterar animação da duplicata # 2

Em seguida, abra a segunda duplicata e altere o atraso da animação lá também.

• Atraso de animação: 2400ms

Adicionar Módulo Divisor à Coluna 3

Visibilidade

O próximo e último módulo de que precisamos nesta linha é um Módulo Divisor. Estamos, novamente, usando este módulo para criar a sobreposição atrasada que ajudará a fazer os módulos Blurb 'desaparecerem'. Depois de adicionar o Módulo Divisor à coluna 3, certifique-se de que a opção 'Mostrar Divisor' esteja desabilitada.

• Mostrar divisor: Não

Cor de fundo

Continue adicionando uma cor de fundo ao divisor. Certifique-se de usar a mesma cor do plano de fundo da seção.

• Cor de fundo: # f3f3ec

Espaçamento

Em seguida, iremos para as configurações de espaçamento e aumentaremos o tamanho do módulo divisor para que ele possa, posteriormente nesta postagem, sobrepor todos os três módulos do Blurb.

• Margem esquerda: -60vw (desktop), -64vw (tablet e telefone)
• Preenchimento superior: 17vw (desktop), 27vw (tablet), 30vw (telefone)
• Preenchimento inferior: 17vw (desktop), 27vw (tablet), 34vw (telefone)

Animação

Por último, mas não menos importante, adicione uma animação atrasada.

• Estilo de animação: slide
• Repetição de animação: uma vez
• Direção da animação: direita
• Duração da animação: 650ms
• Atraso de animação: 4500ms
• Intensidade de animação: 24%
• Opacidade inicial da animação: 0%

Clone Row # 2

Depois de concluir a segunda linha e todos os seus módulos, você pode prosseguir e cloná-lo.

Remover Módulo Divisor em Nova Linha

Remova o Módulo Divisor da linha duplicada.

Alterar o atraso de animação do Módulo Blurb nº 1

Em seguida, abra o primeiro Módulo do Blurb e altere o atraso da animação.

• Atraso de animação: 5200ms

Alterar o atraso de animação do módulo # 2 do Blurb

Faça o mesmo para o Módulo Blurb na coluna 2.

• Atraso de animação: 5400ms

Alterar o atraso de animação do Módulo Blurb nº 3

E modifique o atraso da animação para o Módulo Blurb na coluna 3 também.

• Atraso de animação: 5600ms

Adicionar sobreposições

Adicionar Sobreposição ao Módulo Divisor # 1

Agora que temos todos os elementos de design de que precisamos, podemos começar a criar as sobreposições! Essas sobreposições darão significado aos atrasos de animação que adicionamos ao longo do tutorial. Comece com o Módulo Divisor na primeira linha que você criou.

• Margem superior: -15vw

Adicionar sobreposição à linha 2

Em seguida, abra a segunda linha e adicione uma margem superior negativa a ela.

• Margem superior: -10vw

Adicionar sobreposição aos módulos do Blurb na linha 2

Abra cada um dos módulos do Blurb na segunda linha e adicione alguns valores de margem personalizados a eles.

• Margem superior: -10vw
• Margem inferior: 7vw

Adicionar Sobreposição ao Módulo Divisor # 2

Passe para o Módulo Divisor que você pode encontrar na terceira coluna da segunda linha e crie a sobreposição.

• Margem superior: -35vw (desktop), -47vw (tablet), -72vw (telefone)

Adicionar sobreposição à linha 3

Continue abrindo as configurações da terceira linha e adicione alguma margem superior negativa.

• Margem superior: -10vw

Adicionar sobreposição aos módulos do Blurb na linha 3

Por último, mas não menos importante, adicione alguns valores de margem personalizados a cada um dos Módulos Blurb na terceira linha. Depois de sair do Visual Builder, você poderá ver a animação acontecendo em tempo real!

• Margem superior: -22vw (desktop), -46vw (tablet), -70vw (telefone)
• Margem inferior: 7vw

Pensamentos finais

Nesta postagem, mostramos como criar animações sutis sobrepostas. Essa é uma ótima maneira de guiar os visitantes através do conteúdo que você está compartilhando e de dar ao seu site uma aparência elevada. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!