Adicionar efeitos 3D a GIFs e vídeos HTML5 para exibir animações exclusivas de produtos em Divi
Publicados: 2019-06-20GIFs animados e vídeos HTML5 podem ser ótimos para animar como um produto funciona em seu site. Essas animações curtas comunicam informações valiosas ao visitante de uma forma que é mais facilmente digerida do que um vídeo normal. Adicionar este tipo de GIFs e vídeos HTML5 pode ser feito facilmente com Divi. E com um pouco de criatividade, você pode adicionar efeitos 3D para animações exclusivas do produto.
Neste tutorial, vou mostrar como adicionar efeitos 3D a vídeos GIFs e HTML5 para exibir animações de produto exclusivas em Divi. Este design funciona muito bem para quem procura um layout criativo para mostrar um produto ou serviço em destaque. Para fazer isso, primeiro precisamos entender como adicionar GIFs e incorporações de vídeo HTML5 à sua página usando Divi. Então, poderemos usar as opções de transformação do Divi para posicionar e girar o GIF (ou vídeo) no espaço 3D. Para terminar, usaremos algumas técnicas de design Divi para criar um belo layout de seção para combinar com os GIFs e vídeos 3D.
Vamos começar.
Espiada
Aqui está uma prévia do design que construiremos neste tutorial. O design é semelhante ao usar um GIF e um vídeo HTML5 para criar as animações do produto.
Baixe os efeitos 3D para vídeos GIF e HTML5. Animações de produtos Divi 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?
Inscreva-se no nosso canal no Youtube
Usando GIFs para curtas animações de produtos
Os GIFs existem há muito tempo. Isso provavelmente ocorre porque os GIFs são fáceis de criar e têm amplo suporte em todos os navegadores. E podem funcionar bem para animações de produto realmente curtas. Como um GIF é uma imagem, você pode usá-lo em um módulo Divi Image como faria com qualquer outro jpg ou png. Isso permite que você estilize o GIF com todo o poder das configurações integradas do Divi. Mas esteja avisado, GIFs com uma duração mais longa e uma taxa de quadros mais alta podem resultar em tamanhos de arquivo realmente grandes. Portanto, é melhor manter seus GIFs curtos e tão pequenos quanto possível.
Usando vídeo HTML5 como um substituto de GIF
Os vídeos HTML5 estão se tornando um substituto popular do GIF, especialmente para animações mais longas de produtos. Você deve ter notado que eles estão sendo usados no novo design do site Elegant Themes. Eles são significativamente menores em tamanho em comparação com GIFs e, portanto, demoram menos para carregar. E adicionar um vídeo HTML5 ao seu site Divi é simples. Tudo o que você precisa fazer é adicionar o elemento de vídeo HTML5 para incorporar o vídeo à sua página (semelhante a como você adicionaria um shortcode de vídeo no WordPress). Você também pode personalizar o vídeo com controles ocultos, looping e reprodução automática, o que resulta em uma animação de alta qualidade que funciona como um GIF. Além disso, ao adicionar o embed a um Módulo Divi, você também pode usar o Divi builder para estilizar o Vídeo de maneiras criativas.
Confira esta postagem para obter mais informações sobre por que você deve considerar o uso de vídeo HTML5 em vez de GIFs regulares.
Agora que entendemos um pouco mais sobre como usar GIFs e vídeos HTML5, estamos prontos para começar a usá-los no Divi.
O que você precisa para este tutorial
Para começar, você precisará do seguinte:
- Uma imagem GIF
- Um arquivo de vídeo MP4 (e a URL para esse arquivo de vídeo) a ser usado no elemento de vídeo HTML5 incorporado. Para obter suporte máximo do navegador, você também pode incluir o mesmo vídeo no formato webm (mais sobre isso mais tarde).
- O Divi Theme instalado e ativo
- Uma nova página criada para construir do zero no front end (construtor visual)
Depois disso, você terá uma tela em branco para começar a desenhar no Divi.
Adicionar um efeito 3D a um GIF animado ou vídeo HTML5
Antes de irmos muito longe no design do layout de seção completo para este tutorial, achei que seria melhor mostrar a você como adicionar o efeito 3D a um vídeo GIF e HTML5. Assim que terminarmos, iremos polir o resto do layout da seção com um belo design moderno.
Por enquanto, vamos começar adicionando o efeito 3D a um GIF no Divi.
Criação de um GIF
Existem várias maneiras de criar um GIF na web. Como este tutorial é sobre como criar um GIF para animar o funcionamento de um produto, você desejará gravar uma seção de sua tela (usando um gravador de tela) e, em seguida, converter o arquivo de vídeo em um arquivo GIF. Lembre-se de criar o GIF o menor possível para limitar o tamanho do arquivo e o tempo de carregamento. Depois de criar o GIF, você poderá usá-lo como faria com qualquer outra imagem no Divi.
Se você quiser aprender como criar um GIF usando o Snagit, confira nossa postagem sobre Como trocar uma imagem de fundo por um Gif animado ao pairar.
Adicionando um efeito 3D a um GIF em Divi
Agora é hora de adicionar o GIF ao Divi para que possamos estilizá-lo com um efeito 3D legal.
Para começar, adicione uma nova seção regular com uma linha de duas colunas.
Antes de adicionar um módulo, precisamos adicionar a propriedade perspectiva à coluna que conterá nosso GIF. Para fazer isso, abra as configurações de linha e adicione o seguinte snippet de CSS ao elemento principal da coluna 1:
perspective: 1000px;
Esta propriedade de perspectiva é necessária para adicionar perspectiva ao elemento dentro da coluna. Um elemento precisa de perspectiva para que possamos obter um efeito 3D ao usar as opções de transformação do Divi. Para uma melhor compreensão, confira nosso post sobre como usar a perspectiva com opções de transformação para projetar paredes de fotos 3D.
Agora adicione um módulo de imagem à coluna 1.
Faça upload do GIF para o módulo de imagem. Para este design, o GIF deve ter cerca de 600 px por 700 px.
Em seguida, use as opções de transformação para dimensionar, girar e inclinar o GIF no espaço 3D.
Transformar, girar o eixo Y: 8 graus
Transformar, girar, eixo X: 28 graus
Transformar inclinação do eixo Y: 10 graus
Transformar inclinação do eixo X: -8 graus
Escala de transformação (tablet): 80%
Agora vamos ver o resultado.
Adicionando um efeito 3D a um vídeo HTML5 em Divi
Antes de adicionar o efeito 3D, primeiro precisamos criar nosso vídeo HTML5. Veremos as etapas para fazer isso a seguir. Mas se você quiser uma explicação mais completa, dê uma olhada em nosso artigo sobre como usar vídeo HTML5 para criar gifs animados em tamanhos de arquivo menores.
Criação do código de incorporação de vídeo HTML5
O elemento de vídeo HTML5 possui a seguinte estrutura básica.
<video>
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
</video>
Você não precisa saber muito sobre HTML para ver o que esse código está fazendo. Dentro do elemento <video> , você tem dois elementos <source> que contém o caminho / url para os arquivos de vídeo que você deseja exibir. Cada elemento de origem possui um vídeo em um formato de arquivo diferente (webm e mp4). Ambos são necessários para o suporte máximo do navegador. A ordem também é importante. O vídeo webm é colocado acima do vídeo mp4 no código porque é um formato de vídeo de qualidade superior, mas é menos compatível com os navegadores. Portanto, se um navegador suportar vídeo webm, ele o exibirá. Mas se o navegador não suportar vídeo webm, ele usará o formato de vídeo mp4 abaixo dele. Não é necessário incluir os dois formatos de vídeo, mas é a melhor prática. E se você for usar apenas um, use o formato mp4 porque é mais amplamente suportado.
Na verdade, sempre que você usa o módulo de vídeo do Divi para exibir vídeos auto-hospedados, o Divi cria esse mesmo Elemento de vídeo HTML5 para exibir os vídeos. É por isso que o módulo Vídeo permite que você adicione um arquivo de vídeo mp4 e um webm.
Para usar o código em seu próprio vídeo, você simplesmente precisa adicionar o url do vídeo entre parênteses após o atributo src .
Se você enviar os arquivos de vídeo para o seu site WordPress, poderá obter os urls da biblioteca de mídia.
Em seguida, cole os urls do vídeo entre parênteses após o atributo src . 
Deve ser parecido com isso quando você terminar.
<video>
<source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.webm" type="video/webm">
<source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.mp4" type="video/mp4">
</video>
A seguir, adicionaremos quatro atributos para controlar a exibição e a funcionalidade do vídeo. Este tipo de controle é o principal motivo para inserir o vídeo HTML5 manualmente em vez de usar o Módulo de Vídeo Divi. Esses atributos incluem autoplay (para que o vídeo comece automaticamente), loop (para que o vídeo se repita), muted (para que o vídeo não reproduza áudio) e playsinline (para que o vídeo seja reproduzido na área de reprodução do elemento). Para aplicar esses atributos ao vídeo, adicione cada um dos atributos dentro dos colchetes da tag <video> .
Agora o código ficará assim.
<video autoplay loop muted playsinline>
<source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.webm" type="video/webm">
<source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.mp4" type="video/mp4">
</video>
Nota: Normalmente, você aplicaria o atributo controls para vídeos HTML5, mas neste caso vamos deixá-lo de fora para que o vídeo funcione como um GIF.
Agora você está pronto para incorporar o código.
Incorporando o vídeo HTML5
Para incorporar um vídeo HTML5 à sua página, podemos usar o módulo de código.
Antes de substituir o módulo de imagem GIF por nosso módulo de código, vamos seguir em frente e duplicar a seção inteira para que possamos manter nosso exemplo GIF. Na seção duplicada, exclua o módulo de imagem e adicione um módulo de texto em seu lugar.
Em seguida, cole o código de incorporação do vídeo HTML5 na caixa de entrada do código.
Em seguida, copie os estilos de transformação do módulo de imagem e cole os estilos de transformação no módulo de código. Ou você pode atualizar os estilos de transformação da seguinte maneira:
Transformar, girar o eixo Y: 8 graus
Transformar, girar, eixo X: 28 graus
Transformar inclinação do eixo Y: 10 graus
Transformar inclinação do eixo X: -8 graus
Escala de transformação (tablet): 80%
Como estou usando o mesmo vídeo que usei para criar o GIF, o design será muito semelhante. No entanto, o tamanho do vídeo é significativamente menor do que o tamanho do GIF. Aqui está o resultado.
Completando o Design do Layout da Seção
Agora que temos o GIF 3D (ou vídeo HTML5) no lugar. Podemos finalizar o design do layout de nossa seção. Para este design, vou usar a seção com o vídeo HTML5 na coluna 1.
Personalizando a Seção e Linha
Abra as configurações da seção e atualize o seguinte.
Acolchoamento: 15% superior, 15% inferior
Em seguida, abra as configurações de linha e atualize o seguinte:
Cor do gradiente de fundo à esquerda: # ba7fe8
Cor certa do gradiente de fundo: # 4b84ff
Altura máxima: 300 px (desktop), nenhuma (tablet e telefone)
Preenchimento: 0 px superior, 0 px inferior
Em seguida, podemos dar à linha uma sombra de caixa interna semitransparente para um elemento de design exclusivo.
Sombra da caixa: veja a imagem
Posição horizontal da sombra da caixa: 0 px
Posição vertical da sombra da caixa: 0 px
Força de propagação da sombra da caixa: 40px
Cor da sombra: rgba (255,255,255,0,89)
Posicionando o Módulo de Código
Agora, vamos aumentar um pouco o módulo de código com o vídeo, ajustando a propriedade transform translate da seguinte maneira:
Transformar o eixo Y da tradução: -20% (desktop), -7% (telefone)
Adicionando um Módulo de Chamada para Ação
Para completar o design, vamos adicionar um módulo de call to action à coluna 2. Este será um ótimo lugar para adicionar uma descrição do produto apresentado com um botão.
Adicione um URL de link de botão para fazer o botão aparecer.
Continue a atualizar as configurações da seguinte maneira:
Cor de fundo: #ffffff
Alinhamento de Texto: Esquerda
Cor do Texto: Escuro
Fonte do título: Lato
Peso da fonte do título: negrito
Cor do texto do título: # 20292f
Fonte do corpo: Lato
Cor do corpo do texto: # 6d7c90
Tamanho do corpo do texto: 17 px
Altura da linha corporal: 1,8em
Tamanho do texto do botão: 12 px
Cor do texto do botão: #ffffff
Cor de fundo do botão: # 4b84ff
Largura da borda do botão: 0 px
Raio da borda do botão: 100 px
Espaçamento entre letras dos botões: 2 px
Fonte do botão: Lato
Peso da fonte do botão: pesado
Estilo da fonte do botão: TT
Preenchimento do botão: 12 px superior, 12 px inferior, 20 px à esquerda, 20 px à direita
Sombra da caixa: veja a imagem
Posição vertical da sombra da caixa: 0 px
Força de propagação da sombra da caixa: 40px
Cor da sombra: rgba (103,151,255,0,11)
Margem: 10% certo
Transformar o eixo Y da tradução: -33% (desktop), -15% (telefone)
Transformar Traduzir Eixo X: -5%
Resultado final
Área de Trabalho
Tábua
Telefone
Pensamentos finais
Adicionar o efeito 3D a vídeos GIFs e HTML5 realmente oferece uma exibição única para as animações do produto. As opções de transformação do Divi (combinadas com a propriedade perspectiva) facilitam a adição de efeitos 3D aos seus GIFs e vídeos.
E, com sorte, você aprendeu algumas coisas sobre como usar GIFs e vídeos HTML5 com Divi. Os GIFs são simples de usar, mas são mais difíceis de manter o tamanho do arquivo amigável para a web. Os vídeos HTML5 requerem o uso de um código incorporado, mas podem funcionar extremamente bem como um substituto de GIF para animações mais longas.
Sinta-se à vontade para explorar maneiras novas e empolgantes de usar este design para apresentar animações de produtos e serviços em seu próximo projeto.
Estou ansioso para ouvir de você nos comentários.
Saúde!