Como acionar transições de imagem com as opções fixas do Divi

A versatilidade das opções adesivas do Divi vai além de apenas usar as configurações de uma plataforma adesiva. Você também pode usá-lo para acionar alterações em seu design. Neste tutorial, por exemplo, usaremos as opções pegajosas do Divi para acionar a transição da imagem. As transições de imagem ocorrem assim que os visitantes se aproximam da imagem no pergaminho. Vamos recriar dois exemplos diferentes do zero, mas assim que você entender a abordagem, poderá criar suas próprias transições de imagem exclusivas usando apenas as opções integradas do Divi. Você também poderá baixar o arquivo JSON gratuitamente!

Vamos lá!

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Baixe o layout GRATUITAMENTE

Para colocar suas mãos no layout gratuito, primeiro você precisa baixá-los 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!

1. Passos Gerais

Adicionar Seção # 1

Espaçamento

Na primeira parte do tutorial, vamos construir a base do nosso design. Uma vez que isso esteja pronto, podemos nos concentrar em aplicar as configurações corretas para obter os dois exemplos na visualização deste post. Adicione uma nova seção à página em que está trabalhando, vá para a guia de design da seção e remova todo o preenchimento padrão superior e inferior.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova linha usando a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar módulos ainda, abra as configurações de linha e modifique as configurações de dimensionamento da seguinte forma:

• Largura máxima: 1480 px
• Alinhamento de linha: centro

Espaçamento

Em seguida, remova todo o preenchimento padrão superior e inferior.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Índice Z

E definir índice az nas configurações de posição. Isso nos ajudará a garantir que a linha permaneça abaixo da próxima linha que adicionaremos posteriormente no tutorial.

• Índice Z: 1

Estouros de coluna

Em seguida, abra as configurações da coluna e defina os transbordamentos como ocultos.

• Excesso horizontal: oculto
• Estouro vertical: oculto

Adicionar Módulo de Imagem à Coluna

Deixe a caixa de imagem vazia

O único módulo de que precisamos nesta linha é um Módulo de imagem. Deixe a caixa da imagem vazia.

Imagem de fundo

E use uma imagem de plano de fundo de sua escolha.

• Tamanho da imagem de fundo: capa
• Posição da imagem de fundo: centro

Espaçamento

Para permitir que a imagem apareça, usaremos alguns valores de preenchimento personalizados em diferentes tamanhos de tela.

• Enchimento superior:
  • Desktop: 300px
  • Tablet e telefone: 150px
• Preenchimento inferior:
  • Desktop: 300px
  • Tablet e telefone: 150px

Adicionar Seção # 2

Espaçamento

Adicione outra seção logo abaixo da anterior. Abra as configurações de seção e remova o preenchimento superior padrão nas configurações de espaçamento.

• Preenchimento superior: 0 px

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova linha usando a seguinte estrutura de coluna:

Índice Z

Adicione um índice az para esta linha também.

• Índice Z: 2

Adicionar Módulo de Chamada à Ação à Coluna

Adicionar conteúdo

Nesta linha, o único módulo de que precisamos é um Módulo de Chamada para Ação. Adicione o conteúdo de sua escolha.

Adicionar link de botão

Junto com um link de botão.

Cor de fundo

Em seguida, adicione uma cor de fundo branca.

• Cor de fundo: #ffffff

Configurações de texto

Vá para a guia de design e altere as configurações de texto.

• Alinhamento de Texto: Esquerda
• Cor do Texto: Escuro

Configurações de texto do título

Defina também o estilo do texto do título.

• Fonte do título: Playfair Display
• Estilo da fonte do título: itálico
• Tamanho do Texto do Título
  • Desktop: 45px
  • Tablet: 40px
  • Telefone: 35px
• Espaçamento entre letras de título: 1px

Configurações do corpo do texto

Bem como o corpo do texto.

• Fonte do corpo: Karla
• Altura da linha corporal: 2em

Configurações de botão

Em seguida, defina o estilo do botão.

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão: 18 px
• Cor do texto do botão: # 000000
• Cor gradiente 1: #ffffff
• Gradient Color 2: # ffdc91
• Tipo de gradiente: Linear
• Posição inicial: 50%
• Posição final: 50%

• Largura da borda do botão: 0 px
• Raio da borda do botão: 0 px
• Fonte do botão: Karla
• Estilo da fonte do botão: maiúscula
• Mostrar botão: Sim

• Posicionamento do ícone do botão: Esquerda
• Mostrar apenas o ícone ao passar o mouse para o botão: Não
• Enchimento superior: 10 px
• Preenchimento inferior: 10 px
• Preenchimento esquerdo: 15%
• Preenchimento direito: 15%

Dimensionamento

Estamos modificando as configurações de dimensionamento em diferentes tamanhos de tela também.

• Largura:
  • Desktop: 65%
  • Tablet: 80%
  • Telefone: 100%
• Alinhamento do Módulo: Centro

Espaçamento

A seguir, adicionaremos alguns valores de margem e preenchimento personalizados às configurações de espaçamento.

• Margem superior:
  • Desktop: -150px
  • Tablet: -50px
  • Telefone: 0px
• Margem inferior: 50px
• Enchimento superior: 150px
• Preenchimento inferior: 150 px

Sombra da caixa

E vamos completar as configurações do módulo adicionando uma sombra de caixa sutil.

• Força do borrão da caixa Shadwo: 30px
• Cor da sombra: rgba (0,0,0,0.11)

2. Aplique efeito pegajoso à linha

Linha aberta na seção # 1

Agora que definimos a base de nosso design, é hora de aplicar o efeito adesivo. Esse efeito aderente nos ajudará a mudar os estilos conforme as pessoas passam pelo elemento. O elemento ao qual adicionaremos nosso efeito adesivo é a linha na primeira seção que contém a imagem.

Aplicar efeito pegajoso

É importante certificar-se de que o limite de aderência inferior esteja definido como seção. Os pontos inicial e final de nossa linha são iguais aos da seção, o que garante que a linha não se torne realmente aderente, mas os estilos aderentes são aplicados. O deslocamento superior fixo determina em que ponto a transição começa a ocorrer. Se esse valor fosse zero, por exemplo, isso significaria que o topo do navegador teria que tocar o topo da linha para iniciar a transição. Ao definir o deslocamento superior fixo para “300px”, criamos essa transição mais cedo.

• Posição pegajosa: grudar no topo
• Deslocamento superior fixo: 300 px
• Limite inferior de aderência: seção
• Compensação dos elementos aderentes circundantes: Sim
• Estilos padrão de transição e fixos: Sim

Certifique-se de que há deslocamento superior igual acima da primeira seção

Como definimos o deslocamento superior fixo para “300px”, precisamos do espaço no topo de nossa página para que isso aconteça. Se você estiver usando este design em algum lugar no meio da página, não precisa se preocupar com esta etapa. No entanto, se você estiver usando essa abordagem na parte superior da página, terá que modificar o deslocamento superior fixo ou adicionar espaço suficiente na parte superior. Adicionaremos alguma margem superior à nossa primeira seção para gerar esse espaço.

• Margem superior: 400px

3. Aplique o efeito Ken Burn ao módulo de imagem

Agora que nossa linha se tornou fixa, podemos começar a aplicar estilos fixos à linha e a todos os seus elementos filhos. Embora as possibilidades sejam infinitas, estamos mostrando dois exemplos diferentes e como alcançá-los. Para tornar mais fácil brincar com os dois exemplos diferentes, clonaremos ambas as seções uma vez e as colocaremos abaixo das primeiras.

Exemplo 1

Configurações de linha fixa

Sombra da caixa

Para recriar o exemplo nº 1, que você pôde ver na visualização desta postagem, abra as configurações de linha e aplique as seguintes configurações de sombra de caixa:

• Posição vertical da sombra da caixa: 0 px
• Força de propagação da sombra da caixa: 0px
• Cor da sombra: rgba (0,0,0,0)

• Posição vertical aderente: 100px
• Cor de sombra pegajosa: # ffdc91

Transição

Inclua também uma transição suave na guia avançada.

• Duração da transição: 500ms
• Curva de velocidade de transição: facilidade

Configurações do módulo de imagem aderente

Escala de transformação

Em seguida, abra o Módulo de imagem e aplique um efeito de escala de transformação em um estado aderente.

• Ambos: 100%

• Ambos fixos: 130%

Transição

Garanta uma transição suave, modificando as configurações de transição do módulo de acordo:

• Duração da transição: 1200ms
• Curva de velocidade de transição: facilidade

Exemplo # 2

Configurações de linha fixa

Transformar Traduzir

Passemos ao segundo exemplo! Abra as configurações de linha e aplique as seguintes configurações de transformação de tradução:

• Certo: 20%

• Sticky Right: 0%

Transição

Modifique as configurações de transição da linha também.

• Duração da transição: 500ms
• Curva de velocidade de transição: facilidade

Configurações do módulo de imagem aderente

Filtros

Em seguida, abra o Módulo de imagem e brinque com os filtros no estado padrão e fixo.

• Saturação: 0%
• Brilho: 50%

• Saturação pegajosa: 100%
• Brilho pegajoso: 100%

Transição

Conclua as configurações do módulo e este tutorial, alterando as configurações de transição da seguinte forma:

• Duração da transição: 500ms
• Curva de velocidade de transição: facilidade

Antevisão

Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Pensamentos finais

Neste post, mostramos como ser criativo com as opções pegajosas do Divi. Mais especificamente, mostramos como acionar transições de imagem. Assim que as pessoas passam pela imagem, os estilos da imagem mudam, o que resulta em uma bela transição. Lidamos com dois exemplos diferentes, mas as possibilidades são infinitas. Você também conseguiu baixar o arquivo JSON gratuitamente! Se você tiver dúvidas ou sugestões, fique à vontade para deixar um comentário na seção de comentários abaixo.

Se você está ansioso para aprender mais sobre o Divi e obter mais brindes do Divi, certifique-se de assinar nosso boletim informativo por e-mail e canal no YouTube para que você sempre seja uma das primeiras pessoas a saber e obter os benefícios desse conteúdo gratuito.