Como criar um efeito de rolagem de camadas expansíveis para atrair ilustrações de aplicativos na Divi
Publicados: 2020-03-11Exibir qualquer aplicativo ou produto em seu site não precisa se limitar a imagens estáticas ou gráficos. Com os efeitos de rolagem do Divi, você pode dar vida às ilustrações do aplicativo adicionando animações sutis e eficazes que envolvem os visitantes. Neste tutorial, vamos descobrir uma maneira simples de criar um efeito de rolagem de camadas expansíveis no Divi. Basta três imagens (ou capturas de tela) com as mesmas dimensões e toda a magia integrada do construtor Divi.
Vamos começar imediatamente.
Espiada
Baixe o Layout GRATUITAMENTE
Para colocar suas mãos nos designs deste tutorial, 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!
Para importar o layout para sua página, simplesmente extraia o arquivo zip e arraste o arquivo JSON para o Divi Builder.
Vamos para o tutorial, vamos?
O que você precisa para começar
Para começar, você precisará fazer o seguinte:
- Se ainda não o fez, instale e ative o Divi Theme.
- Crie uma nova página no WordPress e use o Divi Builder para editar a página no front end (construtor visual).
- Escolha a opção “Build From Scratch”.
Depois disso, você terá uma tela em branco para começar a desenhar no Divi.
Criando o efeito de rolagem de camadas de expansão para uma ilustração de aplicativo envolvente em Divi
Adicionar linha
Vamos começar adicionando uma linha de 2 colunas (metade da metade).
Adicionar Margem Temporária à Seção
Para poder visualizar os efeitos de rolagem mais tarde, adicione algumas margens superior e inferior à seção da seguinte maneira:
- margem: 80vh superior, 80vh inferior
Adicionar 3 imagens como camadas
Vamos criar três imagens que servirão como três camadas da ilustração do aplicativo. A ideia é usar três imagens (ou capturas de tela) dos recursos do aplicativo que sejam do mesmo tamanho / dimensões para que as imagens se encaixem perfeitamente umas nas outras. Em seguida, moveremos as três camadas usando efeitos de rolagem Divi.
Vamos começar com a primeira imagem.
Criar imagem 1
Adicione um módulo de imagem à coluna esquerda.
Em seguida, carregue a primeira imagem para o módulo. Lembre-se de certificar-se de que todas as três imagens terão as mesmas dimensões. Este tem 500 px por 1050 px.
Configurações da imagem 1
Abra as configurações do módulo de imagem e atualize o seguinte:
Largura e Margem
- Largura: 300 px (desktop e tablet), 150 px (telefone)
- Alinhamento do Módulo: esquerda
- Margem: 0px inferior
Fronteira
- Cantos arredondados: 40px
- Largura da borda: 15px
- Cor da borda: #ffffff
Sombra da caixa
- Sombra da caixa: Veja a captura de tela
- Posição vertical da sombra da caixa: 0 px
- Força do desfoque de sombra da caixa: 48 px
- Cor da sombra: rgba (0,0,0,0.2)
Criar Imagem 2
Para criar a imagem 2, duplique a imagem 1.
Em seguida, atualize o módulo de imagem duplicada com uma nova imagem com as mesmas dimensões (500px por 1050px).
Imagem 2 Configurações
Em seguida, remova a borda atualizando o seguinte:
Fronteira
- Largura da borda: 0 px
Não precisamos de uma borda para esta imagem, mas precisamos substituir o espaçamento da borda por preenchimento para garantir que as imagens sejam empilhadas perfeitamente.
Preenchimento
- Preenchimento: 15px superior, 15px inferior, 15px à esquerda, 15px à direita
Posição
Em seguida, atualize a posição da imagem 2 para Absoluta. Isso fará com que a imagem se sobreponha à imagem 1 perfeitamente.
- Posição: Absoluta
Para mais informações, confira nosso post completo sobre como usar a posição absoluta no Divi.
Efeitos de rolagem
Agora é hora de adicionar o efeito de rolagem que move nossa camada (imagem 2) ao rolar a página para baixo.
Atualize os efeitos de rolagem da seguinte forma:
Na guia Movimento vertical …
- Habilitar movimento vertical: SIM
- Deslocamento inicial: 0 (na janela de visualização de 0%)
- Deslocamento médio: 0 (na janela de visualização de 0%)
- Ending Offset: -1 (em 100% viewport)
Na guia Movimento horizontal ...
- Habilitar movimento horizontal: SIM
- Deslocamento inicial: 0 (na janela de visualização de 0%)
- Deslocamento médio: 1 (na janela de visualização de 50%)
- Ending Offset: -1.5 (em 100% viewport)
Na guia Fading In and Out ...
- Habilitar Fading In e Out: SIM
- Opacidade inicial: 0% (na janela de visualização de 0%)
- Opacidade média: 100% (na janela de visualização de 10% -15%)
- Opacidade final: 70% (na janela de visualização de 30%)
Criar Imagem 3
Assim que todos os efeitos de rolagem forem adicionados à Imagem 2, estamos prontos para criar a imagem 3.
Abra o menu de configurações na parte inferior do construtor e selecione o botão Camadas para implantar o pop-up de camadas. Em seguida, duplique o módulo de imagem 2 dentro da coluna 1 para criar a imagem 3. Usar o recurso de camadas para isso é útil, pois é difícil selecionar módulos sobrepostos.
Agora abra as configurações da imagem duplicada (imagem 3) e carregue uma nova imagem. Certifique-se de mantê-lo nas mesmas dimensões (500 px por 1050 px).
Imagem 3 efeitos de rolagem
Na guia Avançado, atualize as opções de efeitos de rolagem para a imagem 3.
Na guia Movimento vertical , atualize o deslocamento do movimento vertical da seguinte maneira:
- Ending Offset: -2 (em 100% viewport)
Na guia Movimento horizontal , atualize o Movimento horizontal da seguinte forma:
- Mid Offset: 2 (em 50% viewport)
- Ending Offset: 3 (em 100% viewport)
Na guia Fading In and Out , atualize as configurações Fading In e Out da seguinte forma:
- Opacidade inicial: 5% (na janela de visualização de 0%)
- Opacidade média: 100% (na janela de visualização 30% -40%)
- Opacidade final: 100% (na janela de visualização de 50%)
Resultado
Confira o resultado até agora.
Adicionar Transform Skew à Coluna 1
Este é um ótimo efeito de aparência, mas vamos inclinar a coluna para criar um efeito mais 3D.
Abra as configurações da coluna 1 e adicione uma inclinação de transformação da seguinte maneira:
Transformar inclinação (eixos X e Y): 8 graus
Isso criará um bom efeito 3D nas camadas de expansão.
É isso!
Opcional: adicione CTA à coluna 2
Agora podemos adicionar qualquer título e botão (ou qualquer CTA) à coluna da direita com alguns efeitos de rolagem complementares. Confira o download gratuito deste layout acima para obter o mesmo CTA nesta ilustração.
Resultado final
Aqui está o resultado final.
E aqui está como ele se acumula no tablet e no telefone.
Usando imagens de um pacote de layout Divi
As imagens usadas neste tutorial são simulações do Shutterstock e também são apresentadas em nossa página de demonstração de efeitos de rolagem.
Para alterar o design para atender às suas necessidades, você pode usar imagens de nossos pacotes de layout gratuitos ou criar suas próprias capturas de tela. Aqui está um exemplo de design usando as imagens do Mobile App Layout Pack. Também adicionei um fundo gradiente para complementar as imagens claras usadas para as camadas em expansão.
Em poucos minutos, temos um design completamente diferente!
Pensamentos finais
O efeito de rolagem de camadas em expansão é uma solução elegante para mostrar aplicativos ou produtos sem ter que recorrer a técnicas CSS mais complicadas ou edição de fotos. E você pode usar essa mesma técnica para ilustrar praticamente qualquer coisa. Adoro como é fácil trocar as imagens pelas suas e distorcer toda a coleção de imagens / camadas com uma opção simples no Divi. Esperançosamente, isso lhe dará alguma inspiração que o capacitará a criar designs Divi incríveis.
Estou ansioso para ouvir de você nos comentários.
Saúde!