Como usar os novos efeitos de animação da Divi

Bem-vindo à parte 1 desta série de 6 partes que ensinará como usar as novas opções de animação do Divi para criar seções de página incríveis. Vou guiá-lo através de como construir as diferentes seções de nossa página de demonstração ao vivo, a fim de mostrar as técnicas para adicionar animações ao seu site. Os recursos de animação são realmente divertidos e fáceis de usar. E com o Visual Builder, você pode ver sua criação ganhar vida em cada estágio do caminho. Junte-se a mim para explorar o poder da animação Divi.

A animação pode dar vida a uma página. Se feito de forma eficaz, o usuário pode se envolver e ficar mais inclinado a explorar o conteúdo de sua página. Se malfeitas, as animações podem distrair completamente o usuário e afastá-lo em um estado de desapontamento atordoado. A velocidade, o tempo e a intensidade da animação desempenham um papel significativo nessa sinfonia de movimento à medida que o usuário rola a página para baixo.

Os recursos avançados de animação do Divi permitem adicionar animação a qualquer elemento do seu site. E você pode combinar esses elementos animados para criar inúmeras combinações de movimento que dão vida às suas seções.

Na parte 1 desta série, vou mostrar como usar o construtor visual para construir e animar as duas primeiras seções de nossa página de demonstração ao vivo, mostrando o poder dos recursos de animação do Divi.

Vamos começar.

Aqui está uma prévia do que iremos construir nesta série

Parte 1 da série

Seção 1

Seção 2

Parte 2 da série

Seção 3

Seção 4

Parte 3 da série

Seção 5

Parte 4 da série

Seção 6

Parte 5 da série

Seção 7

Parte 6 da série

Seção 8

Seção 9

Preparando os Elementos de Design

Para a primeira seção, você precisará de duas imagens. A primeira é sua imagem de plano de fundo em tela cheia com dimensões em torno de 1280 × 800. Aqui está o que estou usando:

A segunda imagem é uma versão editada da mesma imagem que foi invertida verticalmente e desbotada na parte inferior. Essa segunda imagem servirá como plano de fundo para o título principal e deve ter cerca de 800 × 400.

Para criar a imagem de cabeça para baixo, abra a imagem na Visualização e selecione Ferramentas> Virar verticalmente ou abra a imagem no Photoshop, selecione Imagem> Rotação da imagem> Virar tela vertical. Para adicionar o efeito de esmaecimento na parte inferior da imagem, usei a ferramenta borracha no modo pincel com um tamanho de 800px e 0% de dureza. Então segurei shift e arrastei o pincel ao longo da borda inferior.

Certifique-se de exportá-lo como um arquivo png.

Se você não tem o Photoshop, pode tentar uma solução gratuita de edição de fotos como o gimpshop para realizar muitas das mesmas edições de design. Se você não sabe como usar um software de edição de fotos (e não se importa em aprender neste momento), fique à vontade para deixar a segunda imagem de fora por enquanto, ou use a abaixo (clique e arraste-a para o seu Área de Trabalho).

Para a segunda seção, você precisará de duas imagens. O primeiro deve ter cerca de 730 × 490 como este.

E o segundo deve ter cerca de 525 × 660 como o mostrado abaixo.

Entendendo a Terminologia de Animação

Se ainda não o fez, vá em frente e leia a postagem de atualização de recursos apresentando animações avançadas. No final da postagem, Nick fornece uma definição / descrição útil de cada um dos recursos de animação que você encontrará em todo o construtor. Entender o que esses recursos de animação realmente fazem é importante para o processo de criação.

Depois de entender o que são esses recursos de animação, vamos nos aprofundar.

Como usar os novos efeitos de animação da Divi

Inscreva-se no nosso canal no Youtube

Adicione suas novas configurações de página

No painel do WordPress, vá para Pages> Add New. Em seguida, adicione um título à sua página. Em seguida, encontre as configurações da página Divi na caixa no canto superior direito da página e selecione Navegação por pontos “LIGADA”. Na caixa Atributos da página, selecione Página em branco para o seu modelo de página. Por fim, clique no botão “Usar Divi Builder” e implante o Visual Builder para começar a construir seu layout.

Seção de construção 1: design e animação do cabeçalho em tela cheia

Esta seção de cabeçalho irá se comportar como um módulo de cabeçalho de largura total configurado para tela inteira. Em outras palavras, quando o site for carregado, a seção preencherá toda a largura e altura da janela do navegador, não importando o tamanho da janela. Mas em vez de usar o módulo de cabeçalho de largura total, vamos usar uma seção padrão e definir a altura para 100vh. Dessa forma, podemos adicionar um módulo de texto dentro dele.

Usando o Construtor Visual, clique para editar as configurações de seção da seção padrão já exibida por padrão ao iniciar o construtor. Atualize o seguinte:

Na guia Conteúdo ...

Imagem de fundo: [insira sua imagem de fundo de 1280 × 800]
Use o efeito de paralaxe: SIM
Método Parallax: True Parallax

Na guia Design ...

Preenchimento personalizado: 5% superior, 0px direito, 5% inferior, 0px esquerdo

Na guia Avançado ...

Adicione o seguinte CSS personalizado na caixa Elemento principal:

min-height: 100vh

Esta linha de css diz à seção para exibir 100% da altura da janela de visualização.

Salvar configurações

Em seguida, insira uma estrutura de uma coluna em sua linha e adicione um módulo de texto à coluna. Atualize as configurações do módulo de texto da seguinte forma:

Na guia Conteúdo ...

Basta adicionar a palavra “Divi” dentro da caixa de conteúdo.

Na guia Design ...

Fonte do texto: Oswald, maiúscula (TT)
Tamanho da fonte do texto: 14px
Cor do texto do texto: # 08408e
Espaçamento entre letras do texto: 1,5em (você precisará digitar)
Orientação do Texto: Centro
Margem personalizada: 2%
Estilo de animação: Flip
Repetição de animação: uma vez
Direção da animação: direita
Duração da animação: 2.000 ms
Atraso de animação: 1100ms
Intensidade de animação: 100%
Opacidade inicial da animação: 0%
Curva de velocidade de animação: Ease-In-Out

Tempo limite… Vamos fazer uma pausa por um minuto para que eu possa mostrar o que seria necessário para adicionar essa animação semelhante manualmente.

Aqui está o html com o estilo embutido necessário para a animação:

<div class="et_animated flipLeft" style="position: absolute; animation-duration: 2000ms; animation-delay: 1100ms; opacity: 0; animation-timing-function: ease-in-out; transform: perspective(2000px) rotateY(-90deg);">
<div style="position:relative;">Divi</div>
</div>

E aqui está o CSS necessário para a animação:

@keyframes et_pb_flipLeft {
    from {
        transform-origin: center
    }

    to {
        opacity: 1;
        transform: rotateY(0)
    }
}

.et_animated.flipLeft {
    animation-name: et_pb_flipLeft
}

.et_animated {
    animation-fill-mode: both!important;
}

E isso não inclui o código necessário para ativar a animação quando ela se tornar visível na janela do navegador. De qualquer forma, tudo isso para dizer que ter esses recursos de animação integrados economiza muito tempo. E poder ver a animação ao vivo enquanto edita as opções de animação é um bônus considerável.

Agora vamos continuar com a atualização de nossas Configurações do Módulo de Texto:

Na guia Avançado ...

Adicione a seguinte linha de CSS personalizado à caixa Elemento principal:

text-indent: 1.5em

Salvar configurações

Em seguida, adicione outro Módulo de Texto diretamente abaixo do que acabou de criar e atualize as configurações da seguinte forma:

Na guia Conteúdo ...

Adicione o seguinte html na guia de texto da caixa de conteúdo:

<p><span>Believing</span><br />is  Seeing</p>

Na guia Design ...

Cor do Texto: Claro
Fonte do texto: Oswald, maiúscula (TT)
Tamanho da fonte do texto: 8vw (você deve digitar; isso torna o tamanho da fonte 8% da largura da janela de visualização)
Cor do texto do texto: rgba (255,255,255,0,79)
Altura da linha de texto: 1,4em
Orientação do texto: centro
Estilo de animação: Dobra
Direção da animação: para cima
Duração da animação: 1800ms
Atraso de animação: 0ms
Intensidade de animação: 60%

Salvar configurações

Este efeito de animação revelará o título principal dobrando-o (ou levantando-o) em uma posição aparentemente plana. Agora que concluímos o texto do título principal, vamos adicionar nossa imagem de fundo de cabeça para baixo à linha.

Agora vá para Configurações de linha da linha que contém os dois módulos de texto que você acabou de criar e atualize as configurações da seguinte maneira:

Na guia Conteúdo ...

Imagem de fundo: [insira sua imagem 800 × 440]
Tamanho da imagem de fundo: Ajustar
Posição da imagem de fundo: Centro superior
Repetição da imagem de fundo: sem repetição

Na guia Design ...

Usar largura personalizada: SIM
Unidade: %
Largura personalizada: 50%
Preenchimento personalizado: 12% superior, 0% direito, 5% inferior, 0% esquerdo
Estilo de animação: slide
Direção da animação: para cima
Atraso de animação: 300ms
Intensidade de animação: 20%

Este efeito de animação desliza a imagem para cima, quase como se ela estivesse surgindo de trás das montanhas.

É isso para a primeira seção. Vamos verificar nosso design e animação finais.

Os três elementos animados aqui incluem a Linha (que está deslizando para cima), o módulo de texto com o texto “Crer para Ver” (que está dobrando para fora do centro) e o módulo de texto com o texto “Divi” (que está atrasado para abrir para a direita após os outros elementos terem parado). A combinação realmente envolve o visitante, revelando diferentes partes do conteúdo de maneira objetiva e oportuna.

Seção de construção 2

Esta segunda seção de nossa página de demonstração de animação mostra uma maneira sutil, mas extremamente legal, de revelar o conteúdo da sua página. Na verdade, é quase impossível reconhecer todos os movimentos à primeira vista.

Para construir a segunda seção, adicione uma seção regular na seção anterior. Na seção, adicione uma linha de duas colunas (metade da metade).

Na coluna esquerda, adicione um módulo de texto com as seguintes configurações:

Na guia Conteúdo ...

Insira o seguinte html na guia de texto da caixa de conteúdo:

<h1>Time is money</h1>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus hendrerit pretium felis, sit amet sollicitudin eros dignissim at. Cras molestie nisl enim.</span></p>

Na guia Design ...

Cor do Texto: Claro
Fonte do texto: Montserrat
Tamanho da fonte do texto: 18px
Altura da linha de texto: 1.8em
Fonte do cabeçalho: Montserrat, Negrito (B), Maiúscula (TT)
Tamanho da fonte do cabeçalho: 39px (desktop)
Altura da linha de cabeçalho: 2,2em
Margem inferior: 50px
Estilo de animação: slide
Direção da animação: para cima
Intensidade de animação: 10%

Este efeito de animação revelará o bloco de texto deslizando-o para cima.

Salvar configurações

Em seguida, adicione um módulo de botão no módulo Texto que você acabou de criar. Atualize as configurações do módulo de botão da seguinte forma:

Na guia Conteúdo ...

Texto do botão: Saiba mais
URL do botão: # (ou o que você quiser)

Na guia Design ...

Alinhamento do botão: Esquerda
Cor do Texto: Claro
Use estilos personalizados para botão: SIM
Tamanho do texto do botão: 15px
Raio da borda do botão: 0
Espaçamento entre letras dos botões: 3px
Fonte do botão: Montserrat, Negrito (B), Maiúscula (TT)
Mostrar ícone do botão: SIM
Preenchimento personalizado: 10px superior, 30px direito, 10px inferior, 30px esquerdo
Estilo de animação: slide
Direção da animação: baixo
Atraso de animação: 100ms
Intensidade de animação: 10%

Para contrabalançar o efeito do texto anterior acima, este efeito de animação revelará o botão deslizando-o para baixo e exibindo-o com um pequeno atraso.

Você não pode ver seu texto e botão ainda porque é um texto branco em um fundo branco. Tudo bem. Estaremos adicionando nosso background em breve.

Em seguida, adicione um Módulo Divisor à coluna da direita.

Em seguida, atualize as configurações da seguinte forma:

Na guia Design ...

Altura: 260px

Na guia Avançado ...

Desativar visibilidade na área de trabalho

Adicionar um divisor aqui ajudará a manter a imagem de fundo visível em dispositivos móveis.

Salvar configurações

Agora vamos adicionar nossos planos de fundo a cada uma de nossas colunas. Vá para Configurações de linha e atualize o seguinte:

Na guia Conteúdo ...

Cores gradientes de fundo da coluna 1: # fe8840, rgba (238,78,78,0.9)
Direção do gradiente da coluna 1: 135 graus
Imagem de fundo da coluna 2: [insira sua imagem de 730 × 490]
Posição da imagem de fundo da coluna 2: Superior esquerdo
Repetição da imagem de fundo da coluna 2: sem repetição

Na guia Design ...

Usar largura personalizada: SIM
Largura personalizada: 1366 px
Usar largura de calha personalizada: SIM
Largura da calha: 1
Equalize a altura das colunas: SIM
Preenchimento personalizado: 0px superior, 0px direito, 0px inferior, 0px esquerdo
Coluna 1 Preenchimento personalizado: 5% superior, 7% direito, 5% inferior, 7% esquerdo
Estilo de animação: Dobra
Direção da animação: para cima
Duração da animação: 800ms

Este efeito de animação revelará a linha inteira dobrando-a (ou colocando-a em pé) à vista.

Na guia Avançado ...

Adicione o seguinte CSS personalizado à caixa Elemento principal:

box-shadow: -20px 0px 60px -20px rgba(255, 130, 65, 0.88);

Salvar configurações

Em seguida, adicione uma linha de duas colunas (um terço e dois terços) sob a linha que acabou de criar.

Na coluna da esquerda, adicione um Módulo Divisor e atualize as configurações da seguinte maneira:

Na guia Design ...

Altura: 400px

Na guia Avançado ...

Desativar visibilidade na área de trabalho

Adicionar um divisor aqui ajudará a manter a imagem de fundo visível em dispositivos móveis.

Salvar configurações

Para economizar tempo, vá em frente e clique com o botão direito e copie o módulo de texto na coluna esquerda da Linha acima contendo o texto “Tempo é Dinheiro”. Em seguida, cole-o na coluna direita (dois terços) da linha abaixo.

Atualize as novas configurações do Módulo de Texto da seguinte maneira:

Na guia Conteúdo ...

Altere o texto do cabeçalho h1 para “Commute Like a Pro” na caixa de conteúdo.

Na guia Design ...

Cor do texto do texto: # a8a8a8
Cor do texto do cabeçalho: # 414159
Estilo de animação: slide
Direção da animação: baixo
Intensidade de animação: 10%

Este efeito de animação revela o bloco de texto deslizando-o para baixo na visualização.

Agora clique com o botão direito e copie o módulo de botão na coluna esquerda da linha acima e cole-o sob o módulo de texto que você acabou de editar.

Atualize as configurações do módulo de botão da seguinte forma:

Cor do texto do botão: # ff4823
Cor da borda do botão: # ff4823
Cor do texto do botão flutuante: # ff2323

Salvar configurações

Para a última etapa, edite suas Configurações de linha atualizando o seguinte:

Na guia Conteúdo ...

Cor de fundo: #ffffff
Imagem de fundo da coluna 1: [insira sua imagem 525 × 660]
Posição da imagem de fundo da coluna 1: Superior esquerdo
Repetição da imagem de fundo da coluna 1: sem repetição
Cores de gradiente de fundo da coluna 2: rgba (255,255,255,0,91), #ffffff
Direção do gradiente da coluna 2: 135 graus

Na guia Design ...

Usar largura personalizada: SIM
Largura personalizada: 1040 px
Usar largura de calha personalizada: SIM
Largura da calha: 1
Equalize a altura das colunas: SIM
Preenchimento personalizado: 0px superior, 0px direito, 0px inferior, 0px esquerdo
Preenchimento personalizado da coluna 2: 5% superior, 7% direito, 5% inferior, 7% esquerdo
Estilo de animação: Dobra
Direção da animação: baixo
Duração da animação: 800ms

Este efeito de animação revelará a linha inteira dobrando-a para baixo à vista.

Na guia Avançado ...

Adicione o seguinte CSS personalizado na caixa Elemento principal:

box-shadow: 0 40px 90px -35px rgba(0,0,0,.3);

É isso para esta seção. Confira seus resultados.

Como os elementos de animação e design desta seção são sutis, acho que é um ótimo exemplo do tipo de design e animação que poderia ser usado na maioria das páginas. As linhas superior e inferior se abrem como se você estivesse olhando para a abertura de um livro por trás. O texto e os botões movem-se ligeiramente para cima na linha superior e para baixo na linha inferior. Uma ótima combinação.

Bônus: Baixe essas seções para facilitar a importação

Como um bônus, empacotamos as seções construídas no tutorial de hoje em um download gratuito que você pode obter usando o formulário de inscrição por e-mail abaixo. Basta inserir seu e-mail e o botão de download aparecerá. Não se preocupe em “assinar novamente” se você já faz parte do nosso Divi Newsletter. Reinserir seu e-mail não resultará em mais e-mails ou duplicatas. Ele simplesmente revelará o download.

Aproveitar!

Baixe o Pacote de Layout

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 usar esses downloads, comece localizando o arquivo compactado denominado Animation_Effects_Part_1.zip em nossa pasta de downloads. Descompacte-o para revelar as seguintes importações.

Efeitos de animação, parte 1 (seção 1) .json

Efeitos de animação, parte 1 (seção 2) .json

Navegue em seu Admin do WordPress para Divi> Biblioteca Divi> Importar e Exportar. Quando o modal de portabilidade for exibido, clique na guia de importação e no botão denominado escolher arquivo.

Selecione o arquivo json de sua preferência e clique em “Import Divi Builder Layouts”. Assim que a importação for concluída, navegue até a postagem ou página à qual deseja adicionar uma das seções acima.

Ative o construtor visual. Navegue até a parte da página à qual deseja adicionar uma das seções acima. Ao clicar no ícone adicionar nova seção, será apresentada a opção “Adicionar da biblioteca”. Escolha esta opção e selecione o layout desejado.

Empacotando

Espero que essas duas seções sirvam de inspiração para construções futuras usando os recursos de animação do Divi. Os conceitos de design por si só são ótimos e os layouts podem ser facilmente adaptados a qualquer site com apenas alguns pequenos ajustes. Fique ligado, pois iremos cobrir muito mais nesta série.

Chegando

Na próxima parte desta série, continuarei nossa exploração dos recursos avançados de animação do Divi, criando as seções 3 e 4 de nossa página de demonstração de animação.

Aqui está o que você pode esperar construir.

Seção 3:

Seção 4:

Por favor, deixe seus comentários abaixo.

Saúde!