Central de Ajuda Wix
    Início
  1. Crie o seu site
  2. Use o Editor X
  3. Adicione efeitos e animações
    4. Editor X: adicionar e personalizar arquivos de animação Lottie

Editor X: adicionar e personalizar arquivos de animação Lottie

4 min de leitura
O Editor X está em transição para o Wix Studio, nossa nova plataforma para agências e freelancers.Saiba mais sobre o Wix Studio
LottieFiles é uma ótima fonte de animações de alta qualidade que você pode adicionar ao seu site do Editor X. Após importar uma animação através do URL, você pode redimensioná-la como quiser e decidir se ela é reproduzida ou não em um loop contínuo.
Neste artigo, saiba como:
Antes de começar:
Para importar uma animação, você precisa ter uma conta no LottieFiles.

Importar animações do LottieFiles

Você pode importar quantas animações Lottie forem necessárias para dar vida ao seu design. Depois de adicionar um elemento de animação Lottie ao Editor X, cole o URL da animação no painel Configurações para ver como ele fica na sua página.

Para importar uma animação Lottie:

  1. Clique em Elementos na parte superior do Editor X.
  2. Clique em Inserção e social.
  3. Clique em Animações Lottie.
  4. Arraste o elemento de Animações Lottie para o local desejado na sua página.
  5. (Em uma aba separada) Copie o URL da animação do LottieFiles:
    1. Faça login na sua conta LottieFiles.
    2. Selecione a animação que deseja utilizar.
    3. Clique no ícone Copiar abaixo de Lottie Animation URL.
  6. Cole o URL da animação no Editor X:
    1. Clique no elemento Animação Lottie no seu Editor.
    2. Clique no ícone Configurações .
    3. Cole o URL em Qual é o URL da animação?.
    4. Pressione Enter no teclado.
Qual é o próximo passo?
Veja como sua animação é reproduzida ao clicar em Visualizar animação na parte superior do painel Configurações.
Alterando o URL da animação Lottie no painel Configurações do elemento, após adicioná-lo ao site do Editor X
Trabalhando com breakpoints:
Você pode personalizar o tamanho da sua animação Lottie por breakpoint, para que tenha a aparência ideal em todas as telas.

Alterar a animação Lottie

Se você quiser alterar sua animação Lottie, você pode fazer isso facilmente ao colar o novo URL no painel de Configurações do elemento.

Para alterar a animação:

  1. Clique na animação Lottie no Editor X.
  2. Clique no ícone Configurações .
  3. Cole o URL da nova animação em Qual é o URL da animação?.
Alterando o URL da Animação Lottie no painel de configurações do elemento no Editor X

Configurar a animação para reproduzir em loop

Você pode escolher como sua animação Lottie é reproduzida - apenas uma vez ou em um loop contínuo.

Para definir como sua animação é reproduzida:

  1. Clique na animação Lottie no Editor X.
  2. Clique no ícone Configurações .
  3. Clique na alavanca ao lado de Reproduz novamente para ativá-la ou desativá-la.
Clicando em uma alavanca para definir uma animação Lottie para reproduzir em um loop contínuo.

Adicionar alt text à animação Lottie

No painel Configurações, adicione alt text para descrever brevemente sua animação Lottie. Isso pode melhorar a classificação de SEO do seu site, enquanto ajuda os usuários com leitores de tela a entender o que sua animação está mostrando.

Para adicionar alt text à sua animação:

  1. Clique na animação Lottie no Editor X.
  2. Clique no ícone Configurações .
  3. Digite ou cole o texto de descrição no campo em Insira um alt text para sua animação.
  4. Pressione Enter no teclado.
Escrevendo um alt text para uma animação Lottie no painel Configurações do elemento no Editor X.

Esse artigo foi útil?

|

Neste artigo

  • Importar animações do LottieFiles
  • Alterar a animação Lottie
  • Configurar a animação para reproduzir em loop
  • Adicionar alt text à animação Lottie

Contrate um profissional

Encontre um Parceiro Wix que pode ajudar você a alcançar os objetivos do seu site.
Encontre um Parceiro