Como combinar a cópia na rolagem com as configurações de posição e efeitos de rolagem da Divi
Publicados: 2021-09-08A maneira como você usa criativamente os recursos integrados do Divi pode fazer a diferença no design de sua página. Os efeitos de rolagem do Divi, por exemplo, permitem que você crie belas interações na rolagem. Hoje, estamos adicionando outro tutorial à sua lista de coisas que você pode fazer com os efeitos de rolagem integrados do Divi. Mais especificamente, mostraremos como combinar a cópia na rolagem. À primeira vista, a cópia é colocada abaixo da imagem que a acompanha. No entanto, assim que você rolar para um determinado ponto, a cópia aparecerá no topo da imagem do produto e começará a se mesclar com a imagem. Isso leva a um efeito atraente que parece fácil. Você também poderá baixar o arquivo JSON de layout 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
Baixe o layout GRATUITAMENTE
Para colocar suas mãos no layout gratuito, 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.
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.
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!
Vamos começar a recriar!
Adicionar duas seções de espaço reservado
Adicionar nova seção
Comece adicionando uma seção de espaço reservado à página em que você está trabalhando.
Dimensionamento
Abra as configurações de seção e altere a altura nas configurações de dimensionamento.
- Altura: 50vh
Seção Clone
Clone a seção uma vez. Isso deixa você com duas seções de espaço reservado em sua página. Essas seções de espaço reservado irão ajudá-lo a ver o efeito final depois de passar pelo tutorial. Em um site ativo, as seções de espaço reservado serão substituídas por seções normais que você usa em toda a página.
Adicionar nova seção entre seções de espaço reservado
Depois que as seções de espaço reservado estiverem no lugar, adicione uma nova seção entre as seções de espaço reservado.
Cor de fundo
Abra as configurações da seção e use uma cor de fundo branca.
- Cor de fundo: #ffffff
Espaçamento
Vá para a guia de design da seção e modifique os valores de preenchimento superior e inferior de acordo:
- Enchimento superior: 10vh
- Preenchimento inferior: 10vh
Adicionar linha # 1
Estrutura da Coluna
Continue adicionando uma nova linha à seção usando a seguinte estrutura de coluna:
Dimensionamento
Sem adicionar módulos ainda, abra as configurações de linha, vá para as configurações de dimensionamento e modifique os valores de largura e largura máxima.
- Largura: 100%
- Largura máxima: 100%
Adicionar Módulo de Texto à Coluna
Adicionar cópia
O único módulo de que precisamos para esta linha é um Módulo de Texto. Adicione alguma cópia de sua escolha.
Configurações de texto
Vá para a guia de design do módulo e altere as configurações de texto de acordo:
- Fonte do texto: Montserrat
- Peso da fonte do texto: ultra negrito
- Estilo da fonte do texto: maiúsculas
- Cor do texto: # fff2ea
- Tamanho do texto: 11vw
- Altura da linha de texto: 1em
- Alinhamento de Texto: Centro
Adicionar linha # 2
Estrutura da Coluna
Adicione outra linha à seção usando a seguinte estrutura de coluna:
Dimensionamento
Sem adicionar módulos ainda, 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: 2
- Largura: 90%
- Alinhamento de linha: centro
Adicionar Módulo de Imagem à Coluna
Enviar Imagem
Adicione um Módulo de imagem à coluna da linha. Faça upload de uma imagem de sua escolha.
Alinhamento
Vá para a guia de design do módulo e altere o alinhamento da imagem de acordo:
- Alinhamento de imagem: centro
Dimensionamento
Em seguida, vá para as configurações de dimensionamento e force a largura total no módulo.
- Forçar largura total: Sim
Adicionar Módulo de Botão à Coluna
Adicionar cópia
O próximo e último módulo que adicionaremos à coluna é um Módulo de botão. Use alguma cópia de sua escolha.
Alinhamento de Botão
Vá para a guia de design e altere o alinhamento do botão.
- 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: 16 px
- Cor do texto do botão: # 000000
- Cor de fundo do botão: #ffffff
- Largura da borda do botão: 0 px
- Espaçamento entre letras dos botões: 2 px
- Fonte do botão: Montserrat
- Peso da fonte do botão: negrito
- Estilo da fonte do botão: maiúscula
Espaçamento
Use alguns valores de preenchimento personalizados nas configurações de espaçamento também.
- Enchimento superior: 20 px
- Preenchimento inferior: 20 px
- Preenchimento esquerdo: 5%
- Preenchimento direito: 5%
Adicionar Posicionamento Absoluto à Linha 1
Depois de completar a segunda linha, navegue de volta para a linha # 1. Abra as configurações da linha, vá para a guia avançado e torne a seção absoluta. Ao fazer isso, a linha e o Módulo de Texto dentro dela serão colocados abaixo da linha que contém o Módulo de Imagem.
- Posição: Absoluta
- Localização: Centro
Clone a linha 1 e coloque a duplicata abaixo da linha 2
Para permitir que o Módulo de Texto apareça no topo da imagem, precisaremos de outra linha com um valor de índice z maior. Clone a primeira linha e coloque a duplicata abaixo da segunda linha.
Aplicar efeitos à linha # 3
Aumentar o índice Z
Abra a linha duplicada e altere o índice z na guia avançada.
- Índice Z: 12
Mudar a cor do texto
Abra o Módulo de Texto na linha e altere a cor do texto.
- Cor do texto: # 1e1e1e
Aplicar modo de mesclagem à linha
Em seguida, abra as configurações de linha e altere o modo de mesclagem nas configurações de filtros.
- Modo de mistura: Sobreposição
Use efeito de rolagem no módulo de texto na linha # 3
Adicionar Efeito Fading In & Out
Conclua o tutorial abrindo o Módulo de Texto novamente, indo para os efeitos de rolagem e habilitando o efeito de aparecimento e desaparecimento gradual. É isso!
- Habilitar Fading In e Out: Sim
- Opacidade inicial: 0%
- Opacidade média: 0% (em 26%)
- Opacidade final: 100% (a 28%)
- Gatilho de efeito de movimento: meio do elemento
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
Nesta postagem, mostramos como ser criativo com os efeitos de rolagem integrados do Divi. Mais especificamente, mostramos como misturar cópia na rolagem. A princípio, a cópia parece estar abaixo da imagem. Depois de rolar, a cópia se revela acima da imagem e se mistura com a imagem. 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.