Como criar uma animação de envelope com efeitos de rolagem do Divi

Sempre que um novo recurso Divi é lançado, tentamos compartilhar alguns tutoriais interessantes e úteis que o ajudarão a pensar fora da caixa e a ser criativo com o Divi. O tutorial de hoje faz exatamente isso. Mostraremos como você pode criar uma animação de envelope responsiva com os efeitos de rolagem do Divi. Essa é uma ótima maneira de enfatizar um bloco de apelo à ação, por exemplo, mas também pode ser utilizado para outros fins. Você também poderá baixar o arquivo JSON gratuitamente!

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

Inscreva-se no nosso canal no Youtube

Baixe o Layout de Animação de Envelope GRATUITAMENTE

Para colocar as mãos no layout de animação de envelope gratuito, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.

Baixe os arquivos

Download de graça

Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.

DOWNLOAD

Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!

Recriar a Estrutura do Elemento

Adicionar nova seção ao meio ou fundo da página

Cor de fundo

Comece adicionando uma nova seção em algum lugar no meio ou na parte inferior de sua página. Abra as configurações da seção e mude a cor de fundo para branco.

• Cor de fundo: #FFFFFF

Espaçamento

Modifique as configurações de espaçamento a seguir.

• Preenchimento superior: 5vw
• Preenchimento inferior: 0 px

Transbordamentos

E esconder os estouros de seção.

• Excesso horizontal: oculto
• Estouro vertical: oculto

Adicionar linha # 1

Estrutura da Coluna

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

Cor de fundo

Sem adicionar nenhum módulo ainda, abra as configurações de linha e altere a cor de fundo.

• Cor de fundo: #FFFFFF

Dimensionamento

Em seguida, vá para a guia de design da linha e altere as configurações de dimensionamento da seguinte forma:

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Largura: 90%
• Largura máxima: 100%

Espaçamento

Em seguida, adicione alguns valores de preenchimento personalizados em diferentes tamanhos de tela.

• Preenchimento superior: 14vw (desktop), 11vw (tablet e telefone)
• Preenchimento inferior: 14vw (desktop), 11vw (tablet e telefone)
• Preenchimento esquerdo: 20vw (desktop), 10vw (tablet e telefone)
• Preenchimento direito: 20vw (desktop), 10vw (tablet e telefone)

Fronteira

Adicione algum raio de borda também.

• Todos os cantos: 20px

Sombra da caixa

Também estamos usando uma sombra de caixa sutil.

• Posição vertical da sombra da caixa: 38px
• Força do desfoque de sombra da caixa: 80 px
• Cor da sombra: rgba (0,0,0,0,08)

Índice Z

Conclua as configurações de linha aumentando o índice z na guia avançada.

• Índice Z: 11

Adicionar Módulo de Texto # 1 à Coluna

Adicionar conteúdo H2

É hora de adicionar módulos, começando com um primeiro Módulo de Texto. Insira algum conteúdo H2 de sua escolha.

Configurações de texto H2

Altere as configurações de texto H2 do módulo da seguinte forma:

• Fonte do título 2: Poppins
• Tamanho do texto do título 2: 2vw (desktop), 4vw (tablet), 5vw (telefone)

Adicionar Módulo de Texto # 2 à Coluna

Adicionar conteúdo

Adicione outro Módulo de Texto logo abaixo do anterior e insira algum conteúdo descritivo de sua escolha.

Configurações de texto

Vá para a guia de design do módulo e altere as configurações de texto.

• Fonte do texto: Open Sans
• Tamanho do texto: 1vw (desktop), 2vw (tablet), 3vw (telefone)
• Altura da linha de texto: 2.6em

Espaçamento

Adicione alguns valores personalizados superior e inferior em diferentes tamanhos de tela também.

• Preenchimento superior: 2vw (desktop), 4vw (tablet), 5vw (telefone)
• Preenchimento inferior: 2vw (desktop), 4vw (tablet), 5vw (telefone)

Adicionar Módulo de Botão à Coluna

Adicionar cópia

O próximo e último módulo que colocaremos nesta linha é um Módulo de Botão. Adicione alguma cópia de sua escolha.

Configurações de botão

Em seguida, defina o estilo do botão de acordo:

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão: 1vw (desktop), 2vw (tablet), 3vw (telefone)
• Cor do texto do botão: #ffffff
• Cor de fundo do botão: # 0f33ff
• Largura da borda do botão: 0 px

• Raio da borda do botão: 100 px
• Fonte do botão: Poppins

Espaçamento

E complete as configurações do módulo adicionando alguns valores de preenchimento personalizados em diferentes tamanhos de tela.

• Preenchimento superior: 1vw (desktop), 2vw (tablet), 3vw (telefone)
• Preenchimento inferior: 1vw (desktop), 2vw (tablet), 3vw (telefone)
• Preenchimento esquerdo: 2vw (desktop), 4vw (tablet), 6vw (telefone)
• Preenchimento direito: 2vw (desktop), 4vw (tablet), 6vw (telefone)

Adicionar linha # 2

Estrutura da Coluna

Agora que temos a linha de chamada à ação no lugar, é hora de começar a criar a forma do envelope. Para fazer isso, adicione uma nova linha usando a seguinte estrutura de coluna:

Dimensionamento

Permita que a linha ocupe toda a largura da seção, alterando as configurações de dimensionamento da seguinte forma:

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Largura: 100%
• Largura máxima: 100%

Espaçamento

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

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

Exibição

E para garantir que as colunas apareçam lado a lado em telas menores, adicionaremos uma linha de código CSS ao elemento principal da linha.

display: flex;

Adicionar Módulo de Imagem à Coluna 1

Deixe a caixa de imagem vazia

Adicione um Módulo de imagem à coluna 1 e deixe a caixa de imagem vazia.

Fundo Gradiente

Em vez disso, estamos usando um fundo gradiente.

• Cor 1: rgba (255,255,255,0)
• Cor 2: # e8e8e8
• Tipo de gradiente: Linear
• Direção do gradiente: 150deg
• Posição inicial: 50%
• Posição final: 50%

Espaçamento

Altere os valores de preenchimento do módulo de acordo:

• Acolchoamento superior: 15vw
• Preenchimento inferior: 15vw

Clone o módulo de imagem na coluna 1 e coloque a duplicata na coluna 2

Depois de concluir o Módulo de imagem na coluna 1, você pode clonar o módulo inteiro e colocar a duplicata na coluna 2.

Alterar fundo gradiente

Altere o fundo gradiente da seguinte forma:

• Cor 1: rgba (255,255,255,0)
• Cor 2: #efefef
• Tipo de gradiente: Linear
• Direção do gradiente: 210deg
• Posição inicial: 50%
• Posição final: 50%

Adicionar linha # 3

Estrutura da Coluna

Para criar a parte inferior do envelope, precisaremos de outra linha com a seguinte estrutura de coluna:

Dimensionamento

Abra as configurações de linha e altere as configurações de dimensionamento da seguinte forma:

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Largura: 100%
• Largura máxima: 100%

Espaçamento

Em seguida, remova todo o preenchimento padrão superior e inferior.

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

Exibição

E permita que ambas as colunas apareçam lado a lado adicionando uma única linha de código CSS ao elemento principal da linha.

display: flex;

Índice Z

Conclua as configurações de linha aumentando o índice z na guia avançada.

• Índice Z: 12

Adicionar Módulo de Imagem à Coluna 1

Deixe a caixa de imagem vazia

Adicione um Módulo de imagem à coluna 1 e, novamente, deixe a caixa de imagem vazia.

Fundo Gradiente

Em vez disso, use um fundo gradiente.

• Cor 1: rgba (255,255,255,0)
• Cor 2: #efefef
• Tipo de gradiente: Linear
• Direção do gradiente: 213 graus
• Posição inicial: 40%
• Posição final: 40%

Espaçamento

E aumente o tamanho do módulo adicionando um pouco de preenchimento superior e inferior.

• Enchimento superior: 20vw
• Preenchimento inferior: 20vw

Clone o módulo de imagem na coluna 1 e coloque a duplicata na coluna 2

Depois de concluir o Módulo de imagem na coluna 1, você pode cloná-lo e colocar a duplicata na coluna 2.

Alterar fundo gradiente

Certifique-se de alterar o fundo gradiente da duplicata.

• Cor 1: rgba (255,255,255,0)
• Cor 2: # e8e8e8
• Tipo de gradiente: Linear
• Direção do gradiente: 147 graus
• Posição inicial: 40%
• Posição final: 40%

Adicionar movimento vertical à linha 1

Agora, a última parte para fazer a animação do envelope funcionar é adicionar um efeito de rolagem de movimento vertical responsivo à primeira linha em sua seção e pronto!

• Habilitar movimento vertical: Sim
• Compensação inicial:
  • Desktop: 0 (em 68%)
  • Comprimido: 0,5 (a 61%)
  • Telefone: 0,5 (em 43%)
• Offset médio:
  • Desktop: 6,5 (em 81%)
  • Tablet e telefone: 21,5 (em 82%)
• Compensação final:
  • Desktop: 16 (em 95%)
  • Tablet e telefone: 21,5 (em 82%)

Antevisão

Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Pensamentos finais

Neste post, mostramos como ser criativo com os efeitos de rolagem do Divi. Mais especificamente, mostramos como montar uma animação de envelope. Você pode usar essa animação para muitos tipos de coisas, para destacar seu bloco de CTA, por exemplo. Você também conseguiu baixar o arquivo JSON gratuitamente! Se você tiver dúvidas ou sugestões, fique à vontade para deixar um comentário na seção de comentários abaixo.

Se você está ansioso para aprender mais sobre o Divi e obter mais brindes do Divi, certifique-se de assinar nosso boletim informativo por e-mail e canal no YouTube para que você sempre seja uma das primeiras pessoas a saber e obter os benefícios desse conteúdo gratuito.