Criação de revelações de rolagem em linha com Divi
Publicados: 2019-08-14Todas as semanas, fornecemos pacotes de layout Divi novos e gratuitos que você pode usar em seu próximo projeto. Para um dos pacotes de layout, também compartilhamos um caso de uso que o ajudará a levar seu site para o próximo nível.
Esta semana, como parte de nossa iniciativa de design Divi em andamento, vamos mostrar a você como criar belas revelações de rolagem em linha usando o DJ Layout Pack. Essa é uma ótima maneira de chamar a atenção para um contêiner de coluna específico em seu site, sem precisar adicioná-lo à página várias vezes. Adicionaremos um efeito legal de pairar / liberar à técnica que ajudará os visitantes a segurar o contêiner de coluna e soltá-lo sempre que quiserem. Você também poderá baixar o arquivo JSON gratuitamente!
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 de revelação de rolagem embutida GRATUITAMENTE
Para colocar suas mãos no layout de revelação de rolagem in-line 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.
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.
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!
Vamos começar a recriar!
Crie uma nova página usando a página inicial do DJ Layout Pack
Adicionar nova página
Para este tutorial de caso de uso, vamos usar um dos layouts de DJ. Comece criando uma nova página, dando um título a ela e mudando para o Visual Builder.
Carregar página inicial do DJ
Continue carregando o layout da página inicial do DJ em sua página.
Adicione um valor de índice Z superior a cada seção da página
Adicionar Índice Z Superior à Seção Hero
Faremos uma coluna específica fixa e permitiremos que ela seja exibida onde quisermos. O contrário também é verdadeiro; queremos escondê-lo onde não queremos que apareça. Para fazer isso, vamos dar a cada seção da página (além daquela em que a coluna está localizada, que é a seção 2 da página) um valor de índice z mais alto. Comece abrindo a seção do herói e aumente o índice z nas configurações de visibilidade.
- Índice Z: 2
Copiar Índice Z
Depois de adicionar o índice z, você pode copiá-lo.
Colar em outras seções na página, exceto na seção 2
E cole-o em todas as outras seções da página, exceto na seção # 2 (a seção que contém a coluna que transformaremos em uma exibição de rolagem embutida).
Alterar seção # 2
Coloque o conteúdo da coluna em linhas separadas
Alterar estrutura da coluna da linha
Vamos começar modificando a segunda seção, começando com a estrutura da coluna da linha.
Linha Duplicada
Continue clonando a linha.
Excluir Módulos em Linhas
Remova os Módulos de Texto e Botão da primeira linha e os Módulos de Áudio da segunda linha.
Modifique a linha # 1 na seção # 2
Remova alguns módulos de áudio (para caber em tamanhos de tela menores)
Nas próximas etapas, faremos com que a coluna que contém os Módulos de Áudio seja corrigida. Agora, para ter certeza de que a coluna se ajusta à altura da janela de visualização de telas menores, precisaremos remover alguns módulos de áudio.
Adicionar Margem Inferior à Linha
Continue abrindo as configurações de linha, indo para a guia de design e adicionando algum preenchimento inferior. Precisaremos desse espaço para permitir que a coluna seja revelada na rolagem posteriormente no tutorial.
- Margem inferior: 700px
Abrir configurações de coluna
É hora de começar a transformar a coluna em uma revelação de rolagem embutida! Abra as configurações da coluna.
Hover Box Shadow
Em seguida, vá para a guia de design e altere alguns valores de sombra da caixa ao pairar.
- Força do desfoque de sombra da caixa: 150 px
- Cor da sombra: rgba (0,0,0,0.55)
Escala de Transformação Hover
Aumente o tamanho da coluna ao passar o mouse também modificando os valores da escala de transformação.
- Inferior: 110%
- Certo: 110%
Elemento Principal Padrão
Para tornar a coluna fixa, vamos adicionar algumas linhas de código CSS ao elemento principal da coluna.
position: fixed; bottom: 100px; max-width: 800px !important; width: 80% !important;
Hover Main Element
Certifique-se de adicionar a linha CSS de posição fixa ao elemento principal de foco também. Isso evitará que a coluna pisque.
position: fixed;
Índice Z padrão
Agora, em circunstâncias normais, queremos que o módulo apareça abaixo de todo o conteúdo da página. Para garantir que isso aconteça, vamos alterar o índice z da coluna.
- Índice Z: 0
Hover Z Index
Ao passar o mouse, no entanto, queremos que a coluna sobreponha todo o conteúdo da página. Assim que alguém libera a coluna, ela volta ao seu lugar atrás de todo o conteúdo da página. Altere o índice z ao passar o mouse de acordo:
- Índice Z: 10
Modifique a linha # 2 na seção # 2
Adicionar Preenchimento Superior à Coluna
Para fins estéticos, vamos abrir a coluna na segunda linha da seção 2 e adicionar algum preenchimento superior personalizado.
- Enchimento superior: 80px
Adicionar margem inferior personalizada a seções em toda a página
Localizar seção
Abra as configurações da seção
Agora que modificamos a coluna de revelação de rolagem embutida, temos que criar algum espaço para que ela apareça. Fizemos isso para a linha em que ela já está localizada (preenchimento inferior de 700 px), mas permitiremos que a coluna seja revelada em outros pontos da página também. Abra as configurações de seção da seguinte seção:
Adicionar Margem Inferior
Vá para as configurações de espaçamento e adicione alguma margem inferior. Adicionar a margem inferior criará um espaço vazio na página que permitirá que a coluna de baixo índice z apareça.
- Margem inferior: 700px
Localizar seção
Abra as configurações da seção
Abra a seguinte seção:
Adicionar Margem Inferior
E adicione alguma margem inferior aqui também.
- Margem inferior: 700px
Remova o acolchoamento da seção em excesso
Remova o acolchoamento inferior da seção 2
Agora, a única coisa que nos resta fazer é otimizar a maneira como nosso design corresponde à revelação do scroll embutido. Abra a segunda seção da página e remova o preenchimento inferior.
- Inferior: 0px
Localizar seção
Abra as configurações da seção
Abra as seguintes configurações de seção a seguir:
Remova o acolchoamento inferior e adicione o acolchoamento superior
Adicione um pouco de preenchimento superior e remova o preenchimento inferior.
- Enchimento superior: 100px
- Preenchimento inferior: 0 px
Localizar seção
Abra as configurações da seção
Vamos para a última seção. Abra as configurações da seção.
Remover o acolchoamento superior
Remova o enchimento superior e pronto!
- Preenchimento superior: 0 px
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 criar revelações de rolagem em linha com o Divi e o DJ Layout Pack. Essa é uma ótima maneira de adicionar interação ao seu site. Esperamos que este tutorial inspire você a criar suas próprias revelações de rolagem embutidas fixas também! Se você tiver dúvidas ou sugestões, certifique-se de 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.