Como contar sua história no Scroll com Divi

Sua página sobre é uma das páginas mais importantes do seu site. Permite que as pessoas o conheçam melhor e decidam se estão confortáveis ​​para dar o próximo passo. Se você está procurando uma maneira fácil de incluir a narrativa em sua página sobre, você vai adorar este tutorial. Usaremos os efeitos de rolagem do Divi para criar uma transição de narrativa suave na rolagem. Assim que uma parte da história desaparece, outra parte aparece. Isso dá aos visitantes a sensação de que estão lendo uma história interessante. 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 a história da página sobre no layout de rolagem GRATUITAMENTE

Para colocar suas mãos na história da página gratuita sobre o layout de 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!

1. Crie a primeira seção de tela inteira da página

Adicionar nova seção

Cor de fundo

Comece adicionando uma primeira seção à sua página sobre. Abra as configurações da seção e altere a cor de fundo para preto.

• Cor de fundo: # 000000

Dimensionamento

A seguir, vire a seção para tela inteira adicionando uma altura mínima nas configurações de dimensionamento.

• Altura mínima: 100vh

2. Adicionar linha animada

Adicionar nova linha

Estrutura da Coluna

Em seguida, adicione uma nova linha à sua seção usando a seguinte estrutura de coluna:

Dimensionamento

Abra as configurações de linha e permita que a linha ocupe toda a largura do contêiner de seção, modificando as configurações de dimensionamento.

• Largura: 100%
• Largura máxima: 100%

Espaçamento

Em seguida, adicione um pouco de preenchimento esquerdo e direito em diferentes tamanhos de tela.

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

Animação

Para aumentar o efeito de narrativa, também usaremos uma animação de esmaecimento para a linha.

• Estilo de animação: Fade
• Duração da animação: 3000ms
• Curva de velocidade de animação: Ease-In-Out
• Repetição de animação: uma vez

Posição

E por último, mas não menos importante, vamos garantir que a linha seja posicionada centralmente dentro do contêiner da seção, modificando as opções de posição.

• Posição: Absoluta
• Localização: Centro

3. Insira o título com efeitos de rolagem

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 do título 1

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

• Fonte do cabeçalho: Nunito
• Peso da fonte do cabeçalho: Semi negrito
• Cor do texto do título: #ffffff
• Tamanho do texto do título: 7vw (desktop), 9vw (tablet), 11vw (telefone)

Movimento Vertical

Adicionaremos uma animação vertical sutil também.

• Habilitar movimento vertical: Sim
• Compensação inicial: 0 (em 50%)
• Deslocamento médio: 10 (em 100%)
• Compensação final: 10

Efeito de rolagem com aparecimento e desaparecimento gradual

Junto com um efeito de fading in e out.

• Habilitar Fading In e Out: Sim
• Opacidade inicial: 100%
• Opacidade média: 100% (a 55%)
• Opacidade final: 0% (em 62%)

Dimensionamento do efeito de rolagem para cima e para baixo

Por último, mas não menos importante, também usaremos um efeito de rolagem para cima e para baixo.

• Habilitar aumento e redução de escala: Sim
• Escala inicial: 100% (a 40%)
• Escala média: 95% (em 74%)
• Escala Final: 90%

4. Clone toda a seção uma vez e inclua o texto da descrição com efeitos de rolagem

Alterar título e cópia do conteúdo

Depois de concluir a primeira seção, você pode cloná-la inteiramente. Abra o Módulo de Texto dentro do contêiner de seção duplicado e use alguma cópia H2.

Modificar as configurações de texto H2 do módulo de texto

Altere as configurações de texto H2 de acordo:

• Fonte do título 2: Nunito
• Cabeçalho 2 Peso da fonte: Semi negrito
• Cor do texto do título 2: #ffffff
• Tamanho do texto do título 2: 5vw (desktop), 7vw (tablet), 8vw (telefone)
• Altura da linha do título 2: 1em (desktop), 1.2em (tablet e telefone)

Adicionar Módulo de Texto # 2 à Coluna

Adicionar conteúdo

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

Configurações de texto

Altere as configurações de texto do Módulo de Texto da seguinte maneira:

• Fonte do texto: Open Sans
• Cor do texto: #ffffff
• Tamanho do texto: 1vw (desktop), 2,5vw (tablet), 3vw (telefone)
• Altura da linha de texto: 3.1em (desktop), 2.5em (tablet e telefone)

Espaçamento

Use alguma margem superior também.

• Margem superior: 8vw

Efeito de rolagem com aparecimento e desaparecimento gradual

Em seguida, vá para os efeitos de rolagem na guia avançada e use as seguintes configurações de aparecimento e desaparecimento:

• Habilitar Fading In e Out: Sim
• Opacidade inicial: 100%
• Opacidade média: 0% (em 31%)
• Opacidade final: 0% (a 35%)

Dimensionamento do efeito de rolagem para cima e para baixo

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

• Habilitar aumento e redução de escala: Sim
• Escala inicial: 100% (a 40%)
• Escala média: 95% (em 74%)
• Escala Final: 90%

5. Clone a segunda seção quantas vezes quiser

Altere o conteúdo conforme você avança

Depois de concluir a segunda seção em sua página, você pode cloná-la quantas vezes quiser, dependendo do enredo da página sobre. Certifique-se de alterar o conteúdo em cada seção.

6. Página completa com seção CTA

Alterar o espaçamento do módulo de texto de descrição

Complete a página sobre com uma seção de CTA no final. Abra a descrição do Módulo de Texto e modifique as margens superior e inferior.

• Margem superior: 4vw
• Margem inferior: 4vw

Adicionar Módulo de Botão

Adicionar cópia

Em seguida, adicione um Módulo de botão também com alguma cópia de sua escolha.

Configurações de botão

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

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

• Raio da borda do botão: 100 px
• Fonte do botão: Nunito
• Peso da fonte do botão: negrito

Espaçamento

Conclua as configurações do Módulo de botão 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: 3vw (desktop), 6vw (tablet), 8vw (telefone)
• Preenchimento direito: 3vw (desktop), 6vw (tablet), 8vw (telefone)

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 contar uma história em sua página sobre usando os efeitos de rolagem integrados do Divi. O efeito que criamos permite que cópias consecutivas apareçam e desapareçam gradualmente, dando aos visitantes a impressão de que estão lendo uma história. 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.