Como combinar sobreposições com opções fixas do Divi para criar transições sem esforço

Conforme a tecnologia continua evoluindo, o design também evolui. Mais do que nunca, você pode encontrar sites que o deixam surpreso e imaginando como foram criados. Embora os sites com interações de rolagem não sejam para todos os tipos de negócios, saber como ir além é particularmente útil para deixar uma boa impressão. Com Divi, muitas coisas já são possíveis sem ter que tocar em uma única linha de código. O tutorial de hoje ajuda você a entender o Divi de outra perspectiva. Mostraremos como combinar as opções adesivas do Divi com outras configurações integradas para criar transições sem esforço. 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. Recrie a estrutura do projeto

Adicionar nova seção

Espaçamento

Na primeira parte deste tutorial, vamos nos concentrar em recriar a estrutura de design dentro do Divi. Então, na parte dois, passaremos algum tempo examinando todas as opções fixas para obter o efeito que você pode notar na visualização deste post. Comece adicionando uma nova seção à página em que está trabalhando. Abra as configurações de seção, vá para a guia de design e adicione algum preenchimento inferior.

• Preenchimento inferior: 100vh

Adicionar linha # 1

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, vá para a guia de design e altere as configurações de dimensionamento de acordo:

• Largura: 90%
• Largura máxima: 100%

Índice Z

Atribua um índice az a esta linha também.

• Índice Z: 1

Adicionar Módulo de Imagem à Coluna

Deixe a caixa de imagem vazia

É hora de adicionar módulos, começando com um Módulo de imagem. Deixe a caixa de conteúdo vazia.

Use a imagem de fundo em vez disso

E use uma imagem de plano de fundo de sua escolha.

• Tamanho da imagem de fundo: capa

Dimensionamento

Altere a largura do módulo a seguir.

• Largura: 100%

Espaçamento

Em seguida, aplique um pouco de preenchimento personalizado superior e inferior às configurações de espaçamento.

• Top Padding: 40vh
• Preenchimento inferior: 40vh

Adicionar Módulo de Texto à Coluna

Adicionar conteúdo H2

Passe para o próximo módulo, que é um Módulo de Texto contendo algum conteúdo H2 de sua escolha.

Configurações de texto H2

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

• Fonte do título 2: Montserrat
• Alinhamento de Texto do Título 2: Centro
• Cor do texto do título 2: #ffffff
• Tamanho do texto do título 2:
  • Desktop: 10vw
  • Tablet: 14vw
  • Telefone: 15vw
• Cabeçalho 2 espaçamento entre letras: -0,5vw

Dimensionamento

Certifique-se de que o módulo também esteja “100%”.

• Largura: 100%

Posição

E reposicione o módulo na guia avançada.

• Posição: Absoluta
• Localização: Centro

Adicionar linha # 2

Estrutura da Coluna

Para a próxima linha. Use a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar módulos ainda, abra as configurações de linha, vá para a guia de design e altere as configurações de dimensionamento da seguinte forma:

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Largura: 90%
• Largura máxima: 100%

Índice Z

Atribua um índice az a esta linha também.

• Índice Z: 2

Espaçamento da coluna 1

Conclua as configurações de linha abrindo as configurações da primeira coluna e atribuindo algum preenchimento esquerdo e direito.

• Preenchimento esquerdo: 5%
• Preenchimento direito: 5%

Adicionar Módulo de Texto à Coluna 1

Adicionar conteúdo H3

Agora que as configurações de linha estão definidas, é hora de adicionar módulos. Adicione um Módulo de Texto à coluna 1 com algum conteúdo H3 de sua escolha.

Configurações de texto H3

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

• Fonte do título 3: Montserrat
• Estilo da fonte do título 3: sublinhado
• Cor do sublinhado do título 3: #ffffff
• Estilo de sublinhado do Título 3: Sólido
• Cor do texto do título 3: #ffffff
• Tamanho do texto do título 3:
  • Desktop: 4vw
  • Tablet e telefone: 10vw
• Cabeçalho 3 espaçamento entre letras: -3 px

Espaçamento

Adicione um pouco de preenchimento correto em tamanhos de tela menores.

• Preenchimento direito: 20% (apenas tablet e telefone)

Adicionar Módulo de Texto à Coluna 2

Adicionar conteúdo

Adicione outro Módulo de Texto à coluna 2 com algum conteúdo de descrição de sua escolha.

Cor de fundo

Altere a cor do plano de fundo a seguir.

• Cor de fundo: #ffffff

Configurações de texto

Em seguida, modifique as configurações de texto da seguinte forma:

• Fonte do texto: Playfair Display
• Estilo da fonte do texto: itálico
• Tamanho do texto:
  • Desktop: 1.6vw
  • Tablet: 3vw
  • Telefone: 4vw
• Altura da linha de texto: 1,5em

Espaçamento

Aplique alguns valores de preenchimento personalizados também.

• Enchimento superior: 10vh
• Preenchimento inferior: 10vh
• Preenchimento esquerdo: 10%
• Preenchimento direito: 10%

Adicionar Módulo de Botão à Coluna 2

Adicionar cópia

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

Configurações de botão

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

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão:
  • Desktop: 1.2vw
  • Tablet: 2,5vw
  • Telefone: 3,5vw
• Cor do texto do botão: # 000000
• Cor de fundo do botão: #ffffff
• Largura da borda do botão: 0 px
• Raio da borda do botão: 0 px
• Fonte do botão: Montserrat

• Estilo da fonte do botão: sublinhado
• Cor do sublinhado do botão: # 000000
• Estilo de sublinhado do botão: sólido

Espaçamento

Adicione alguns valores de preenchimento personalizados também.

• Enchimento superior: 20 px
• Preenchimento inferior: 20 px
• Preenchimento esquerdo: 50 px
• Preenchimento direito: 50 px

Posição

E reposicione o módulo na guia avançada.

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

2. Aplique efeitos pegajosos

Módulo de imagem na linha 1

Configurações fixas

Agora que construímos a base de nosso design, é hora de começar a aplicar os efeitos de aderência personalizados. Abra o Módulo de imagem na linha 1 e torne o módulo aderente da seguinte forma:

• Posição pegajosa: grudar no topo
• Limite inferior de aderência: seção
• Compensação dos elementos aderentes circundantes: Não

Dimensionamento pegajoso

Uma vez que as configurações fixas tenham sido aplicadas, podemos alterar os estilos fixos de nosso módulo também. A primeira coisa que faremos é alterar a largura em um estado fixo.

• Largura pegajosa: 80%

Espaçamento pegajoso

A seguir, modificaremos o preenchimento adesivo superior e inferior.

• Preenchimento superior adesivo: 50vh
• Preenchimento inferior pegajoso: 50vh

Fundo Gradiente Pegajoso

Aplicaremos um fundo gradiente aderente ao nosso módulo também.

• Cor 1: # 00336b
• Cor 2: rgba (41,196,169,0)
• Tipo de gradiente: Linear
• Direção do gradiente: 90 graus
• Colocar gradiente acima da imagem de fundo: Sim

Transição

E para garantir uma transição suave, aumentaremos a duração da transição do módulo.

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

Coluna 2 na linha 2

Coluna 2 Configurações fixas

A seguir, também tornaremos a segunda coluna de nossa segunda linha fixa.

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

Módulo de Texto na Coluna Fixa

Cor de fundo pegajosa

Agora que a coluna 2 da linha 2 se tornou fixa, podemos aplicar alguns estilos fixos ao Módulo de Texto dentro desta coluna. Comece alterando a cor de fundo em um estado pegajoso.

• Cor de fundo pegajosa: # 333333

Cor do Texto Fixo

Em seguida, modifique a cor do texto em um estado fixo.

• Cor do texto aderente: #ffffff

Transição

E conclua as configurações do módulo aumentando a duração da transição na guia avançada. É isso!

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

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, mostramos como combinar sobreposições com as opções fixas do Divi para criar transições sem esforço. Depois de obter a abordagem que foi usada neste tutorial, você será capaz de criar infinitas variações diferentes. 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.