Usando as animações da Divi para exibir seu conteúdo

Bem-vindo à parte 5 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 enquanto exploramos o poder das animações Divi.

Em nosso último post, construímos a seção 6 de nossa página de demonstração de animação. Mostrei como projetar um layout para exibir downloads de produtos com cores brilhantes, sombras brilhantes e animação precisa.

Hoje, vamos construir a Seção 7 de nossa página de demonstração de animação, que é um exemplo perfeito de como usar o efeito de animação de rolo para adicionar movimento real ao seu conteúdo. O produto final dará a impressão de texto e telefones celulares deslizando e girando em diferentes ângulos conforme você rola a página.

Esta é uma das minhas animações favoritas. Vamos começar.

Aqui está uma prévia do design e animação que iremos construir na postagem de hoje

Preparando os Elementos de Design

Você precisará de três imagens para este tutorial. As duas primeiras imagens verticais devem ter cerca de 580 × 950 giradas em um ângulo de 10% no sentido anti-horário. A imagem horizontal deve ter 1250 × 608 (também girada em um ângulo de 10% no sentido anti-horário) com cerca de 300 px de espaço de fundo transparente extra à direita da imagem para que se encaixe perfeitamente na coluna fornecida. Certifique-se de que as imagens do telefone estejam no formato png com um fundo transparente. Aqui estão as imagens que usei no post de hoje.

Imagem vertical do telefone nº 1

Imagem vertical do telefone nº 2

Imagem vertical do telefone nº 3

Usando as animações da Divi para exibir seu conteúdo

Inscreva-se no nosso canal no Youtube

Seção de construção 7 da demonstração

Antes de iniciarmos o processo de construção, aqui está um vislumbre da visualização em estrutura de arame do layout de seção que estaremos criando usando o construtor visual.

Usando o Visual Builder, vamos começar adicionando outra seção regular ao nosso layout. Em seguida, adicione uma linha de três colunas (um quarto, um quarto e meia) à sua seção.

Atualizar configurações de linha

Antes de adicionar nosso primeiro módulo, vá para as configurações de linha e atualize o seguinte:

Na guia Design ...

Usar largura personalizada: SIM
Largura personalizada: 91%
Usar largura de calha personalizada: SIM
Largura da calha: 1

Preenchimento personalizado da coluna 2: 5% superior
Coluna 3 Preenchimento personalizado: 24% superior

Adicionando a imagem nº 1

Na primeira coluna (extrema esquerda) de nosso layout, adicione um Módulo de Imagem e atualize as configurações de imagem da seguinte maneira:

Na guia Conteúdo ...

URL da imagem: [upload da imagem # 1]

Na guia Design ...

Forçar largura total: SIM

Estilo de animação: Roll
Direção da animação: direita
Intensidade de animação: 16%
Opacidade inicial da animação: 100%

Salvar configurações

Adicionando Texto Animado com o Divisor e Módulos de Apelo à Ação

Agora vá para a coluna do meio (um quarto), onde o módulo divisor será usado para adicionar uma linha divisória curta acima do texto.

Adicione um módulo divisor à coluna.

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

Na guia Conteúdo ...

Mostrar divisor: SIM

Na guia Design ...

Cor: # e0c48f
Peso do divisor: 3px
Largura: 60px (você deve digitar este valor, pois o padrão é porcentagem)
Alinhamento do Módulo: padrão (esquerda)
Preenchimento personalizado: 80px superior, 80px esquerdo

Estilo de animação: Dobra
Direção da animação: direita
Duração da animação: 1200 ms
Atraso de animação: 50ms
Intensidade de animação: 70%
Opacidade inicial da animação: 0%

Salvar configurações

No Módulo divisor, adicione um Módulo de frase de chamariz com as seguintes configurações:

Na guia Conteúdo ...

Título: “1000 palavras”
Texto do botão: “Saiba mais”
Conteúdo: “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id. ”
Ligação: #
Usar cor de fundo: NÃO

Na guia Design ...

Cor do Texto: Escuro
Orientação do Texto: Esquerda
Fonte do cabeçalho: Lato, negrito (B) maiúsculo (TT)
Tamanho da fonte do cabeçalho: 38px
Cor do texto do cabeçalho: # 33454f
Espaçamento entre letras do cabeçalho: 0.2em
Altura da linha de cabeçalho: 1,4em

Fonte do corpo: Lato
Tamanho da fonte do corpo: 18 px
Cor do corpo do texto: # 9b9b9b
Altura da linha corporal: 1,8em

Use estilos personalizados para botão: SIM
Tamanho do texto do botão: 15px
Cor do texto do botão: # f2733c
Cor de fundo do botão: rgba (225,225,225,0)
Largura da borda do botão: 0 px
Espaçamento entre letras dos botões: 2 px
Fonte do botão: Lato, Negrito (B), Maiúscula (TT)
Ícone do botão: seta para a direita
Mostrar apenas o ícone ao passar o mouse para o botão: NÃO
Espaçamento entre letras do botão ao passar o mouse: 0 px

Estilo de animação: Dobra
Direção da animação: direita
Duração da animação: 1200 ms
Atraso de animação: 50ms
Intensidade de animação: 70%
Opacidade inicial da animação: 0%

Salvar configurações

Adicionando Imagem # 2

Em seguida, adicione um módulo de imagem no módulo Call to Action que você acabou de criar. Atualize as configurações de imagem da seguinte maneira:

Na guia Conteúdo ...

URL da imagem: [upload da imagem # 2]

Na guia Design ...

Forçar largura total: SIM

Estilo de animação: Roll
Direção da animação: esquerda
Intensidade de animação: 13%
Opacidade inicial da animação: 100%

Adicionar imagem nº 3

É isso para a nossa segunda coluna (do meio). Agora vamos adicionar a imagem nº 3 na terceira coluna (extrema direita). Para fazer isso, podemos duplicar / copiar o módulo de imagem que você acabou de adicionar na parte inferior da segunda coluna e colá-lo na terceira coluna. Como os estilos de animação são os mesmos, tudo o que você precisa para atualizar para o novo módulo de imagem é o URL da imagem real.

Duplique e personalize o divisor e o módulo de apelo à ação

Depois de adicionar o novo URL da imagem à imagem duplicada na coluna três, duplique / copie o Módulo divisor e o Módulo de frase de chamariz que você criou no topo da segunda coluna e arraste / cole os dois módulos sob a imagem # 3 na terceira coluna.

Para o Módulo divisor, altere a configuração Direção da animação na guia Projeto para “Esquerda”.

Para nosso novo Módulo de frase de chamariz, vá em frente e atualize as seguintes configurações:

Na guia Conteúdo ...

Título: Uma nova maneira de construir

Na guia Design ...

Preenchimento personalizado: 80 px direito, 80 px inferior, 80 px esquerdo

Direção da animação: esquerda

Agora vamos verificar nosso resultado final ...

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_5.zip em nossa pasta de downloads. Descompacte-o para revelar as seguintes importações.

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

Efeitos de animação, parte 5 (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

Este layout é um pouco complicado de executar. Mas, depois de obter as imagens certas e o espaçamento certo, a animação traz todo o layout muito bem. O rolar realístico das imagens do telefone quase parece como se alguém as estivesse deslizando em uma mesa branca para a nossa vista enquanto rolamos a página para baixo. Este exemplo de animação de rolo é definitivamente um que se destaca.

Chegando

No próximo post, concluirei nossa série com a parte 6. Vou mostrar como usar a animação de slides com algumas imagens personalizadas e css para criar um layout impressionante para apresentar receitas de culinária. No entanto, o mesmo layout pode ser ajustado e usado para muitos itens diferentes em destaque.

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