Como criar uma transição de imagem separável com efeitos de rolagem de Divi

Os efeitos de rolagem do Divi nos permitem criar animações de transição excepcionais que podem impressionar os visitantes com um design atraente. As imagens, em particular, podem mostrar o poder desses efeitos de rolagem de maneiras surpreendentes. Neste tutorial, vamos explicar passo a passo como criar uma transição de imagem separável com os efeitos de rolagem do Divi. Este efeito foi originalmente apresentado na página de demonstração. O efeito envolve fatiar imagens com antecedência usando um editor de fotos como o Photoshop (é muito fácil de fazer). Depois que as imagens são cortadas, tudo o que precisamos fazer é adicioná-las ao Divi e usar os efeitos de rolagem integrados para fazer a mágica acontecer.

Vamos começar.

Espiada

Aqui está uma olhada no design para hoje.

Você também pode ver a demonstração original ao vivo do design na página de demonstração sob o título “O exercício não precisa ser entediante”.

Baixe o Layout Divi de Transição de Imagem Breakaway GRATUITAMENTE

Para colocar suas mãos no layout 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.

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!

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:

1. Se ainda não o fez, instale e ative o Divi Theme.
2. Crie uma nova página no WordPress e use o Divi Builder para editar a página no front end (construtor visual).
3. Escolha a opção “Build From Scratch”.

Depois disso, você terá uma tela em branco para começar a desenhar no Divi.

Além da configuração Divi acima, você precisará de:

• Duas imagens (pelo menos 1080px por 540px)
• Um software de edição de fotos como o Photoshop para fatiar as imagens antes de adicioná-las ao Divi.

Parte 1: Cortando as imagens no Photoshop

Antes de começarmos a criar nosso design em Divi, precisamos fatiar nossas duas imagens que serão usadas para o efeito de rolagem de transição separável. Ambas as imagens precisarão ser cortadas para que tenham exatamente 1080px por 540px. Depois disso, eles precisam ser fatiados em 8 partes iguais (4 de diâmetro, 2 de baixo). Quando estiver pronto, podemos salvá-los em nosso computador e fazer o upload das fatias de imagem para nosso site. Vamos começar com a primeira imagem.

Imagem # 1

Cortando a imagem

A primeira coisa que precisamos fazer é cortar a imagem para que tenha as dimensões exatas de 1080px por 540px. Você pode usar qualquer software de edição de imagem para fazer isso. No Photoshop, você pode usar a ferramenta de corte.

Cortando a imagem

Em seguida, clique para usar a ferramenta de fatia e selecione a imagem inteira. Clique com o botão direito na fatia / imagem e selecione a opção Divide Slice.

Na caixa de opção Divide Slice, atualize o seguinte:

Divida horizontalmente em:

• 2 fatias para baixo, uniformemente espaçadas
• 270 pixels por fatia

Divida verticalmente em:

• 4 fatias de diâmetro, espaçadas uniformemente
• 270 pixels por fatia

Em seguida, clique em OK.

Salvando as fatias da imagem

Agora temos uma imagem dividida em 8 blocos iguais, cada um deles com 270px por 270px.

Para salvar as fatias da imagem, navegue até Arquivo> Exportar> Salvar para a web.

Em seguida, escolha o formato do arquivo e clique em Salvar.

Na caixa pop-up, certifique-se de atualizar o seguinte:

• Salvar como: [insira o nome da (s) imagem (ns)]
• Formato: apenas imagens
• Configurações: configurações padrão
• Fatias: todas as fatias

Em seguida, clique em Salvar.

Agora todas as suas fatias de imagem serão salvas no computador, prontas para serem carregadas no Divi.

Imagem 2

Para criar a segunda imagem necessária para esse efeito de rolagem de transição de imagem separável, devemos seguir o mesmo processo (recortar, fatiar e salvar) que usamos para criar a primeira imagem.

Girar fatias de imagem

No entanto, devido à forma como o efeito de rolagem giratório funciona, cada uma das fatias da imagem que constituem a segunda imagem precisará ser girada 90 graus para a esquerda ou para a direita.

Para girar uma imagem, você pode usar o Photoshop ou o software de edição de imagem embutido em seu sistema operacional (você pode até usar a galeria de mídia WordPress para editar e girar as imagens depois de carregá-las em seu site).

Aqui está um guia de como as imagens devem ser giradas em sua posição original ao fatiar a imagem.

Aqui está a imagem original.

Veja como as fatias da imagem devem ser giradas antes de enviá-las ao seu site.

Isso é necessário para que possamos eventualmente obter o seguinte efeito de rolagem.

Agora que as duas imagens foram cortadas, fatiadas, salvas e giradas, você está pronto para adicioná-las ao seu site Divi. Você deve ter um total de 16 imagens (8 da imagem um e 8 da imagem 2).

Parte 2: Criando o efeito de rolagem de transição de imagem separável em Divi

Assim que as fatias da imagem estiverem prontas, podemos começar o processo de design no Divi. Veja como fazer.

Adicionar linha # 1

Para começar, crie uma linha de quatro colunas.

Configurações de linha

Abra as configurações de linha e atualize o seguinte:

• Largura da calha: 1
• Largura máxima: 1080 px (desktop), 540 px (tablet e telefone)
• Preenchimento: 0 px superior, 0 px inferior
• Excesso horizontal: visível
• Excesso vertical: visível

Atualizar o preenchimento da seção

Como vamos posicionar nossa segunda linha absolutamente em cima da primeira linha, precisamos remover o preenchimento superior (e inferior) da seção para que ele não altere a posição da segunda linha. Abra as configurações da seção e atualize o seguinte:

• Preenchimento: 0 px superior, 0 px à esquerda

Adicionando as Imagens

Na primeira linha, vamos adicionar cada uma das 8 imagens / fatias que compõem a primeira imagem. As imagens devem ser posicionadas dentro das colunas exatamente como foram cortadas no photoshop (4 de largura e 2 para baixo).

Aqui está uma ilustração de cada imagem etiquetada com um número. É assim que deve ficar depois que todas as imagens forem adicionadas à linha.

Imagem # 1

Adicione o primeiro módulo de imagem à coluna 1.

Em seguida, carregue a primeira fatia da imagem para o módulo.

Efeitos de rolagem

Na guia avançada, adicione os seguintes efeitos de rolagem à imagem.

• Habilitar Fading In e Out: SIM
• Opacidade inicial: 100% (na janela de visualização de 20%)
• Opacidade média: 100% (na janela de visualização de 20%)
• Opacidade final: 0% (na janela de visualização de 50%)

Clique na guia Escala e atualize o seguinte:

• Habilitar aumento e redução de escala: SIM
• Escala inicial: 100% (na janela de visualização de 20%)
• Escala média: 70% (em 32% - janela de visualização 48%)
• Escala final: 100% (na janela de visualização de 60%)

Clique na guia girar e atualize o seguinte:

• Habilitar rotação: SIM
• Rotação inicial: 0 graus (na janela de visualização de 0%)
• Rotação média: 0 graus (na janela de visualização de 20%)
• Rotação final: -90 graus (na janela de visualização de 60%)

O efeito de rolagem será semelhante a este ao rolar a página para baixo.

Imagem 2

Para criar a imagem 2, duplique a imagem 1 e coloque a duplicata na coluna 2.

Atualize o módulo de imagem duplicada com a imagem # 2.

Atualizar efeito de rolagem

Manteremos a maioria dos mesmos efeitos de rolagem transportados da imagem # 1. A única coisa que precisamos mudar é a rotação. Vá para a guia avançado e altere a rotação final para 90 graus (em vez de -90 graus) para que gire na direção oposta.

• Rotação final: 90 graus

Imagem # 3

Para criar a imagem nº 3, copie e cole a imagem nº 1 na coluna 3 e, a seguir, mude a imagem para a imagem nº 3.

Imagem # 4

Para criar a imagem nº 4, copie e cole a imagem nº 2 na coluna 4 e atualize a imagem para a imagem nº 4.

Imagem # 5

Para criar a imagem 5, duplique a imagem 1 de forma que a duplicata fique diretamente abaixo da coluna 1.

Atualize a imagem para a imagem # 5. Em seguida, atualize o efeito de rolagem Fading In e Out da seguinte maneira:

• Opacidade inicial: 100% (na janela de visualização de 0%)
• Opacidade média: 100% (na janela de visualização de 0%)
• Opacidade final: 0% (na janela de visualização de 40%)

Em seguida, atualize o efeito de rolagem Scaling Up e Down como segue:

• Escala inicial: 100% (na janela de visualização de 0%)
• Escala média: 70% (em 12% - 28% janela de visualização)
• Escala final: 100% (na janela de visualização de 40%)

E, finalmente, atualize o efeito de rolagem giratória da seguinte maneira:

• Rotação inicial: 0 graus (na janela de visualização de 0%)
• Rotação média: 0 graus (na janela de visualização de 0%)
• Rotação final: 90 graus (na janela de visualização de 40%)

Imagem # 6

Para criar a imagem nº 6, duplique a imagem nº 5 e mova-a para a coluna 2 (na imagem nº 2).

Atualize o módulo de imagem com a imagem 5. Em seguida, ajuste o efeito de rolagem giratória para a direção oposta (-90 graus) da seguinte forma:

• Rotação final: -90 graus

Imagem # 7

Para criar a imagem nº 7, duplique a imagem nº 5 e mova-a para a imagem nº 3 na coluna 3. Em seguida, atualize o módulo de imagem duplicada com a imagem nº 7.

Imagem # 8

Para criar a imagem nº 8, duplique a imagem nº 6 e mova-a para a imagem nº 4 na coluna 4. Em seguida, atualize o módulo de imagem duplicada com a imagem nº 8.

Agora todas as fatias da imagem foram adicionadas à linha # 1 com o efeito de rolagem de quebra.

Aqui está o que o resultado parece até agora.

Adicionar linha # 2

A segunda linha de imagens não levará muito tempo para ser projetada. Tudo o que precisamos fazer é duplicar a linha # 1, atualizar todas as imagens com as corretas e, em seguida, atribuir a ela uma posição absoluta.

Vá em frente e duplique a linha # 1.

Atualizar imagens da linha 2

Lembre-se das imagens giradas que criamos para a imagem # 2. Agora, tudo o que precisamos fazer é enviar cada um deles para o local correto do módulo de imagem na linha # 2.

Atualizar efeitos de rolagem de imagem

Assim que as novas imagens giradas estiverem no lugar, precisamos remover o efeito de rolagem Fading In e Out de todas as imagens na linha # 2.

Faça isso, implante o modo de visualização de wireframe e use a seleção múltipla para selecionar todas as 8 imagens na linha # 2. Em seguida, abra as configurações de uma das imagens selecionadas para implantar as configurações do Elemento. Na opção de efeito de rolagem Fading In e Out, atualize o seguinte:

• Habilitar Fading In e Out: NÃO

Posição Linha 2

Nossa última etapa é posicionar a linha # 2 diretamente atrás da linha # 1. Uma maneira fácil de fazer isso é fornecer a linha e a posição absoluta. Abra as configurações da linha 2 e atualize o seguinte:

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

Resultado final

Para ver o resultado, você pode precisar dar à sua seção uma quantidade significativa de margens superior e inferior ou criar outras seções acima e abaixo do desenho. Isso lhe dará o espaço de que você precisa para ver o efeito de rolagem corretamente.

Vamos conferir o resultado final.

E aqui está no celular.

Pensamentos finais

Essa transição de imagem separatista é um design impressionante por si só, mas você pode usá-la facilmente para transmitir uma mensagem do tipo de transformação aos visitantes (como antes e depois). E você também não precisa se contentar com esse design. Sinta-se à vontade para experimentar diferentes efeitos de rolagem para criar transições de imagem ainda mais incríveis. Tem alguma ideia?

Estou ansioso para ouvir de você nos comentários.

Saúde!