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 Sem categoria

Olá! Tudo bom?

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

Iniciando a edição da página

– Acesse sua máquina e vá até a aba Páginas (1).
– Escolha qual a página será modificada. Clique no botão de Configurações (ícone em forma de engrenagem) (2), e depois em Editar (3).

 

Configurando em um 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:

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. Caso não, você pode usar o nosso Construtor para criar a sua página personalizada e definir quais elementos deseja animar, e as devidas configurações de cada animação.

 

Configurando no Construtor

– No canto superior esquerdo, você tem três opções: Blocos, Conteúdo e Detalhes. Clique na opção Detalhes (4). Veja que, agora, quando você passa o mouse sobre os elementos da página, um tracejado vermelho aparece em volta deles. Clique no item da página onde deseja aplicar a configuração. No exemplo deste texto, vamos alterar um botão (5).

– Veja que, à esquerda, aparece uma janela com diversas opções de configuração. Para esta função em específico, vamos usar as três abaixo:

animation (6): aqui você escolhe que tipo de animação vai acontecer com o elemento. Podemos fazer uma imagem pulsar ou pular, se desejar. Teste! 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.

data-wow-duration (7): essa opção determina quanto tempo, em segundos, leva para a animação terminar. Então, quanto maior o número aqui, mais lenta e longa a animação é. Já por outro lado, quanto menor o número, mais rápida e curta ela vai ser. No caso, quero que o botão apareça rapidamente, e por isso vou deixar 2s (dois segundos).

data-wow-delay (8): já aqui, você configura quanto tempo é esperado até que a animação comece. 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).

Veja agora o resultado dessa configuração:

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).1s

Eu consigo fazer com que uma animação seja iniciada apenas se o lead clicar sobre o elemento, ou só se ele executar um vídeo, ou qualquer integração similar?

A animação é iniciada assim que o elemento é carregado na página. Sendo assim, não há como fazer com que ela seja “dependente” ou “integrada” à uma ação anterior. Mas, é possível “sincronizar” dois eventos. No exemplo abaixo, vou mostrar fazer a sincronia do aparecimento de um botão com um determinado tempo de um vídeo que inseri na página.

 

Sincronizando um botão à um vídeo

Verificando o momento correto no vídeo

– Primeiro, verifique em que momento de seu vídeo você deseja que o botão “apareça”. Neste exemplo, vamos considerar que desejo que o botão surja quando falo de meu produto no vídeo.

Vamos supor que eu começo a falar da venda do meu E-book no momento 1:45 (um minuto e quarenta e cinco) do vídeo. Então, é aqui que a animação precisa ocorrer.

Configurando o tempo em um Modelo Pronto

– Na opção Tempo do Botão Temporizado, basta colocar (em segundos) o momento que determinei no meu vídeo, aonde começo a falar do meu infoproduto. Então, 1:45 são 95 segundos, e por isso vou colocar 95s.

Configurando o tempo no Construtor

– No botão, já inserido na minha página, basta a usar a opção Detalhes para acessar as configurações do mesmo (descrevemos esse processo nos passos 4 e 5 deste material).
Na opção animation, vamos escolher novamente a animação FadeIn. Agora, lá no data-wow-delay, vou colocar (em segundos) o momento que determinei no meu vídeo, aonde começo a falar do meu infoproduto. Assim como fizemos no exemplo de Modelo Pronto, são 95 segundos, e por isso vou colocar 95s.

 

Resultado:

Assim que o lead entrar na minha página, o botão vai aguardar 95 segundos para aparecer. Se este mesmo lead entrar e já executar o vídeo (ou o vídeo tiver a função autoplay aplicada), o botão vai aparecer no momento em que começo a falar da minha venda! =)

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.

Qualquer dúvida ou problema, contate nosso time do suporte via ticket ou chat online