Como criar texto e imagens que mudam na rolagem no Divi

Os efeitos de rolagem Divi são ótimos para criar layouts interessantes. Publicamos alguns desde o lançamento do recurso. Neste tutorial, mostraremos como criar um layout com texto e imagens que mudam na rolagem. Este design pode ser usado para uma página de serviços ou qualquer tipo de página de que você precisa. Nós o mantivemos limpo e simples para que o efeito de rolagem ganhasse os holofotes.

Você pode baixar o layout como um arquivo JSON ou recriá-lo em seu próprio site Divi.

Vamos começar.

Antevisão

Antes de começar, vamos dar uma olhada no layout em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Baixe o texto e as imagens que mudam na seção de rolagem GRATUITAMENTE

Para colocar as mãos na seção gratuita com texto e imagens que mudam na rolagem, 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!

Recrie a seção com texto e imagens que mudam na rolagem

Adicionar nova seção

Fundo

Para começar a recriar o design, adicione uma nova seção em uma página nova ou existente. Adicione as imagens de fundo que fornecemos no download acima.

• Imagem de fundo: desenho de caixa e pontos
  • Desktop: Imagem 1
  • Tablet: Imagem 2
  • Telefone: Imagem 3
• Tamanho da imagem: capa
• Repetição da imagem de fundo: repetir Y (vertical)

Espaçamento

Adicione algum espaçamento à seção.

• Preenchimento superior e inferior: 30%

Visibilidade

Oculte também os transbordamentos.

• Excesso horizontal e vertical: oculto

Adicionar nova linha

Visibilidade

Agora adicione uma primeira linha e ajuste as configurações de visibilidade na guia avançada.

• Horizontal: Oculto
• Estouro vertical: padrão

Adicionar Módulo de Texto

Texto

Adicione um primeiro módulo de texto para o título. Insira algum conteúdo H1 de sua escolha.

• Corpo: Conteúdo H1 - Equipe de Produção

Texto do Título

Vá para a guia de design e estilize o texto do título.

• Nível de direção: H1
• Fonte: Fredoke One
• Peso: Negrito
• Cor preta
• Tamanho
  • Desktop: 100px
  • Tablet: 75 px
  • Telefone: 33px
• Espaçamento entre Letras
  • Desktop: 4px
  • Tablet: 3px
  • Telefone: 2px

Dimensionamento

Em seguida, ajuste a largura.

• Largura: 100%

Adicionar nova linha

Dimensionamento

Agora adicione uma segunda linha e ajuste as configurações de dimensionamento de acordo:

• Largura: 80%
• Largura máxima: 1000px

Visibilidade

Oculte também os transbordamentos.

• Estouros horizontais e verticais: ocultos

Adicionar 1º Módulo de Texto

Texto

Adicione outro módulo de texto. Desta vez, insira algum conteúdo H2 de sua escolha.

• Corpo: H2 Content - Set Photography

Texto do Título

Defina o estilo do título a seguir.

• Nível de direção: H2
• Peso: Negrito
• Estilo: TT
• Cor: Preto # 000000
• Tamanho
  • Desktop: 50px
  • Tablet: 40px
  • Telefone: 28px
• Espaçamento entre letras: 3px

Espaçamento

Defina algum espaçamento para o módulo também.

• Margem superior e inferior: 0 px

Efeitos de rolagem

Conclua as configurações do módulo adicionando os seguintes efeitos de rolagem:

• Fading In e Out: Habilitar
• Viewport Bottom
  • Posição: 42%
  • Opacidade inicial: 0%
• Opacidade média
  • Posição inferior: 43%
  • Posição superior: 53%
  • Opacidade média: 100%
• Topo da janela de visualização
  • Posição: 54%
  • Opacidade final: 0%

Módulo de texto duplicado duas vezes

Clone o módulo de texto duas vezes.

Ajustar 2º Módulo de Texto

Texto

Altere o conteúdo no novo módulo de texto.

• Corpo: H2 Content - Art Direction

Posição

Adicione posicionamento absoluto ao módulo também.

• Posição: Absoluta
• Localização: Superior Esquerdo

Efeitos de rolagem

Em seguida, atualize as configurações do efeito de rolagem.

• Fading In e Out: Habilitar
• Viewport Bottom
  • Posição: 56%
  • Opacidade inicial: 0%
• Opacidade média
• Posição inferior: 57%
• Posição superior: 67%
• Opacidade média: 100%
• Topo da janela de visualização
  • • Posição: 68%
    • Opacidade final: 0%

  

Ajustar 3º Módulo de Texto

Texto

Agora ajuste a segunda duplicata do módulo de texto. Altere o conteúdo primeiro.

• Corpo: H2 Content - Acessórios e guarda-roupa

Posição

Adicione uma posição absoluta a seguir.

• Posição: Absoluta
• Localização: Superior Esquerdo

Efeitos de rolagem

Em seguida, modifique os efeitos de rolagem.

• Fading In e Out: Habilitar
• Viewport Bottom
  • Posição: 70%
  • Opacidade inicial: 0%
• Opacidade média
  • Posição inferior: 71%
  • Posição superior: 80%
  • Opacidade média: 100%
• Topo da janela de visualização
  • Posição: 81%
  • Opacidade final: 0%

Adicionar Módulo de Imagem

Imagem

Agora é hora de adicionar um módulo de imagem. Use uma imagem quadrada com tamanho de imagem de 350 x 350 px.

• Imagem: imagem quadrada de 350 x 350 px

Alinhamento

Defina o alinhamento à esquerda.

• Alinhamento de imagem: esquerda

Espaçamento

Ajuste o espaçamento também.

• Mostrar espaço abaixo da imagem: Não
• Margem superior: -60px

Filtros

Em seguida, adicione um filtro para tornar a imagem dessaturada.

• Saturação: 0%

Visibilidade

Agora, vá para a guia avançada e defina os overflows como ocultos.

• Excesso horizontal e vertical: oculto

Efeitos de rolagem

Por último, mas não menos importante, adicione um efeito de rolagem com aparecimento e desaparecimento gradual.

• Fading In e Out: Habilitar
• Viewport Bottom
  • Posição: 70%
  • Opacidade inicial: 0%
• Opacidade média
  • Posição: 71%
  • Médio: 100%
• Topo da janela de visualização
  • Posição: 100%
  • Opacidade final: 0%

Adicionar módulo de apelo à ação

Texto

Avance para o próximo módulo, que é um módulo de apelo à ação. Inclua algum conteúdo de sua escolha.

• Título: Equipe de arte de Jason
• Botão: Equipe de arte de Jason do livro
• Corpo: conteúdo descritivo

Ligação

Adicione um link a seguir.

• Link: Seu link

Fundo

Remova a cor de fundo padrão também.

• Usar cor de fundo: Não

Texto

Em seguida, defina o alinhamento à direita.

• Alinhamento de Texto: Direito

Texto do Título

Defina também o estilo do texto do título.

• Nível de direção: H3
• Fonte: Fredoke One
• Alinhamento do Texto do Título: Esquerda
• Cor: Preto #oooooo
• Tamanho
  • Desktop: 48px
  • Tablet: 42px
  • Telefone: 33px
• Espaçamento entre Letras
  • Desktop e tablet: 1px
  • Telefone: 0px
• Altura da linha
  • Desktop e Tablet: 1.6em
  • Telefone: 1.1em

Texto de corpo

Em seguida, o corpo do texto.

• Fonte: Verdana
• Cor: Preto # 000000
• Tamanho: 14px
• Espaçamento entre letras: 0,5 px

Botão

Ajuste os estilos dos botões também.

• Estilos Personalizados
• Tamanho do texto: 17px
• Cor do Texto: Branco #ffffff
• Fundo: Preto # 000000
• Espaçamento entre letras: 1px
• Fonte: Verdana
• Margem superior: 20px
• Preenchimento superior e inferior: 10 px
• Preenchimento esquerdo e direito: 25px

Posição

Vá para a guia avançada e altere as configurações de posição da seguinte forma:

• Cargo: Relativo
• Origem do deslocamento: canto superior esquerdo
• Deslocamento horizontal: 25px

Visibilidade

Em seguida, oculte os transbordamentos.

• Excesso horizontal e vertical: oculto

Efeitos de rolagem

Por último, mas não menos importante, ative um efeito de rolagem com aparecimento e desaparecimento gradual.

• Fading In e Out: Habilitar
• Viewport Bottom
  • Posição: 54%
  • Opacidade inicial: 0%
• Opacidade média
  • Posição inferior: 55%
  • Posição superior: 80%
  • Médio: 100%
• Topo da janela de visualização
  • Posição: 100%
  • Opacidade final: 0%

2ª linha duplicada

Clone a linha com todos os seus módulos.

Ajustar 1º Módulo de Texto

Texto

Agora mude o conteúdo dos módulos de texto clonados. Comece do topo.

• Corpo: H2 Content / Pre-Production

Texto

Mude o alinhamento para a direita.

• Alinhamento de Texto: Direito

Estender Alinhamento de Texto

Aplique o alinhamento a todos os módulos de texto clonados na mesma linha.

• Estender o alinhamento do texto: para todos os módulos de texto nesta linha

Ajustar 2º Módulo de Texto

Texto

Agora atualize o conteúdo no segundo módulo de texto clonado.

• Corpo: H2 Content / On-Set Production

Posição

Altere também a localização nas configurações de posição.

• Localização: Cima direita

Ajustar 3º Módulo de Texto

Texto

Agora mude o conteúdo do terceiro módulo de texto clonado.

• Corpo: H2 Conteúdo / Coordenação entre as equipes

Posição

Altere também a localização nas configurações de posição.

• Localização: Cima direita

Ajustar novo módulo de imagem

Imagem

Em seguida, altere a foto no módulo de imagem.

• Imagem: Nova Imagem 350 x 350 px

Alinhamento

Altere o alinhamento da imagem também.

• Alinhamento de imagem: direita

Ajustar o novo módulo de apelo à ação

Texto

Abra o módulo de apelo à ação a seguir e altere todo o conteúdo.

• Título: Equipe de Produção de Alice
• Botão: Equipe de produção de Alice do livro
• Corpo: Novo conteúdo descritivo.

Ligação

Altere o link também.

• Link: Novo link

Texto

Modifique o alinhamento também.

• Alinhamento de Texto: Esquerda

Texto do Título

Altere também o alinhamento do texto do título.

• Alinhamento do Texto do Título: Esquerda

Texto de corpo

Bem como o corpo do texto.

• Alinhamento do corpo do texto: esquerda

Dimensionamento

Não se esqueça de alterar o alinhamento de todo o módulo nas configurações de dimensionamento também.

• Alinhamento do Módulo: Esquerda

Posição

Finalmente, redefina as configurações de posição para o padrão e pronto!

• Posição: Redefinir para o padrão

Antevisão

Vamos dar uma última olhada no layout da página em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Isso é um envoltório para o layout com texto e imagens que mudam na rolagem!

Acabamos de recriar o texto e as imagens que mudam na rolagem. Conseguimos esse efeito graças aos efeitos de rolagem integrados do Divi. Use este layout para uma página de serviços, uma página sobre, uma página de encontro com a equipe ou qualquer coisa que você quiser! Use os fundos fornecidos ou deixe o fundo branco.

Deixe-nos saber o que você pensa nos comentários!