Como sincronizar a cópia de expansão na rolagem com Divi
Publicados: 2020-03-08Quando a ênfase de uma determinada seção está na cópia, é importante garantir que a cópia não passe despercebida. Existem muitas técnicas que você pode usar para colocar sua cópia em destaque, mas neste tutorial, mostraremos como sincronizar a expansão da cópia na rolagem usando os novos efeitos de rolagem do Divi. Conforme os usuários estão navegando, outra parte da cópia aparecerá, permitindo que eles leiam passo a passo o conteúdo que você está fornecendo. 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
Baixe a cópia expansível no layout de rolagem GRATUITAMENTE
Para colocar suas mãos na cópia expansível no 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.
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!
1. Criar Projeto de Seção
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 altere a cor de fundo.
- Cor de fundo: # 151515
Espaçamento
Em seguida, remova todo o preenchimento padrão superior e inferior.
- Preenchimento superior: 0 px
- Preenchimento inferior: 0 px
Adicionar linha # 1
Estrutura da Coluna
Continue adicionando uma nova linha usando a seguinte estrutura de coluna:
Dimensionamento
Sem adicionar nenhum módulo ainda, abra as configurações de linha e modifique as configurações de dimensionamento da seguinte forma:
- Usar largura de calha personalizada: Sim
- Largura da calha: 1
- Largura: 90%
- Largura máxima: 1380 px
Espaçamento
Adicione um pouco de preenchimento personalizado superior e inferior a seguir.
- Enchimento superior: 150px
- Preenchimento inferior: 150 px
Adicionar Módulo de Texto # 1 à Coluna
Adicionar conteúdo
Em seguida, adicione um primeiro Módulo de Texto com algum conteúdo 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: Livvic
- Peso da fonte do texto: negrito
- Cor do texto: # f1f1f1
- Tamanho do texto: 170 px (desktop), 100 px (tablet), 70 px (telefone)
- Altura da linha de texto: 1em
- Comprimento horizontal da sombra do texto: 0,06em
- Comprimento vertical da sombra do texto: 0em
- Cor da sombra do texto: rgba (79,79,79,0.74)
- Alinhamento de texto: centro (área de trabalho), esquerda (tablet e telefone)
Clonar Módulo de Texto Duas Vezes
Clone o Módulo de Texto duas vezes.
Mudar o Conteúdo
Modifique o conteúdo de ambos os Módulos de Texto duplicados.
Adicionar linha # 2
Estrutura da Coluna
Adicione outra linha logo abaixo da anterior usando a seguinte estrutura de coluna:
Dimensionamento
Abra as configurações de linha e altere as configurações de dimensionamento de acordo:
- Usar largura de calha personalizada: Sim
- Largura da calha: 1
- Largura: 100%
- Largura máxima: 100%
Espaçamento
Em seguida, remova o preenchimento padrão superior e inferior da linha.
- Preenchimento superior: 0 px
- Preenchimento inferior: 0 px
Fronteira
Adicione uma borda superior a seguir.
- Largura da borda superior: 1 px
- Cor da borda superior: # 4c4c4c
Configurações de coluna
Espaçamento
Estamos fazendo algumas alterações nas configurações da coluna também. Abra as configurações e adicione alguns valores de preenchimento personalizados.
- Preenchimento superior: 5vw
- Preenchimento inferior: 10vw
- Preenchimento esquerdo: 6vw
- Preenchimento direito: 6vw
Fronteira
Use uma borda direita também.
- Largura da borda direita: 1px
- Cor da borda direita: # 4c4c4c
Adicionar Módulo Blurb à Coluna 1
Adicionar conteúdo
Continue adicionando um Módulo Blurb à coluna com algum conteúdo de sua escolha.
Selecione o ícone
Selecione um ícone de sua escolha a seguir.
Configurações de ícone
Vá para a guia de design do módulo e altere as configurações do ícone da seguinte forma:
- Cor do ícone: # a3acff
- Alinhamento de imagem / ícone: esquerda
Configurações de texto do título
Modifique as configurações do texto do título também.
- Fonte do título: Livvic
- Peso da fonte do título: negrito
- Cor do texto do título: # c1c1c1
- Tamanho do texto do título: 35px
- Sombra do texto do título Comprimento horizontal: 0,06em
- Título Texto Sombra Vertical Comprimento: 0em
- Cor da sombra do texto do título: rgba (79,79,79,0.74)
Configurações do corpo do texto
Estamos fazendo algumas alterações nas configurações do corpo do texto também.
- Cor do corpo do texto: # 878787
- Tamanho do corpo do texto: 16px
- Altura da linha corporal: 2,4em
Blurb Title CSS
E criaremos algum espaço ao redor do título com uma única linha de código CSS que adicionaremos ao título da sinopse na guia avançada.
margin: 30px 0 40px 0;
Clonar coluna inteira duas vezes
Depois de completar a coluna inteira e o Módulo Blurb nela, você pode clonar a coluna inteira duas vezes.
Remover borda da coluna 3
Abra as configurações da coluna 3 e remova a borda direita.
- Largura da borda direita: 0 px
Mudar o Conteúdo
E mude o conteúdo do Módulo Blurb para cada duplicata.
2. Adicionar efeitos de rolagem
Seção
Aumentando e Diminuindo
É hora de adicionar efeitos de rolagem, começando com a seção. Use o efeito de rolagem de escala para cima e para baixo com os seguintes valores:
- Habilitar aumento e redução de escala: Sim
- Escala inicial: 70%
- Escala média: 100%
- Escala Final: 100%
Módulo de Texto # 1
Fading In e Out
Em seguida, abra o primeiro Módulo de texto na primeira linha de sua seção e adicione um efeito de aparecimento e desaparecimento gradual.
- Habilitar Fading In e Out: Sim
- Opacidade inicial: 0%
- Opacidade média: 0% (a 55%)
- Opacidade final: 100% (em 71%)
Aumentando e Diminuindo
Use um efeito de aumento e redução também.
- Habilitar aumento e redução de escala: Sim
- Escala inicial: 0% (a 47%)
- Escala média: 100% (em 56%)
- Escala final: 100% (em 64%)
Estenda os efeitos de rolagem do módulo de texto nº 1
Continue estendendo os efeitos de rolagem para os outros dois Módulos de Texto na coluna.
- Para: Todos os textos
- Em toda: Esta coluna
Módulo Blurb # 1
Aumentando e Diminuindo
A seguir, adicionaremos um efeito de rolagem para cima e para baixo no Módulo Blurb na coluna 1.
- Habilitar aumento e redução de escala: Sim
- Escala inicial:
- Desktop: 0%
- Tablet e telefone: 100%
- Escala média: 100% (em 33%)
- Escala final: 100% (em 64%)
Estenda os efeitos de rolagem do módulo nº 1 do Blurb
Conclua o tutorial estendendo o efeito de rolagem para todos os módulos do Blurb na linha e pronto!
- Para: Todos os Blurbs
- Em toda: This Row
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 tutorial, mostramos uma maneira criativa de sincronizar a cópia de expansão em sua seção Divi. Esta é uma ótima maneira de destacar o texto e permitir que os visitantes leiam diferentes partes de sua seção passo a passo. 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.