Como criar uma máscara de fundo pegajoso com Divi

As opções adesivas do Divi permitem que você crie uma tonelada de designs diferentes para seus sites. A postagem de hoje adiciona outro tutorial à lista de coisas que você pode alcançar e, com sorte, ajudará a despertar a criatividade. Vamos mostrar como criar uma máscara de fundo pegajoso e fazer com que essa máscara siga o visitante na rolagem até o final da seção. Este tutorial combina as opções pegajosas do Divi com os modos de mistura de filtro. 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 Design no Divi

Adicionar nova seção

Imagem de fundo

Comece adicionando uma nova seção à página em que está trabalhando. Faça upload de uma imagem de plano de fundo de sua escolha.

• Tamanho da imagem de fundo: capa

Espaçamento

Vá para a guia de design da seção e remova todos os preenchimentos padrão superior e inferior nas configurações de espaçamento.

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

Transbordamentos

Oculte os overflows da seção na próxima guia.

• Excesso horizontal: oculto
• Estouro vertical: oculto

Adicionar linha # 1

Estrutura da Coluna

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

Dimensionamento

Sem adicionar módulos, abra as configurações de linha e altere as configurações de dimensionamento de acordo:

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

Espaçamento

Remova também todo o preenchimento padrão superior e inferior.

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

Filtros

Também estamos adicionando um modo de mesclagem a esta linha. Este modo de mesclagem nos ajudará a criar uma máscara posteriormente no tutorial.

• Modo de mistura: tela

Índice Z

Para garantir que essa linha permaneça abaixo da segunda linha que adicionaremos à seção, estamos modificando o índice z na guia avançada.

• Índice Z: 9

Configurações de coluna

A seguir, vamos abrir as configurações da coluna.

Cor de fundo

Estamos usando uma cor de fundo totalmente branca. Qualquer outra cor que você usar aqui aparecerá na seção da imagem de plano de fundo, portanto, é importante ficar com uma cor totalmente branca.

• Cor de fundo: #ffffff

CSS do elemento principal

Também estamos adicionando um valor de altura ao elemento principal na guia avançada. Uma vez que tornamos a linha fixa, essa altura garantirá que a coluna cubra toda a imagem de plano de fundo da seção o tempo todo.

height: 100vh;

Adicionar Módulo de Texto à Linha

Deixe a caixa de conteúdo vazia

Depois de concluir as configurações de linha, adicione um Módulo de texto à sua coluna. Deixe a caixa de conteúdo vazia. Em vez disso, estamos usando este módulo para criar uma forma que revela uma parte da imagem de fundo da seção.

Cor de fundo

Para permitir que o modo de mesclagem mostre um pedaço da imagem de fundo da seção, estamos usando uma cor de fundo mais escura para este módulo.

• Cor de fundo: # 0b3835

Dimensionamento

Em seguida, navegaremos até a guia de design e alteraremos as configurações de dimensionamento da seguinte maneira:

• Largura:
  • Desktop: 20vw
  • Tablet e telefone: 70vw
• Altura:
  • Desktop: 30vh
  • Tablet e telefone: 10vh

Espaçamento

Estamos adicionando alguma margem superior também.

• Margem superior: 3vh

Fronteira

E incluiremos alguns cantos arredondados.

• Todos os cantos: 15px

Adicionar linha # 2

Estrutura da Coluna

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

Dimensionamento

Sem adicionar módulos ainda, abra as configurações de linha e faça as seguintes alterações nas configurações de dimensionamento:

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

Índice Z

Aumente o índice z da linha também. Isso ajudará a garantir que o conteúdo da linha permaneça no topo da linha anterior.

• Índice Z: 12

Adicionar Módulo de Texto à Linha

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 H2

Defina o estilo das configurações de texto H2 da seguinte maneira:

• Fonte do título 2: Playfair Display
• Alinhamento de Texto do Título 2: Centro
• Cor do texto do título 2: # 0b3835
• Tamanho do texto do título 2:
  • Desktop: 150px
  • Tablet e telefone: 45px
• Altura da linha do título 2: 1,2em

Dimensionamento

Em seguida, navegue até as configurações de dimensionamento e aplique as seguintes configurações:

• Largura máxima: 980 px
• Alinhamento do Módulo: Centro

Espaçamento

Inclua também alguma margem superior negativa.

Adicionar Módulo de Botão à Linha

Adicionar cópia

O próximo e último módulo de que precisamos nesta linha é um Módulo de Botão. Adicione alguma cópia de sua escolha.

Alinhamento de Botão

Vá para a guia de design do módulo e altere o alinhamento do botão.

• Alinhamento do botão: Centro

Configurações de botão

Em seguida, acesse as configurações do botão e aplique os seguintes estilos:

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão: 15px
• 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: Montserrat
• Peso da fonte do botão: Semi negrito
• Estilo da fonte do botão: maiúscula

Espaçamento

Estamos adicionando algumas margens personalizadas e valores de preenchimento às configurações de espaçamento também.

• Margem inferior: 60vh
• Enchimento superior: 15px
• Preenchimento inferior: 15 px
• Preenchimento esquerdo: 40px
• Preenchimento direito: 40px

2. Aplique efeitos pegajosos

Abrir linha # 1

Agora que construímos a base de nosso design, é hora de aplicar os estilos fixos. Abra as configurações da primeira linha.

Aplicar opções fixas

Navegue até a guia avançada e aplique as seguintes configurações fixas:

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

Opções fixas do módulo de texto

Agora que a linha ficou fixa, podemos aplicar estilos fixos ao Módulo de Texto dentro da linha. Abra as configurações do módulo.

Dimensionamento pegajoso

Em seguida, navegue até as configurações de dimensionamento e aplique os seguintes valores de dimensionamento fixos:

• Largura aderente: 80vw
• Altura pegajosa: 90vh

Duração da transição

Por último, mas não menos importante, navegue até a guia avançada e aumente a duração da transição. É isso!

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

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, mais uma vez, mostramos como ser criativo com as opções pegajosas do Divi. Mais especificamente, mostramos como combinar as configurações de filtros do Divi e as opções adesivas para criar uma máscara de fundo adesiva. Você também pode 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.