Como criar uma bela seção de herói colidindo com colunas em Scroll with Divi

Os efeitos de rolagem do Divi trazem muitas novas possibilidades de design para os sites que você cria. As interações sutis que você escolhe adicionar podem realmente ajudar a elevar a aparência geral do seu site. Tudo fica ainda melhor assim que você sincroniza os efeitos de rolagem. Neste tutorial, lidaremos especificamente com a criação de uma bela seção de herói com colisão de colunas na rolagem. O design da seção do herói mescla duas colunas diferentes na rolagem, o que, por sua vez, ajuda a enfatizar a cópia. Você também poderá baixar o arquivo JSON gratuitamente!

Vamos lá.

Antevisão

Agora que passamos por todas as etapas, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Baixe o layout da seção do herói em colisão de colunas GRATUITAMENTE

Para colocar suas mãos no layout da seção do herói com colisão de colunas, primeiro você precisa baixá-lo 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!

Recriar o layout da seção da seção Hero

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: # f4f2f7

Espaçamento

Remova também o preenchimento padrão superior e inferior de todas as seções.

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

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 ainda, 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: 100%

Espaçamento

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

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

Transbordamentos

E esconda os transbordamentos da linha.

• Excesso horizontal: oculto
• Estouro vertical: oculto

Configurações da coluna 1

Espaçamento

Em seguida, abra as configurações da coluna 1 e adicione alguns valores de preenchimento personalizados.

• Acolchoamento superior: 15vw
• Preenchimento inferior: 10vw
• Preenchimento esquerdo: 5vw
• Preenchimento direito: 5vw

Índice Z

Aumente o índice z da coluna também.

• Índice Z: 12

Configurações da coluna 2

Imagem de fundo

Continue abrindo as configurações da coluna 2 e carregue uma imagem de plano de fundo de sua escolha.

• Tamanho da imagem de fundo: capa
• Posição da imagem de fundo: centro
• Repetição da imagem de fundo: sem repetição
• Mistura de imagem de fundo: normal

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

Adicionar conteúdo H1

É hora de adicionar módulos, começando com um primeiro Módulo de texto na coluna 1. Adicione algum conteúdo H1 de sua escolha.

Configurações de texto H1

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

• Fonte do título: Sombras na luz
• Peso da fonte do cabeçalho: negrito
• Cor do texto do título: # 000000
• Tamanho do texto do título: 6vw (desktop), 11vw (tablet), 13vw (telefone)
• Espaçamento entre letras do cabeçalho: -2 px
• Altura da linha de direção: 1,2em

Espaçamento

Adicione alguma margem superior também.

• Margem superior: 10vw

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

Adicionar conteúdo

Insira outro Módulo de Texto com algum conteúdo descritivo de sua escolha.

Configurações de texto

Modifique as configurações de texto do módulo da seguinte forma:

• Fonte do texto: Open Sans
• Cor do texto: # 1e1e1e
• Tamanho do texto: 0,9vw (desktop), 1,9vw (tablet), 3vw (telefone)
• Altura da linha de texto: 2,4em

Espaçamento

E adicione alguns valores de margem personalizados em diferentes tamanhos de tela.

• Margem superior: 4vw (desktop), 8vw (tablet), 12vw (telefone)
• Margem inferior: 4vw (desktop), 8vw (tablet), 12vw (telefone)

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.

Configurações de botão

Modifique as configurações do botão do módulo da seguinte forma:

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

• Fonte do botão: Open Sans

Espaçamento

E conclua as configurações do 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), 5vw (tablet), 7vw (telefone)
• Preenchimento direito: 3vw (desktop), 5vw (tablet), 7vw (telefone)

Adicionar Módulo de Texto à Coluna 2

Adicionar conteúdo

Na segunda coluna, o único módulo de que precisaremos é um Módulo de Texto. Insira 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: sombras em luz
• Cor do texto: rgba (0,0,0,0.25)
• Tamanho do texto: 9vw (desktop), 14vw (tablet e telefone)
• Espaçamento entre letras do texto: -3px
• Altura da linha de texto: 1em
• Alinhamento de texto: centro (área de trabalho), esquerda (tablet e telefone)

Espaçamento

Adicione alguns valores de preenchimento personalizados também.

• Preenchimento superior: 5vw (desktop),
• Acolchoamento inferior: 60vw (tablet e telefone)
• Preenchimento esquerdo: 5vw (tablet e telefone)

Aplicar animações de rolagem

Seção

Aumentando e Diminuindo

Assim que todos os seus módulos estiverem no lugar, é hora de aplicar os efeitos de rolagem! Abra as configurações da seção primeiro e use o seguinte efeito de aumento e redução:

• Ativar Sclaing para cima e para baixo
• Escala inicial: 100% (em 49%)
• Escala média:
  • Desktop: 70% (em 100%)
  • Tablet e telefone: 100% (em 100%)
• Escala final:
  • Desktop: 70%
  • Tablet e telefone: 100%

Coluna 1

Movimento Horizontal

Continue abrindo as configurações da coluna 1 e use o seguinte efeito de movimento horizontal:

• Habilitar Movimento Horizontal: Sim
• Compensação inicial: 0
• Offset médio:
  • Desktop: 0 (em 65%)
  • Tablet e telefone: 0 (em 93%)
• Compensação final:
  • Desktop: 6
  • Tablet e telefone: 0

Aumentando e Diminuindo

Aplique um efeito de aumento e redução na coluna também.

• Habilitar aumento e redução de escala: Sim
• Escala inicial:
  • Desktop: 10%
  • Tablet e telefone: 100%
• Escala média:
  • Desktop: 90%
  • Tablet e telefone: 100%
• Escala Final: 100%

Coluna 2

Movimento Horizontal

Em seguida, abra as configurações da coluna 2 e use as seguintes configurações de movimento horizontal:

• Habilitar Movimento Horizontal: Sim
• Compensação inicial: 0
• Offset médio:
  • Desktop: 0 (em 53%)
  • Tablet e telefone: 0 (em 56%)
• Compensação final:
  • Desktop: -6 (em 53%)
  • Tablet e telefone: 0 (em 100%)

Fading In e Out

Complete as configurações da coluna adicionando um efeito de aparecimento e desaparecimento gradual.

• Habilitar Fading In e Out: Sim
• Opacidade inicial: 100% (a 47%)
• Opacidade média:
  • Desktop: 0% (em 47%)
  • Tablet e telefone: 100% (a 47%)
• Fim da opacidade:
  • Desktop: 0%
  • Tablet e telefone: 100%

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 usar de forma criativa os efeitos de rolagem do Divi para criar uma seção de herói com colisão de colunas. Assim que os visitantes rolarem, as duas colunas diferentes e seus elementos começarão a se fundir. Isso, por sua vez, permitirá que você enfatize ainda mais a cópia. 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.