Como criar sobreposições de módulos na rolagem com os efeitos de rolagem da Divi

O uso de sobreposições em seu design aumentou em popularidade nos últimos anos. Ele dá ao seu design uma aparência mais abstrata. Ao mesmo tempo, ajuda a economizar espaço, o que, por sua vez, limita a rolagem vertical necessária. Dentro do Divi, existem algumas maneiras de adicionar sobreposições aos módulos sem esforço. Você também pode ir mais longe e adicionar alguma interação de rolagem! No tutorial Divi de hoje, mostraremos como criar sobreposições sutis de módulos na rolagem usando a margem negativa e o efeito de rolagem de movimento vertical do Divi. O design que estamos recriando inclui uma bela sobreposição de imagem 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 as sobreposições de módulos no layout de rolagem GRATUITAMENTE

Para colocar suas mãos sobre as sobreposições de módulo gratuitas 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.

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!

Passos Gerais

Adicionar nova seção

Espaçamento

Comece adicionando uma nova seção à página em que está trabalhando. Abra as configurações de seção e inclua algum preenchimento superior e inferior personalizado.

• Enchimento superior: 10%
• Estofamento inferior: 10%

Adicionar linha # 1

Estrutura da Coluna

Continue adicionando uma nova linha usando a seguinte estrutura de coluna:

Espaçamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e adicione alguma margem inferior às configurações de espaçamento.

• Margem inferior: 100px

Adicionar Módulo de Texto # 1 à Coluna

Adicionar conteúdo H2

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

Configurações de texto do título 2

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

• Fonte do Título 2: Abril Fatface
• Tamanho do texto do título 2: 100 px (desktop), 70 px (tablet), 60 px (telefone)

Adicionar Módulo Divisor à Coluna

Visibilidade

O próximo módulo de que precisamos é um Módulo Divisor. Certifique-se de que a opção 'Mostrar divisor' esteja habilitada.

• Mostrar divisor: Sim

Linha

Vá para a guia de design e altere as configurações de linha da seguinte forma:

• Cor da linha: # 333333
• Estilo de linha: Sólido
• Posição da linha: topo

Dimensionamento

Modifique as configurações de dimensionamento também.

• Peso do divisor: 6px
• Largura: 10% (desktop), 20% (tablet), 30% (telefone)

Adicionar Módulo de Texto # 2 à Coluna

Adicionar conteúdo

O último módulo de que precisamos nesta linha é outro Módulo de Texto com algum conteúdo de descrição.

Configurações de texto

Modifique as configurações de texto do módulo de acordo:

• Fonte do Texto: Karla
• Tamanho do texto: 18 px
• Altura da linha de texto: 2.2em

Adicionar linha # 2

Estrutura da Coluna

Vá para a próxima linha, que usa a seguinte estrutura de coluna:

Dimensionamento

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: 100%
• Largura máxima: 100%

Adicionar Módulo de Imagem à Coluna 1

Carregar sobreposição

Na coluna 1, o primeiro módulo de que precisamos é um Módulo de imagem. Faça upload do arquivo de imagem de sobreposição que você encontra na pasta de download que você baixou no início deste post.

Imagem de fundo

Em seguida, carregue uma imagem de plano de fundo de sua escolha.

• Tamanho da imagem de fundo: capa
• Posição da imagem de fundo: centro

Dimensionamento

Em seguida, force a largura total no Módulo de imagem.

• Forçar largura total: Sim

Adicionar Módulo de Texto à Coluna 1

Adicionar conteúdo H3 e descrição

Passe para o próximo módulo, que é um Módulo de Texto contendo alguns H3 e conteúdo descritivo de sua escolha.

Cor de fundo

Altere a cor de fundo do módulo.

• Cor de fundo: # 333333

Configurações de texto

Em seguida, vá para a guia de design e altere as configurações de texto de acordo:

• Fonte do Texto: Karla
• Tamanho do texto: 18 px
• Altura da linha de texto: 2.2em
• Cor do Texto: Claro

Configurações de texto H3

Faça algumas alterações nas configurações de texto H3 também.

• Fonte do Título 3: Abril Fatface
• Peso da fonte do cabeçalho 3: negrito
• Tamanho do texto do título 3: 50px

Dimensionamento

Em seguida, vá para as configurações de dimensionamento e altere a largura em diferentes tamanhos de tela.

• Largura: 70% (desktop), 80% (tablet), 100% (telefone)
• Alinhamento do Módulo: Centro

Espaçamento

Estamos usando algumas margens personalizadas e valores de preenchimento também.

• Margem superior: -26%
• Enchimento superior: 15%
• Estofamento inferior: 15%
• Preenchimento esquerdo: 10%
• Preenchimento direito: 10%

Efeito de rolagem de movimento horizontal

E concluiremos as configurações do módulo adicionando algum movimento horizontal aos efeitos de rolagem na guia avançada.

• Habilitar movimento vertical: Sim
• Compensação inicial: 4
• Deslocamento médio: 4 (em 5%)
• Compensação final: 0 (em 10%)
• Gatilho de efeito de movimento: meio do elemento

Adicionar Módulo de Botão à Coluna 1

Adicionar cópia

O último módulo de que precisamos na coluna 1 é um Módulo de botão. Insira alguma cópia de sua escolha.

Alinhamento

Em seguida, vá para a guia de design e altere o alinhamento do botão.

• Alinhamento do botão: Centro

Configurações de botão

A seguir, definiremos o estilo do botão de acordo:

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão: 20 px
• Cor do texto do botão: # 333333
• Cor de fundo do botão: #ffffff
• Largura da borda do botão: 0 px
• Raio da borda do botão: 1px

• Fonte do botão: Karla
• Peso da fonte do botão: negrito

Espaçamento

E concluiremos as configurações do módulo adicionando alguns valores de margem e preenchimento personalizados às configurações de espaçamento do módulo.

• Margem superior: -4%
• Enchimento superior: 2%
• Estofamento inferior: 2%
• Preenchimento esquerdo: 7%
• Preenchimento direito: 7%

Clonar Módulos na Coluna 1 e Colocar Duplicados na Coluna 2

Depois de concluir os módulos na coluna 1, você pode clonar todos os módulos e colocar as duplicatas na segunda coluna da linha.

Alterar imagem e conteúdo de fundo

Certifique-se de alterar a imagem de fundo e o conteúdo.

Clonar linha inteira

Em seguida, clone a linha inteira quantas vezes desejar.

Alterar imagens e conteúdo de fundo

Altere as imagens de fundo e o conteúdo aqui também 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

Nesta postagem, mostramos como criar sobreposições sutis de módulos na rolagem com os novos efeitos de rolagem do Divi. Combinamos efetivamente a margem superior negativa com o efeito de rolagem de movimento vertical integrado do Divi para elevar a aparência geral do nosso design. O design que recriamos incluía uma bela sobreposição de imagem e você também pôde 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.