Como adicionar efeitos de animação a seções / linhas no Divi

No tutorial Divi de hoje, mostraremos como adicionar efeitos de animação a seções e linhas no Divi. O próprio tema Divi fornece alguns efeitos de animação relevantes que o ajudam a trazer um nível extra de interação para o seu site. Esses efeitos são fáceis de atribuir a uma imagem dentro do Divi Builder na subcategoria Animação da guia Avançado.

No entanto, se você está procurando uma maneira de adicionar esses efeitos de animação a outros módulos, seções ou linhas do seu site, isso também é possível. Nesta postagem, mostraremos exatamente como fazer isso. Além de mostrar como adicionar os efeitos de animação integrados, também mostraremos como integrar wow.js e animate.css em seu site Divi.

No final desta postagem, você poderá adicionar bons efeitos às suas linhas e seções. Para ajudá-lo a visualizar o processo, gostaríamos de compartilhar o seguinte exemplo (que mostraremos como conseguir no final desta postagem):

Divi Animations ou Wow.js & Animate.css?

Você provavelmente está se perguntando em quais casos você deve considerar o uso de animações Divi e em quais casos wow.js & animate.css fariam o trabalho melhor. Embora usar a animação integrada Divi seja a solução mais fácil se você não estiver procurando criar alguns efeitos de animação avançados, os efeitos wow.js e animate.css certamente trarão um grande valor agregado ao seu site também.

Quando usar animações Divi

Existem cinco efeitos de animação disponíveis no Divi que você pode usar:

• O fade-in
• O slide inferior
• O slide-in esquerdo
• O slide certo
• O slide-in superior

Embora existam apenas cinco possibilidades, elas também são as usadas com mais frequência. Eles são simples e diretos. Se você quiser dar um efeito extra legal ao seu site, sem se esforçar muito, os efeitos de animação Divi são o caminho a percorrer. Cada um desses efeitos é ativado a partir do momento em que você rola e tem uma visão do módulo, linha ou seção na qual você adicionou o efeito. Dessa forma, seus visitantes não perderão os efeitos que estão localizados na parte inferior da página, por exemplo.

Para integrar os efeitos de animação Divi, você não precisa ter um tema filho carregado em seu site. Você pode adicionar facilmente esses efeitos enquanto ainda trabalha no tema pai.

Quando usar Wow.js e Animate.css

Integrar wow.js e animate.css em seu site é algo que você provavelmente vai gostar por causa das muitas opções que você tem. Existem 14 categorias de efeitos de animação que contêm diferentes efeitos relevantes para essa categoria. As categorias que você pode escolher são as seguintes:

• Buscadores de atenção
• Entradas saltitantes
• Saídas saltitantes
• Entradas desbotadas
• Saídas de desvanecimento
• Nadadeiras
• Velocidade da luz
• Entradas rotativas
• Saídas rotativas
• Entradas deslizantes
• Saídas deslizantes
• Entradas de zoom
• Saídas de zoom
• Especiais

Você pode ver todos os efeitos disponíveis clicando no link a seguir. Esses efeitos de animação também aparecem durante a rolagem.

Como adicionar efeitos de animação a seções / linhas no Divi

Inscreva-se no nosso canal no Youtube

Use os efeitos de animação integrados

A primeira possibilidade que mostraremos são os efeitos de animação integrados. Vamos mostrar como aplicar os efeitos a uma seção e a uma linha. Abra a página onde deseja fazer as modificações.

Em nosso exemplo, vamos adicionar os efeitos de animação à primeira seção e linha de nossa página. Adicionar a animação para a seção ou linha é o mesmo em ambos os casos. Os códigos de classe CSS para os diferentes efeitos de animação são os seguintes:

• Classe CSS Fade-in: et-waypoint et_pb_animation_fade_in
• Classe CSS deslizante inferior: et-waypoint et_pb_animation_bottom
• Classe CSS deslizante à esquerda: et-waypoint et_pb_animation_left
• Slide direito: classe CSS: et-waypoint et_pb_animation_right
• Principal classe de CSS deslizante: et-waypoint et_pb_animation_top

Adicionar efeito de animação à linha

Para adicionar a Animação a uma determinada linha, abra as configurações dessa linha e vá para a guia Avançado. Na guia Avançado, coloque a classe CSS do efeito de animação no campo Classe CSS. Neste caso, vamos mostrar como adicionar a animação fade-in.

Adicionar efeito de animação à seção

O mesmo método para adicionar um efeito de animação a uma linha também se aplica a uma seção. Vá para a guia Avançado e coloque a classe CSS do efeito de animação de sua escolha no campo Classe CSS. Neste exemplo, vamos mostrar como adicionar o efeito de animação deslizante superior.

O resultado

Depois de adicionar os efeitos à seção e linha, você verá o seguinte resultado se encaixar:

Adicione Wow.js e Animate.css ao seu tema filho

Nesta próxima parte, vamos mostrar como adicionar wow.js e animate.css ao seu site WordPress e como usá-los em todo o seu tema Divi.

Em primeiro lugar, quero dar crédito a Jeremy Cookson por este post sobre como integrar o wow.js e o animate.css ao WordPress. Nesta parte do post, mostraremos exatamente como fazer a integração acontecer para um site WordPress construído com o tema Divi.

Para adicionar wow.js e animate.css à sua página da web, você terá que usar um tema filho em seu site. Se você está se perguntando como criar um tema filho, verifique este post. Depois de criar os arquivos principais do tema filho, você precisará adicionar dois outros arquivos para completar o tema filho com os efeitos de animação.

Baixe os arquivos e adicione-os ao seu tema filho

Mantenha o seu tema filho ao seu alcance e baixe os dois arquivos a seguir, clicando nos dois links a seguir:

• animate.min.css
• wow.min.js

Depois de baixar os dois arquivos, crie subpastas dentro do seu tema filho. Nomeie um deles como CSS e o outro como JS. Depois disso, coloque o animate.min.css na pasta CSS e o wow.min.js na pasta JS.

Carregar tema filho

A próxima coisa que você precisa fazer é carregar e ativar o tema filho ao qual você acabou de adicionar wow.js e animate.css. Vá para o painel do WordPress> Aparência> Temas> e clique em 'Adicionar novo' no topo da página.

Adicione o código PHP ao seu arquivo Functions.php

Depois de fazer upload do tema filho, adicione as seguintes linhas de código PHP ao arquivo functions.php de seu tema filho:

// * Enqueue Animate.CSS e WOW.js
add_action ('wp_enqueue_scripts', 'sk_enqueue_scripts');
function sk_enqueue_scripts () {
wp_enqueue_style ('animate', get_stylesheet_directory_uri (). '/css/animate.min.css');
wp_enqueue_script ('uau', get_stylesheet_directory_uri (). '/js/wow.min.js', array (), ”, verdadeiro);
}
// * Enqueue script para ativar WOW.js
add_action ('wp_enqueue_scripts', 'sk_wow_init_in_footer');
função sk_wow_init_in_footer () {add_action ('print_footer_scripts', 'wow_init');}
// * Adicione JavaScript antes </body> da função wow_init () {?>
<tipo de script = ”text / javascript”>
novo WOW (). init (); </script> <? php}

Adicionar animações a linhas e seções

O sistema para adicionar os efeitos wow.js e animate.css a linhas e seções é o mesmo que para os efeitos de animação Divi. Você terá que abrir as configurações da linha ou seção à qual deseja adicionar o efeito de animação. Em seguida, você pode colocar a classe CSS atribuída à animação no campo Classe CSS de sua seção ou linha.

Adicionar Animação à Linha

Para o exemplo que vamos mostrar com a linha, estamos usando o efeito fadeInRight que encontramos na lista de efeitos de animação. Vá para a guia Avançado das configurações de linha e adicione 'wow fadeInRight' ao campo Classe CSS. Toda vez que você quiser adicionar um efeito a uma parte do seu site, certifique-se de colocar 'uau' antes do efeito que está usando.

Resultado

Depois de adicionar a classe CSS e visualizar a página em que está trabalhando, você deve ter alcançado o seguinte resultado:

Adicionar animação à seção

O mesmo método se aplica à adição de um efeito de animação a uma seção. Vá para a guia Avançado e adicione a classe CSS 'wow bounceInDown' ao campo Classe CSS da sua seção.

Resultado

Se você seguiu todas as etapas corretamente, deverá obter o seguinte resultado:

Opções avançadas

Caso queira adicionar algumas especificações adicionais à sua animação, você também pode fazer isso. Você pode, por exemplo, adicionar um tempo de atraso a um de seus efeitos de animação. Isso pode ser útil quando você está combinando uma animação de seção com animação de linha dentro da mesma seção. Dessa forma, você garante que os efeitos de animação não se sobreponham.

Para mostrar como adicionar esse tempo de atraso, vamos combinar os dois efeitos que usamos na parte anterior deste post. Um efeito de animação é atribuído à seção e o outro à linha. Para garantir que o efeito de animação de linha não seja perdido, adicionaremos um tempo de atraso de 2 segundos a ele.

Abra as configurações de linha e volte para a guia Avançado. No campo Classe CSS, adicione outra classe chamada 'atraso'. Esta classe ainda não existe, mas estamos prestes a adicioná-la em nossa próxima etapa.

Agora, adicione a classe CSS delay às configurações da página em que você está trabalhando clicando no seguinte botão:

Em seguida, adicione a classe CSS com as linhas de código CSS ao campo Custom CSS. Se você quiser adicionar um tempo de atraso de 2 segundos, como faremos neste exemplo, você precisará das seguintes linhas de código CSS:

.delay {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-ms-animation-delay: 2s;
-o-animation-delay: 2s;
}

Resultado

Depois de adicionar o tempo de atraso, o resultado deve ser assim:

Pensamentos finais

Nesta postagem, mostramos como adicionar efeitos de animação ao seu site Divi. Nós fornecemos a você duas possibilidades. O primeiro mostra como usar os efeitos de animação padrão fornecidos pela Divi. A segunda possibilidade permite integrar wow.js e animate.css. Usar efeitos de animação em seu site pode ajudá-lo a enfatizar o conteúdo que deseja compartilhar com seus visitantes. Além disso, também parece ótimo. Se você tiver dúvidas ou sugestões; certifique-se de deixar um comentário na seção de comentários abaixo.

Certifique-se de se inscrever em nosso boletim informativo por e-mail e canal no YouTube para que você nunca perca um grande anúncio, dica útil ou brinde Divi!

Imagem em destaque por Stocker top / shutterstock.com