Editor Wix: adicionar e personalizar uma animação

4 min de leitura
Use animações para dar vida ao seu site. Adicione efeitos como "Flutuar" e "Expandir" para criar páginas criativas e impactantes e chamar a atenção dos visitantes para o seu conteúdo.
Você pode aplicar animações a uma variedade de elementos e até mesmo aplicar efeitos diferentes ao mesmo elemento em seus sites para desktop e mobile. A animação no seu site mobile é configurada para se adequar e caber em telas menores, para que você possa continuar a impressionar seus visitantes. Saiba mais sobre efeitos de animação no mobile.
Neste artigo, saiba como:

Adicionando animação a um elemento

Deixe seu site mais dinâmico e envolvente ao adicionar uma animação aos seus elementos. Cada animação tem um efeito diferente, então você pode combiná-las com diferentes elementos e fazer com que seus visitantes não se esqueçam do seu site.

Para adicionar uma animação:

  1. Clique no elemento relevante no Editor.
  2. Clique no ícone Animação  .
  3. Selecione uma animação entre as opções disponíveis.
Observação:
Remova os efeitos de animação dos seus elementos ao clicar no ícone Animação  no elemento e, em seguida, clicar em Nenhuma .
Dica:
Você pode adicionar animação a um grupo de elementos ao selecionar o grupo e clicar no ícone Animação .

Personalizando uma animação

Após adicionar animação a um elemento, você pode personalizá-lo para que ele se comporte da maneira que você deseja e combine com o seu site.
Ajuste configurações como poder, direção e atraso para causar um impacto e engajar seus visitantes.

Para personalizar a animação:

  1. Clique no elemento relevante no seu Editor.
  2. Clique no ícone Animação  .
  3. Clique em Personalizar e use as opções para ajustar sua animação:
    • Poder: clique no menu dropdown e selecione o quão forte é a animação quando reproduzida.
    • Direção: selecione a direção a partir da qual a animação entra, como sentido horário ou a partir da direita.
    • Distância: use o slider para aumentar ou diminuir a distância entre o ponto inicial e o ponto final do efeito.
    • Duração: use o slider para ajustar por quanto tempo você deseja que a animação seja reproduzida.
    • Atraso: arraste o slider para aumentar ou diminuir o atraso entre o carregamento da página e o início da animação.
    • Apenas na primeira vez: clique na alavanca para ativar/desativar a animação que está sendo exibida apenas na primeira vez que a página é carregada.
Observação:
As opções de personalização disponíveis dependem da animação que você escolher.

Adicionando animações ao seu site mobile

Além de adicionar animação a elementos no seu site para desktop, você também pode adicioná-los ao seu site mobile, para que seus visitantes tenham uma ótima experiência de navegação em todos os seus dispositivos.
As animações para dispositivos móveis foram criadas especificamente para resoluções e tamanhos de tela menores, então você não precisa se preocupar com espaçamento.
Observação:
Se você quiser que um elemento seja animado nas versões desktop e mobile do seu site, você precisa adicionar o efeito em ambos os editores. Os efeitos de animação adicionados no desktop não são transferidos para o seu site mobile, pois são otimizados para diferentes tamanhos de tela.

Para adicionar animação no mobile:

  1. Vá para o seu Editor mobile.
  2. Clique no elemento relevante.
  3. Clique no ícone Animação .
  4. Selecione uma animação entre as opções disponíveis.
Importante:
  • As animações adicionadas aos elementos no cabeçalho só são exibidas quando o elemento é carregado pela primeira vez.
  • Se um elemento estiver sendo ocultado/mostrado usando o Velo, suas animações também precisam ser definidas através do Velo. Saiba mais sobre os elementos do Velo
Problemas com suas animações?
Siga essas etapas para garantir que elas estejam funcionando como esperado em seu site online.

Esse artigo foi útil?

|