Construa sites Belos WordPress usando Divi e Divi Builder

Como mesclar opções pegajosas com efeitos de rolagem em Divi de maneira eficiente

Rifat Tutoriais Divi Jul 27, 2021

As opções integradas do Divi Builder podem ser usadas para criar todos os belos designs. Opções fixas e efeitos de rolagem são dois desses incríveis recursos integrados do Divi e, harmonizando-os, podemos executar alguns designs muito bons. No tutorial de hoje, veremos como criar uma página facilmente, mesclando opções fixas e efeitos de rolagem, o que, sem dúvida, levará a experiência de navegação dos visitantes um passo adiante. Vamos projetar uma seção de página onde uma imagem irá flutuar da esquerda e, antes disso, um texto irá deslizar do lado direito. Pode parecer complexo, mas antes de irmos direto para o nosso tutorial, dê uma olhada no design.

Espiada

Aqui está o layout de design que iremos criar hoje. Este é um design responsivo, portanto, também funcionará em tablets e dispositivos móveis.

Estrutura do projeto de construção

Projeto da Seção Inicial

Fundo Gradiente

Primeiro, estabeleceremos a estrutura e, posteriormente, aplicaremos todas as configurações para torná-la aderente e proporcionar uma experiência de rolagem suave. Abra as configurações da seção inicial e adicione uma cor de fundo gradiente.

  • Cor 1: # 854466
  • Cor 2: #DABFCD
  • Tipo de gradiente: Linear
  • Direção do gradiente: 90 graus
  • Posição inicial: 10%
  • Posição final: 10%

Visibilidade

Vá para a guia Avançado e vamos ocultar a visibilidade do estouro.

Create Amazing Websites

Com o melhor criador de páginas gratuito Elementor

Comece agora
  • Excesso horizontal: oculto
  • Estouro vertical: oculto

Adicionando Linha

Estrutura da Coluna

Vamos adicionar uma nova linha com a seguinte estrutura de coluna.

Dimensionamento

Abra as configurações de dimensionamento para a linha recém-adicionada e modifique as configurações conforme mencionado.

  • Largura: 100%
  • Largura máxima: 2580 px

Espaçamento

Além disso, precisamos adicionar alguma margem inferior à nossa linha.

  • Margem inferior: 50px

Espaçamento da coluna 2

Agora vamos passar para as configurações da coluna 2 e alterar os valores de preenchimento.

  • Enchimento superior: 5vh
  • Preenchimento inferior: 5vh
  • Preenchimento esquerdo: 8%
  • Preenchimento direito: 8%

Coluna 1: Módulo de Texto

Adicionar conteúdo H3

Adicione um módulo de texto à coluna um e adicione algumas cópias de sua escolha.

Fundo Gradiente

Inclua o seguinte fundo gradiente a seguir:

  • Cor 1: rgba (107,45,18,0,52)
  • Cor 2: rgba (255,255,255,0)
  • Tipo de gradiente: Linear
  • Colocar gradiente acima da imagem de fundo: Sim

Imagem de fundo

Adicione uma imagem de sua escolha e defina-a de acordo.

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

Configurações de texto H3

Na guia de design, agora vamos alterar as configurações do H3.

  • Fonte do Título 3: Prata
  • Estilo da fonte do título 3: maiúsculas
  • Alinhamento de Texto Título 3: Centro
  • Cor do texto do título 3: #ffffff
  • Tamanho do texto do título 3: 42 px
  • Altura da linha do título 3: 1,2em

Espaçamento

Agora mude os valores de espaçamento para o módulo.

  • Margem superior: 20vh
  • Margem inferior: 20vh
  • Enchimento superior: 48vh
  • Preenchimento inferior: 48vh

Adicionar 1º Módulo de Texto à Coluna 2

Adicionar conteúdo H4

Vamos adicionar vários módulos de texto à coluna 2. Vamos adicionar o primeiro módulo de texto e adicionar alguma cópia do cabeçalho H4 nele.

Configurações de texto H4

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

  • Fonte do Título 4: Prata
  • Estilo da fonte do título 4: maiúsculas
  • Cor do texto do título 4: # 854466
  • Tamanho do texto do título 4: Desktop: 45px, Tablet: 40px e Telefone: 35px
  • Altura da linha do título 4: 1,3em

Adicionar Módulo Divisor à Coluna 2

Visibilidade

Agora vamos adicionar um módulo divisor logo abaixo do módulo de texto e habilitar a visibilidade do divisor.

  • Mostrar divisor: Sim

Linha

Na guia de design, altere a cor da linha.

  • Cor da linha: # 854466

Dimensionamento

É hora de modificar as configurações de dimensionamento.

  • Peso do divisor: 5px
  • Altura: 5px

Adicionar 2º Módulo de Texto à Coluna 2

Adicionar conteúdo de descrição

Adicione outro módulo de Texto à coluna 2. Ele estará logo abaixo do Módulo Divisor. Além disso, adicione algum conteúdo descritivo de sua escolha.

Configurações de texto

Depois de adicionar a descrição, vamos alterar as configurações de estilo para este módulo.

  • Fonte do texto: Lato
  • Cor do texto: # 854466
  • Tamanho do texto: Desktop: 20px, Tablet e telefone: 16px
  • Espaçamento entre letras do texto: -0,5 px
  • Altura da linha de texto: 1.8em

Dimensionamento

Altere as configurações de dimensionamento.

  • Largura: Desktop: 72%, tablet e telefone: 100%

Adicionar Módulo de Botão à Coluna 2

Adicionar cópia

O módulo final que adicionaremos à coluna 2 é um módulo de botão. Vamos adicioná-lo e também adicionar algumas cópias a ele.

Configurações de botão

E, por último, altere as configurações 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: # 854466
  • Fundo gradiente do botão
    • Cor 1: rgba (43.135.218,0)
    • Cor 2: rgba (188,128,160,0,95)
    • Posição inicial: 50%
    • Posição final: 50%
  • Largura da borda do botão: 0 px
  • Raio da borda do botão: 0 px
  • Fonte do botão: Prata
  • Estilo da fonte do botão: maiúscula

E construímos com sucesso a estrutura para o design de hoje.

Efeitos pegajosos

Coluna 2

Como temos tudo no lugar, começaremos a adicionar configurações fixas abrindo as configurações da coluna 2. Na guia avançada, aplique as seguintes configurações.

  • Posição pegajosa: grudar no topo
  • Deslocamento superior fixo: Desktop: 50px. Tablet e telefone: 80px
  • Limite inferior aderente: linha
  • Compensação dos elementos aderentes circundantes: Sim
  • Estilos padrão de transição e fixos: Sim

Configurações fixas para a coluna 2

Borda pegajosa

Tornamos a coluna fixa com sucesso. Agora vamos adicionar uma borda na coluna 2. Para fazer isso, vamos passar para as configurações de borda.

  • Largura da borda esquerda aderente: 2 px
  • Cor da borda esquerda: # 854466

Transformar Traduzir

ajustar os valores de conversão de transformação no estado fixo padrão.

  • Inferior: 10vw
  • Parte inferior pegajosa: 0vw

Opacidade aderente para módulos de texto e módulo de botão

Estamos alterando a opacidade no estado padrão e pegajoso também.

  • Opacidade de estado normal: 0%
  • Opacidade de estado aderente: 100%

Configurações fixas para o módulo divisor

Dimensionamento

Agora, vamos fazer algumas configurações fixas para o módulo divisor.

  • Largura: 0px
  • Largura pegajosa: 21%

Transição

Na guia avançada, aumente o tempo de transição.

  • Duração da transição: 800ms

Efeitos de rolagem

Módulos de texto da coluna 1

A seguir, adicionaremos os efeitos de rolagem. Vamos começar aplicando-o ao módulo de texto da coluna 1. Abra as configurações do módulo de texto. Vá para a guia avançada e adicione movimento horizontal.

  • Habilitar Movimento Horizontal: Sim
  • Compensação inicial: -5
  • Deslocamento médio: 0 (em 72%)
  • Compensação final: 0

Adicionar um efeito de rolagem com aparecimento e desaparecimento gradual

Conclua as configurações dos efeitos de rolagem aplicando a configuração de aumento e diminuição gradual ao mesmo módulo.

  • Habilitar Fading In e Out: Sim
  • Opacidade inicial: 0%
  • Opacidade média: 0% (em 46%)
  • Opacidade final: 100% (em 52%)

Visão Final

Como você pode ver, criamos com sucesso um design onde mesclamos efeitos de rolagem e opções fixas. É totalmente responsivo e tem uma aparência excelente em todos os dispositivos.

Conclusão

Divi é poderoso com seus recursos básicos e pode criar layouts excelentes. Este tutorial mostra como podemos ser criativos com efeitos pegajosos e opções de rolagem e criar páginas impressionantes. Se você é um desenvolvedor, deve usar esse tipo de design para impressionar seu cliente. Além disso, compartilhe este tutorial com seus amigos e diga-nos qual tutorial você deseja a seguir. Obrigado.