Central de Ajuda

Search
Exact matches only
Search in title
Search in content
Search in comments
Search in excerpt
Filter by Custom Post Type

Animando elementos em Páginas

 In Construtor, Modelos prontos, Páginas

Em suas páginas podem ser usadas diversas espécies de animação nos elementos (botões, imagens,etc). Esse artigo vai demonstrar onde configurar esse tipo de interação no nosso Construtor.

Requisitos:

Você precisa já ter uma máquina e página criada.

Criar página de captura por um Modelo Pronto
Criar página de captura pelo Construtor

Modelo Pronto

Em páginas de Modelos Prontos, a maioria dos elementos é estática e não permite esse tipo de configuração. Em alguns modelos, uma animação está pré-configurada em botões.

Veja a imagem abaixo:

1 – Na opção Tempo do Botão Temporizado, é possível definir, em segundos, quanto tempo é esperado até que a animação configurada no botão seja iniciada.
Neste caso, verifique se, no modelo escolhido, tal configuração está presente.

Pelo Construtor

2 – No canto superior esquerdo, você tem três opções: Blocos, Conteúdo e Detalhes. Clique na opção Detalhes.

3 – Clique no item da página onde deseja aplicar a configuração.
no exemplo acima usamos o botão.

4 – Surgirá uma janela lateral cinza, com diversas opções. Para esta função em específico, vamos usar a função animation.

Animation : aqui você escolhe que tipo de animação, Podemos fazer uma imagem pulsar, pular e desaparecer.
Escolha alguma animação e veja o efeito! No caso, seguindo o experimento, eu quero fazer com que meu botão comece invisível e apareça depois. Então, vou usar a animação FadeIn.

Além de escolher qual a animação usar, é preciso determinar o tempo de tempo para inicio e o de duração do efeito.

5 – data-wow-duration essa opção determina quanto tempo, em segundos, para a animação terminar. Então, quanto maior o número aqui, mais lenta e longa a animação será.

6 – data-wow-delay essa opção você configura quanto tempo é esperado até que a animação comece.

Exemplo:
Se eu quero que a animação tenha início alguns segundos depois de que o meu lead já começou a ver meu vídeo, Então, vou deixar configurado para 5s (cinco segundos).

EXISTE UM LIMITE DE TEMPO PARA AS ANIMAÇÕES?

Não, não existe. Mas você precisa colocar esse tempo em segundos.

Por exemplo:
se quero que uma animação dure 1 minuto, na opção data-wow-duration eu devo incluir 60s (sessenta segundos).

 

Sincronizando um botão à um vídeo

Primeiro, verifique em que momento de seu vídeo você deseja que o botão apareça.
Exemplo: vamos considerar que desejo que o botão surja em 1:45 do meu vídeo.

Para configurar o tempo que o botão aparecerá eu precisarei converter esse tempo em segundos.
Então, 1:45 são 95 segundos, e por isso vou colocar 95s na opção no data-wow-delay.

Assim que o lead entrar na minha página, o vídeo irá reproduzir e o botão vai aguardar 95 segundos para aparecer.

Mas, lembre-se! O vídeo e o botão são objetos distintos na página, e não ficarão interligados.
Se meu lead não assistir o vídeo, o botão vai aguardar os 95 segundos e aparecer, da mesma forma.

 

🏁 É isso, terminamos por aqui!
com amor ❤
equipe leadlovers™