3 efeitos de movimento de rolagem sem esforço que você pode adicionar às suas manchetes com Divi

Os novos efeitos de rolagem do Divi trazem toneladas de novas possibilidades de design para as páginas que você constrói. Você pode adicionar um efeito de rolagem personalizado a cada contêiner e sincronizar os efeitos de acordo. Essa liberdade de design ajuda você a destacar determinado conteúdo de maneira elegante. Neste tutorial, mostraremos como adicionar efeitos de movimento de rolagem às manchetes. Dessa forma, você pode colocar uma ênfase extra nas manchetes e manter os visitantes envolvidos. Você também poderá baixar os arquivos JSON gratuitamente!

Vamos lá.

Antevisão

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

Exemplo 1

Área de Trabalho

Móvel

Exemplo # 2

Área de Trabalho

Móvel

Exemplo # 3

Área de Trabalho

Móvel

Baixe os layouts de seção de efeitos de movimento de rolagem GRATUITAMENTE

Para colocar suas mãos nos layouts de seção gratuitos, primeiro você precisa baixá-los 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!

1. Crie o design da seção do seu herói em uma página nova ou existente

Adicionar nova seção

Cor de fundo

Comece adicionando uma nova seção à página em que está trabalhando. Abra as configurações da seção e mude a cor de fundo para branco.

• Cor de fundo: #FFFFFF

Espaçamento

Vá para a guia de design e modifique os valores de espaçamento também.

• Preenchimento superior: 15vw (desktop), 20vw (tablet), 25vw (telefone)
• Preenchimento inferior: 0vw

Transbordamentos

E para garantir que os efeitos de rolagem não façam com que nenhuma barra de rolagem horizontal apareça, também ocultaremos os estouros da 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:

Dimensionamento

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

• Largura: 90%
• 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

Adicionar Módulo de Texto # 1 à Coluna

Adicionar conteúdo H1

O único módulo de que precisamos nesta linha é um Módulo de Texto com algum conteúdo H1.

Configurações de texto H1

Altere as configurações de texto H1 do módulo de acordo:

• Fonte do título: Playfair Display
• Peso da fonte do cabeçalho: negrito
• Alinhamento do Texto do Título: Centro
• Cor do texto do título: # 000000
• Tamanho do texto do título: 6vw

Adicionar linha # 2

Estrutura da Coluna

Em seguida, adicione outra linha usando a seguinte estrutura de coluna:

Fundo Gradiente

Sem adicionar nenhum módulo ainda, abra as configurações de linha e use um fundo gradiente.

• Cor 1: # 444444
• Cor 2: # 000000
• Tipo de gradiente: Linear
• Direção do gradiente: 237 graus

Dimensionamento

Modifique também as configurações de dimensionamento da linha.

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

Espaçamento

Em seguida, adicione algum preenchimento personalizado superior e inferior.

• Enchimento superior: 0vw
• Preenchimento inferior: 10vw (desktop), 15vw (tablet), 20vw (telefone)

Adicionar Módulo de Texto # 2 à Coluna

Adicionar conteúdo

O primeiro módulo de que precisamos nesta linha é um Módulo de Texto com algum conteúdo.

Configurações de texto

Vá para a guia de design do módulo e altere as configurações de texto da seguinte forma:

• Fonte do texto: Playfair Display
• Cor do texto: #dddddd
• Tamanho do texto: 6vw
• Altura da linha de texto: 1em
• Força do borrão da sombra do texto: 0,29em
• Cor da sombra do texto: #ffffff
• Alinhamento de Texto: Centro

Adicionar Módulo de Texto # 3 à Coluna

Adicionar conteúdo

Em seguida, adicione outro Módulo de Texto com algum conteúdo de descrição de sua escolha.

Configurações de texto

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

• Fonte do texto: Open Sans
• Cor do texto: # e8e8e8
• Tamanho do texto: 0,9vw (desktop), 2vw (tablet), 2,5vw (telefone)
• Altura da linha de texto: 2em
• Alinhamento de Texto: Centro

Dimensionamento

Modifique as configurações de dimensionamento também.

• Largura: 40% (desktop), 90% (tablet e telefone)
• Alinhamento do Módulo: Centro

Espaçamento

E inclua algumas margens superior e inferior em diferentes tamanhos de tela.

• Margem superior: 10vw (desktop), 15vw (tablet), 20vw (telefone)
• Margem inferior: 3vw (desktop), 8vw (tablet), 13vw (telefone)

Adicionar Módulo de Botão à Coluna

Adicionar cópia

O próximo e último módulo de que precisamos é um Módulo de botão. Adicione alguma cópia de sua escolha.

Alinhamento

Continue alterando o alinhamento do botão na guia de design.

• Alinhamento do botão: Centro

Configurações de botão

Em seguida, defina o estilo do botão da seguinte maneira:

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão: 0,8 vw (área de trabalho), 1,5 vw (tablet), 2,5 vw (telefone)
• Cor do texto do botão: #ffffff
• Cor da borda do botão: #ffffff
• Raio da borda do botão: 1px
• Fonte do botão: Open Sans
• Peso da fonte do botão: negrito
• Estilo da fonte do botão: maiúscula

Espaçamento

E inclua 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: 2,5vw (desktop), 5vw (tablet), 8vw (telefone)
• Preenchimento direito: 2,5vw (desktop), 5vw (tablet), 8vw (telefone)

2. Aplicar efeitos de rolagem

Exemplo 1

Módulo de Texto # 1

Movimento Horizontal

Agora que projetamos a aparência geral de nossa seção de herói, é hora de aplicar os diferentes efeitos de movimento de rolagem à nossa cópia. Para recriar o primeiro exemplo, abra o primeiro Módulo de Texto e use o seguinte movimento horizontal:

• Habilitar Movimento Horizontal: Sim
• Compensação inicial: 0
• Deslocamento médio: 0
  • 0% - 80% (desktop)
  • 0% - 95% (tablet e telefone)
• Compensação final: -10

Fade In e Out

Vamos adicionar um efeito de fade in e out também.

• Habilitar Fading In e Out: Sim
• Opacidade inicial: 100%
• Opacidade média: 100%
  • 0% - 70% (desktop)
  • 0% - 95% (tablet e telefone)
• Opacidade final: 0%

Módulo de Texto # 2

Movimento Horizontal

Em seguida, abra o segundo Módulo de Texto em sua seção e aplique o seguinte movimento horizontal:

• Habilitar Movimento Horizontal: Sim
• Compensação inicial: 10
• Deslocamento médio: 0
  • 10% - 70% (desktop)
  • 10% - 95% (tablet e telefone)
• Compensação final: 10

Fade In e Out

Junto com um efeito fade in e out correspondente:

• Habilitar Fading In e Out: Sim
• Opacidade inicial: 0%
• Opacidade média: 100%
  • 35% - 60% (desktop)
  • 35% - 95% (tablet e telefone)
• Opacidade final: 0%

Exemplo # 2

Módulo de Texto # 1

Movimento Vertical

Quer recriar o segundo efeito de movimento de rolagem em vez disso? Abra o primeiro Módulo de Texto em sua seção e adicione o seguinte movimento vertical:

• Habilitar movimento vertical: Sim
• Compensação inicial: 0
• Deslocamento médio: 0
  • 90% (desktop)
  • 95% (tablet e telefone)
• Compensação final: -8

Aumentando e Diminuindo

Adicione um efeito de aumento e redução também.

• Habilitar aumento e redução: Sim
• Escala inicial: 20%
• Escala média: 100%
  • 20% - 80% (desktop)
  • 20% - 95% (tablet e telefone)
• Escala Final: 20%

Módulo de Texto # 2

Movimento Vertical

Em seguida, abra o segundo Módulo de Texto e use as seguintes configurações de movimento vertical:

• Habilitar movimento vertical: Sim
• Compensação inicial: 0
• Deslocamento médio: 0
  • 15% - 70% (desktop)
  • 15% - 90% (tablet e telefone)
• Compensação final: -8

Aumentando e Diminuindo

Adicione um efeito de aumento e redução a seguir.

• Habilitar aumento e redução de escala: Sim
• Escala inicial: 0%
• Escala média: 100%
  • 30% - 70% (desktop)
  • 30% - 90% (tablet e telefone)
• Escala Final: 100%

Borrão

E complete o efeito de rolagem adicionando um efeito de desfoque ao segundo Módulo de Texto da sua seção.

• Habilitar desfoque: Sim
• Desfoque inicial: 10px
• Desfoque médio: 0 px
  • 40% - 73% (desktop)
  • 40% - 95% (tablet e telefone)
• Desfoque final: 100px

Exemplo # 3

Módulo de Texto # 1

Movimento Horizontal

Por último, mas não menos importante, mostraremos como recriar o terceiro efeito de movimento de rolagem. Abra o primeiro Módulo de Texto da seção e adicione um efeito de movimento horizontal.

• Habilitar Movimento Horizontal: Sim
• Compensação inicial: 0
• Deslocamento médio: 0
  • 0% - 90%
• Compensação final: 10

Fade In e Out

Use um efeito fade in e out para este módulo também.

• Habilitar Fading In e Out: Sim
• Opacidade inicial: 100%
• Opacidade média: 100%
  • 0% - 90% (desktop)
  • 0% - 95% (tablet e telefone)
• Opacidade final: 0%

Rotativo

E também aplicaremos um efeito de rotação.

• Habilitar Rotação: Sim
• Rotação inicial: 0 °
• Rotação média: 0 °
  • 0% - 90% (desktop)
  • 0% - 95% (tablet e telefone)
• Rotação final: 90 °

Módulo de Texto # 2

Movimento Horizontal

Em seguida, abra o segundo Módulo de Texto em sua seção e aplique as seguintes configurações de movimento horizontal:

• Habilitar Movimento Horizontal: Sim
• Compensação inicial: 0
• Deslocamento médio: 0
  • 0% - 90%
• Compensação final: -10

Fade In e Out

Continue usando um efeito de movimento de rolagem fade in e out.

• Habilitar Fading In e Out: Sim
• Opacidade inicial: 100%
• Opacidade média: 100%
  • 0% - 80% (desktop)
  • 0% - 95% (tablet e telefone)
• Opacidade final: 0%

Rotativo

E complete as configurações do módulo adicionando um efeito de rolagem giratória também.

• Habilitar Rotação: Sim
• Rotação inicial: 0 °
• Rotação média: 0 °
  • 0% - 80% (desktop)
  • 0% - 90% (tablet e telefone)
• Rotação final: -90 °

Antevisão

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

Exemplo 1

Área de Trabalho

Móvel

Exemplo # 2

Área de Trabalho

Móvel

Exemplo # 3

Área de Trabalho

Móvel

Pensamentos finais

Nesta postagem, mostramos como usar os novos efeitos de rolagem do Divi para adicionar efeitos de movimento de rolagem ao título. Lidamos com três exemplos diferentes, mas as possibilidades são realmente infinitas. Você também pode baixar os arquivos 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.