Como manter os módulos fixos em seu contêiner de coluna com Divi

Ao mostrar várias frases de chamariz em sua página, pode ajudar a criar um efeito de rolagem interativo que une diferentes elementos. Uma maneira de abordar isso é transformar os módulos em elementos fixos enquanto eles se movem em seu contêiner de coluna. No tutorial de hoje, mostraremos como criar um belo design que lida com essa técnica e você também poderá baixar o arquivo JSON gratuitamente!

Vamos lá.

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Área de Trabalho

Tablet e celular

Baixe o design de contêiner de coluna pegajosa GRATUITAMENTE

Para colocar as mãos no design de recipiente de coluna pegajoso 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!

Inscreva-se no nosso canal no Youtube

Vamos começar a recriar!

Adicionar nova seção

Comece adicionando uma nova seção regular à página em que você está trabalhando.

Espaçamento

Abra as configurações da seção e modifique o preenchimento superior e inferior em diferentes tamanhos de tela.

• Preenchimento superior: 7vw (desktop), 10vw (tablet), 15vw (telefone)
• Preenchimento inferior: 20vw (desktop), 7vw (tablet), 10vw (telefone)

Adicionar nova linha

Estrutura da Coluna

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

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e permita que a linha ocupe toda a largura da seção. Também é muito importante habilitar a opção 'Equalize a altura das colunas'. Ao fazer isso, você criará algum espaço vazio nas colunas que permitirá que os módulos fixos se movam livremente enquanto rola a página para baixo.

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

Preenchimento superior da coluna 2

Abra as configurações da coluna 2 a seguir e adicione algum preenchimento superior na área de trabalho.

• Preenchimento superior: 20vw (desktop), 0vw (tablet e telefone)

Preenchimento superior da coluna 3

Adicione um valor de preenchimento superior personalizado à terceira coluna também.

• Preenchimento superior: 40vw (desktop), 0vw (tablet e telefone)

Coluna 4 acolchoamento superior

E conclua as configurações da linha adicionando um valor de preenchimento superior à coluna 4 também.

• Preenchimento superior: 60vw (desktop), 0vw (tablet e telefone)

Adicionar CTA à coluna 1

Adicionar conteúdo

É hora de começar a adicionar módulos! O primeiro módulo de que precisamos na coluna 1 é um Módulo CTA. Insira algum conteúdo de sua escolha.

Ligação

Adicione um link para o botão também. Isso permitirá que o botão apareça no design.

• URL do link do botão: #

Cor de fundo

Em seguida, altere a cor de fundo do módulo.

• Cor de fundo: #ffffff

Configurações de texto

Vá para a guia de design e altere as configurações gerais de texto.

• Alinhamento de Texto: Centro
• Cor do Texto: Escuro

Configurações de texto do título

Altere as configurações de texto do título também.

• Nível do título do título: H3
• Fonte do Título: Espectral
• Cor do texto do título: # 000000
• Tamanho do texto do título: 2vw (desktop), 4vw (tablet), 6vw (telefone)

Configurações do corpo do texto

Junto com as configurações do corpo do texto.

• Fonte do corpo: Fira Sans
• Peso da fonte do corpo: leve
• Cor do corpo do texto: # 000000
• Tamanho do corpo do texto: 1vw (desktop), 2vw (tablet), 3vw (telefone)
• Altura da linha corporal: 1,8em

Configurações de botão

Não se esqueça de estilizar o botão do seu Módulo CTA também.

• 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: # 444eff
• Largura da borda do botão: 0 px

• Raio da borda do botão: 50vw
• Fonte do botão: Fira Sans

• Preenchimento superior: 1vw (desktop), 2vw (tablet), 3vw (telefone)
• Preenchimento inferior: 1vw (desktop), 2vw (tablet), 3vw (telefone)
• Preenchimento esquerdo: 3vw (desktop), 7vw (tablet), 13vw (telefone)
• Preenchimento direito: 3vw (desktop), 7vw (tablet), 13vw (telefone)

Espaçamento

Em seguida, vá para as configurações de espaçamento e adicione um pouco de preenchimento personalizado superior e inferior.

• Acolchoamento superior: 8vw
• Preenchimento inferior: 8vw

Fronteira

Adicione alguns cantos arredondados ao módulo também.

• Cantos arredondados: 1vw (todos os cantos)

Sombra da caixa

Conclua o design do módulo adicionando uma sombra de caixa sutil.

• Posição horizontal da sombra da caixa: 10 px
• Força do desfoque de sombra da caixa: 50 px
• Cor da sombra: rgba (0,0,0,0,08)

Classe CSS

Agora, para fazer o efeito pegajoso de rolagem funcionar, precisaremos adicionar algumas linhas de código CSS no final deste tutorial. Na preparação para isso, adicionaremos uma classe CSS ao Módulo CTA.

• Classe CSS: sticky-cta

Adicionar Módulo de Imagem à Coluna 1

Enviar Imagem

Para o próximo e último módulo, precisamos na coluna 1, que é um Módulo de Imagem. Faça upload de uma imagem PNG de sua escolha.

Alinhamento

Altere o alinhamento da imagem a seguir.

• Alinhamento de imagem: centro

Dimensionamento

Certifique-se de forçar a largura total no módulo também.

• Forçar largura total: Sim

Espaçamento

Conclua as configurações do módulo acessando as configurações de espaçamento e adicionando alguns valores de espaçamento personalizados em diferentes tamanhos de tela.

• Margem superior: -5vw (tablet e telefone)
• Margem inferior: -12vw (desktop), 5vw (tablet e telefone)
• Preenchimento esquerdo: 3vw (desktop), 10vw (tablet), 25vw (telefone)
• Preenchimento direito: 3vw (desktop), 10vw (tablet), 25vw (telefone)

Clone os dois módulos três vezes e coloque nas colunas restantes

Depois de concluir os dois módulos na coluna 1, você pode clonar os dois três vezes e colocar as duplicatas nas colunas restantes da linha.

Mudar imagens

Certifique-se de alterar a imagem em cada Módulo de imagem duplicado.

Alterar o conteúdo da CTA e as cores de fundo do botão

Altere o conteúdo do CTA junto com as cores de fundo do botão também.

• Módulo CTA # 2: # 89ffb4
• Módulo CTA nº 3: # ff89f1
• Módulo CTA 4: # ffd389

Adicionar classe CSS aos módulos de imagem nas colunas 1, 2 e 3

Agora, para garantir que o efeito aderente funcione nas imagens também, precisaremos adicionar uma classe CSS aos Módulos de imagem nas colunas 1, 2 e 3.

• Classe CSS: sticky-image

Adicionar linha # 2

Estrutura da Coluna

A única coisa que falta fazer é adicionar o código CSS. Para fazer isso, adicione uma nova linha.

Adicionar Módulo de Código com Código CSS

Adicione um Módulo de Código à linha, insira o código CSS abaixo e pronto!

<style>
@media only screen and (min-width: 980px) {
.sticky-cta {
position: sticky;
position: -webkit-sticky;
top: 8vw !important;
}

.sticky-image {
position: sticky;
position: -webkit-sticky;
top: 28vw !important;
}
}</style>

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

Tablet e celular

Pensamentos finais

Nesta postagem, mostramos como manter os módulos fixos em seu contêiner de coluna. Usar a técnica pode resultar em alguns efeitos de rolagem impressionantes que permitem enfatizar as várias frases de chamariz em sua página. 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.