Como alterar estilos na rolagem sem movimento usando as opções adesivas do Divi

Se você está buscando um estilo de design limpo ao construir um novo site, provavelmente desejará encontrar uma maneira de ainda adicionar uma dimensão extra ao seu site. Este tutorial será sobre isso. Mostraremos como usar as opções adesivas do Divi para alterar estilos aderentes sem movimento. Especificamente, isso significa que, assim que os visitantes rolarem para além de uma determinada parte da página, os estilos dessa parte mudarão, mas os elementos permanecerão no lugar. Esse tipo de efeito é totalmente focado no comportamento do usuário. A mudança de estilos pegajosos só acontece quando as pessoas passam por ela, o que dá um belo resultado. Neste tutorial, mostraremos passo a passo como chegar lá. Depois de obter a abordagem, você poderá usá-la em qualquer tipo de design que construir! 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!

1. Crie a estrutura do elemento

Adicionar nova seção

Visibilidade

Comece adicionando uma nova seção à página em que está trabalhando. Abra as configurações da seção e oculte os transbordamentos na guia avançada. Isso ajudará a garantir que nenhuma barra de rolagem horizontal apareça.

• Excesso horizontal: oculto
• Estouro vertical: oculto

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova linha à seção usando a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar nenhum módulo, abra as configurações de linha e modifique as configurações de dimensionamento de acordo:

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize Alturas de Coluna: Sim
• Largura: 100%
• Largura máxima: 2580 px

Espaçamento

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

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

Configurações da coluna 1

Espaçamento

Em seguida, abra as configurações da coluna 1 e aplique alguns valores de preenchimento personalizados em diferentes tamanhos de tela.

• Enchimento superior:
  • Desktop: 200px
  • Tablet: 100px
  • Telefone: 80px
• Preenchimento inferior:
  • Desktop: 200px
  • Tablet: 100px
  • Telefone: 80px

Índice Z

Aumente também o índice z desta coluna. Posteriormente no tutorial, criaremos uma sobreposição horizontal entre as colunas 1 e 2. Estamos aumentando o índice z para garantir que os módulos da coluna 1 fiquem acima dos módulos da coluna 2.

• Índice Z: 11

Configurações da coluna 2

Cor de fundo

A seguir, adicionaremos uma cor de fundo à coluna 2.

• Cor de fundo: # f9f9f9

Espaçamento

Usaremos alguns valores de preenchimento personalizados em diferentes tamanhos de tela também.

• Enchimento superior:
  • Desktop: 200px
  • Tablet: 150px
  • Telefone: 100px
• Preenchimento inferior:
  • Desktop: 200px
  • Tablet: 150px
  • Telefone: 100px

Configurações da coluna 3

Espaçamento

Por último, mas não menos importante, adicionaremos alguns valores de preenchimento personalizados à coluna 3 também.

• Enchimento superior:
  • Desktop: 200px
  • Tablet: 100px
  • Telefone: 50px
• Preenchimento inferior:
  • Desktop: 200px
  • Tablet: 100px
  • Telefone: 50px
• Preenchimento esquerdo: 8%
• Preenchimento direito: 8%

Adicionar Módulo de Texto à Coluna 1

Adicionar cópia

É hora de adicionar módulos, começando com um Módulo de texto na coluna 1. Adicione um número à caixa de conteúdo.

Cor de fundo

Altere a cor do plano de fundo a seguir.

• Cor de fundo: #efefef

Configurações de texto

Vá para a guia de design e altere as configurações de texto de acordo:

• Fonte do texto: Montserrat
• Cor do texto: #ffffff
• Tamanho do texto: 100px
• Altura da linha de texto: 1em
• Alinhamento de Texto: Centro

Dimensionamento

Modifique a largura a seguir.

• Largura: 150px

Espaçamento

Em seguida, adicione algum preenchimento personalizado superior e inferior.

• Enchimento superior: 20 px
• Preenchimento inferior: 20 px

Posição

Reposicione o módulo também.

• Posição: Absoluta
• Localização: Inferior Direito
• Deslocamento horizontal: -5%

Adicionar Módulo de Texto à Coluna 2

Adicionar cópia H3 e H4

Para a segunda coluna. Lá, adicionaremos um Módulo de Texto com algumas cópias H3 e H4.

Configurações de texto

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

• Alinhamento de Texto: Centro
• Cor do Texto: Escuro

Configurações de texto H3

Em seguida, modifique as configurações de texto H3.

• Fonte do título 3: Playfair Display
• Alinhamento de Texto Título 3: Centro
• Tamanho do texto do título 3:
  • Desktop: 90px
  • Tablet: 70px
  • Telefone: 60px

Configurações de texto H4

Defina também o estilo do texto H4.

• Fonte do título 4: Montserrat
• Cabeçalho 4 Peso da fonte: leve

Dimensionamento

Em seguida, vá para as configurações de dimensionamento e aplique uma largura de “100%”. Isso ajudará na próxima etapa, que é reposicionar o módulo.

• Largura: 100%

Posição

Conclua as configurações do módulo acessando a guia avançada e modificando as configurações de posição da seguinte forma:

• Posição: Absoluta
• Localização: Inferior Esquerdo
• Deslocamento vertical: 20px

Adicionar Módulo de Texto à Coluna 3

Adicionar conteúdo H5 e parágrafo

Passe para a terceira coluna. Adicione um Módulo de Texto com algum conteúdo H5 e parágrafo de sua escolha.

Configurações de texto

Vá para a guia de design do módulo e altere a fonte nas configurações de texto.

• Fonte do texto: Montserrat

Configurações de texto H5

Defina o estilo do texto H5 também.

• Fonte do título 5: Montserrat
• Cabeçalho 5 Peso da fonte: Negrito
• Tamanho do texto do título 5:
  • Desktop e tablet: 23px
  • Telefone: 18px

2. Principais mudanças para criar efeito

Seção

Remover o enchimento da seção

Agora que definimos a base de nosso design, podemos começar a criar o efeito de estilos fixos personalizados que você pôde ver na visualização deste post. A primeira etapa para obter esse efeito é garantir que os valores de preenchimento superior e inferior da seção sejam zero. Isso nos ajudará a garantir que a seção e a linha comecem e terminem no mesmo ponto. Isso é importante quando adicionamos a posição fixa à nossa linha nas próximas etapas. Ao definir o limite para a parte inferior da seção, não deixamos espaço para a linha se mover. A linha, no entanto, ficará fixa por alguns segundos e destacará os estilos fixos alterados em nosso design.

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

Linha

Turn Row Sticky

Abra as configurações de linha e torne a linha aderente. Conforme mencionado na etapa anterior, é importante certificar-se de que o limite fixo inferior de nossa linha seja a seção. Como não há espaço entre o final da linha e o final da seção, a linha fixa permanecerá no lugar.

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

Cor de fundo da linha pegajosa

É hora de começar a aplicar alguns estilos fixos aos nossos elementos! Comece com a cor de fundo da linha.

• Cor de fundo: # 161616

Transição de linha

Para garantir uma transição suave, aumentaremos a duração da transição na guia avançada da linha.

• Duração da transição: 500ms
• Curva de velocidade de transição: facilidade

Cor de fundo da coluna pegajosa 2

Em seguida, mudaremos a cor de fundo da coluna 2 fixa.

• Cor de fundo: # 262626

Módulo de Texto na Coluna 1

Cor de fundo pegajosa

Mudaremos a cor de fundo do Módulo de Texto na coluna 1 também.

• Cor de fundo: # ddc7b5

Cor do Texto Fixo

Junto com a cor do texto pegajoso.

• Cor do texto: # 0a0a0a

Dimensionamento pegajoso

E vamos aumentar a largura do módulo nas configurações de dimensionamento.

• Largura: 105%

Transição

Estamos garantindo uma transição suave, modificando a duração da transição do módulo na guia avançada.

• Duração da transição: 500ms
• Curva de velocidade de transição: facilidade

Módulo de Texto na Coluna 2

Cor do Texto Fixo

A seguir, temos o Módulo de Texto na coluna 2. Mudaremos a cor do texto para acender em estado pegajoso.

• Cor do Texto: Claro

Módulo de Texto na Coluna 3

Cor do Texto Fixo

O mesmo vale para o Módulo de texto na coluna 3.

• Cor do Texto: Claro

3. Seção de clonagem para reutilização

Agora que completamos a primeira seção, incluindo o efeito de mudança de estilos fixos, podemos reutilizar esta seção quantas vezes quisermos, clonando-a.

Alterar todas as cópias

Certifique-se de alterar todas as cópias duplicadas.

Adicione alguma margem superior à primeira seção e a margem inferior à última seção

E por último, mas não menos importante, adicionaremos alguma margem superior à primeira seção e a margem inferior à última seção. Isso nos ajudará a evitar uma transição imediata antes que as pessoas comecem a rolar. É isso!

• Margem superior: 200px

• Margem inferior: 200px

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 especificamente, usamos as opções adesivas Divi para alterar estilos aderentes sem adicionar movimento. Assim que as pessoas passam por uma determinada parte da página, os estilos do design mudam, o que destaca essa parte específica da 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.