Como criar transições de cópia paralaxe com as opções fixas da Divi

Quando você está procurando maneiras criativas de incrementar os designs de sua página, os efeitos de paralaxe podem ser úteis. Eles trazem essa interação extra na rolagem sem serem muito invasivos. Se você está procurando uma maneira de estender esse efeito de paralaxe para várias seções em sua página, você vai adorar este tutorial. Hoje, mostraremos como criar transições de cópia em paralaxe com as opções adesivas do Divi. Assim que os visitantes passam por uma determinada seção, a cópia rola para baixo com a imagem de fundo de paralaxe, o que dá um efeito muito bom. Assim que a próxima seção da linha for alcançada, a cópia será substituída por outro título. O resultado que buscamos parece ótimo em todos os tamanhos de tela e 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 o layout GRATUITAMENTE

Para colocar as mãos no layout gratuito, 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!

https://youtu.be/uZCD0__Apjk

Inscreva-se no nosso canal no Youtube

1. Crie a Estrutura do Elemento

Adicionar nova seção

Comece adicionando uma nova seção à página em que está trabalhando. Esse efeito funcionará bem principalmente se você tiver conteúdo acima e abaixo do layout que estamos prestes a criar.

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova linha 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:

• Equalize Alturas de Coluna: Sim
• Largura: 95%
• Largura máxima: 100%

Espaçamento

Em seguida, remova todo o preenchimento padrão superior e inferior.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Imagem de fundo da coluna

Agora que modificamos as configurações gerais de linha, aplicaremos algumas configurações personalizadas à coluna dentro de nossa linha também. Comece abrindo as configurações da coluna.

Faça upload de uma imagem de plano de fundo e ative o efeito de paralaxe nela.

• Use o efeito de paralaxe: Sim
• Método Parallax: CSS

Espaçamento entre colunas

Em seguida, vá para a guia de design e aplique algum preenchimento inferior personalizado.

• Preenchimento inferior: 50vh

Adicione o Módulo de Texto # 1 à Coluna 1

Adicionar conteúdo H2

Tempo para adicionar módulos, começando com um Módulo de Texto contendo algum conteúdo H2 de sua escolha.

Configurações de texto H2

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

• Fonte do título 2: Montserrat
• Peso da fonte do cabeçalho 2: negrito
• Estilo da fonte do título 2: maiúsculas
• Cor do texto do título 2: #ffffff
• Tamanho do texto do título 2:
  • Desktop: 9vw
  • Tablet: 14vw
  • Telefone: 15vw

Filtros

Estamos habilitando um modo de mesclagem nas configurações de filtros também.

• Modo de mistura: Sobreposição

Adicionar Módulo de Botão à Coluna 1

Adicionar cópia

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

Adicionar Link

Em seguida, insira um link.

Configurações de botão

Em seguida, vá para a guia de design do módulo e altere as configurações do botão de acordo:

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão:
  • Desktop: 2vw
  • Tablet e telefone: 7vw
• Cor do texto do botão: #ffffff
• Largura da borda do botão: 0 px
• Espaçamento entre letras dos botões: 0,06vw

• Fonte do botão: Karla
• Mostrar ícone do botão: Sim
• Posicionamento do ícone do botão: Esquerda
• Mostrar apenas o ícone ao passar o mouse para o botão: Não

Espaçamento

Adicione um pouco de preenchimento personalizado superior e inferior também.

• Enchimento superior: 8%
• Estofamento inferior: 8%

Posição

E conclua as configurações do módulo reposicionando-o no canto inferior direito da coluna.

• Posição: Absoluta
• Localização: Inferior Direito

2. Etapas necessárias para o efeito

Fixar o módulo de texto

Agora que configuramos a base de nosso design com todos os elementos necessários, é hora de habilitar a transição da cópia em paralaxe. Para fazer isso, usaremos as opções adesivas integradas do Divi no Módulo de Texto. Abra as configurações do módulo, vá para a guia avançada e aplique as seguintes configurações fixas:

• Posição pegajosa: grudar no topo
• Deslocamento superior aderente: 150px
• Limite inferior de aderência: seção
• Compensação dos elementos aderentes circundantes: Sim
• Estilos padrão de transição e fixos: Sim

Modificar espaçamento do módulo de texto

Predefinição

Agora que habilitamos as opções fixas neste módulo, podemos aplicar estilos fixos. Por padrão, o módulo será colocado acima da própria coluna. E, por causa da cor branca do texto do módulo, ele se mesclará com a cor de fundo da seção e parecerá que não há texto nenhum. Para criar esse posicionamento, usaremos alguma margem superior negativa em diferentes tamanhos de tela.

• Margem superior:
  • Desktop: -10vw
  • Tablet: -14vw
  • Telefone: -15vw

Pegajoso

Assim que o Módulo de Texto ficar fixo, queremos que ele volte à vista. Para garantir que isso aconteça, trazeremos de volta essa margem superior para “0vh” em um estado fixo.

• Margem superior pegajosa: 0vh

Espaçamento de seção

Também precisaremos de algum espaço na parte superior e inferior de nossa seção, para que o plano de fundo e o Módulo de texto possam se fundir em cores. Para fazer isso, vamos abrir as configurações da seção novamente e aplicar alguns preenchimentos personalizados superior e inferior.

• Enchimento superior: 10vh
• Preenchimento inferior: 10vh

Clone a seção inteira quantas vezes desejar

Depois de concluir o design da seção, você pode cloná-lo quantas vezes quiser.

Alterar conteúdo e links

Certifique-se de alterar o conteúdo e os links para cada módulo dentro das seções duplicadas e pronto!

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 post, mostramos como ser criativo com as opções pegajosas do Divi. Mais precisamente, mostramos como criar transições de cópia de paralaxe que permitem estender o efeito de paralaxe em várias seções de sua página. 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.