header-logo
Primeiros passosConfira como você pode usar o Wix para criar seu site e seu negócio. Personalize seu site usando templates ou contrate um profissional para criar ou aprimorar sua presença online.
Crie o seu siteAprenda a usar o Editor Wix e a gerenciar o conteúdo de seu site. Descubra como proteger a privacidade de seus visitantes e tornar seu site acessível.
Conta e faturamentoRevise as configurações da sua conta, gerencie suas assinaturas e planos Premium e entenda suas faturas.
Use os apps mobile do WixUse o app Wix Owner para administrar seu negócio com eficiência, interagir com seus visitantes e criar uma comunidade.
Conecte um domínioEntenda como comprar, conectar ou transferir um domínio e como manter os dados do seu site seguros.
Gerencie o seu negócioEncontre as ferramentas certas para criar e expandir seus negócios: aceite pagamentos, analise suas estatísticas, conecte-se com visitantes e muito mais.
Promova o seu siteConfira como promover seu site nos motores de busca, enviar campanhas de email e veicular anúncios pagos.
Wix Studio, Parceiros e empresasTire o máximo proveito da sua conta do Wix Studio, Parceiro Wix ou Wix Empresarial, para que você possa expandir seus negócios.
AjudaObtenha informações sobre como resolver os problemas técnicos e de desempenho do seu site. Além disso, acompanhe os próximos recursos em nosso roadmap de produtos.
placeholder-preview-image
Wix LearnDomine novas habilidades com nossos cursos e tutoriais.
Blog do WixConfira nossas dicas de web design, marketing e mais.
Learning Hub de SEOAumente o tráfego orgânico vindo dos motores de busca.
Website developmentDesenvolva um site único com a nossa plataforma full-stack.
placeholder-preview-image
  1. Início
  2. Wix Studio, Parceiros e empresas
  3. Wix Studio
  4. Use o Editor do Wix Studio
  5. Adicione efeitos e animações
  6. Editor do Wix Studio: adicionar e personalizar arquivos de animações Lottie

Editor do Wix Studio: adicionar e personalizar arquivos de animações Lottie

Neste artigo
  • Importar animações do LottieFiles
  • Alterar a animação Lottie
  • Definir como a animação é reproduzida
  • Adicionar um nome acessível a uma animação Lottie
O LottieFiles é uma ótima fonte de animações de alta qualidade para adicionar ao site do seu cliente. Após importar uma animação através do URL JSON, você pode redimensioná-la como quiser e decidir se ela é reproduzida ou não em um loop contínuo. 
Antes de começar:
Para importar uma animação, você precisa ter uma conta no LottieFiles.

Importar animações do LottieFiles

Adicione quantas animações Lottie forem necessárias para dar vida ao seu design. Após salvar uma animação no seu espaço de trabalho do LottieFiles, você pode copiar o URL JSON e colar diretamente no Editor do Wix Studio. A animação é adicionada instantaneamente como um novo elemento de página.
Um GIF mostrando que você pode colar animações do Lottie diretamente no Editor do Wix Studio
Como alternativa, você pode adicionar um novo elemento de animação Lottie e colar o URL relevante no painel Configurações. 
Importante:
O Wix é compatível apenas com URLs Lottie no formato JSON.

Para adicionar um elemento de animação Lottie:

  1. Clique em Elementos  no lado esquerdo do editor.
  2. Clique em Mídia.
  3. Clique em Lottie.
  4. Clique no ícone Adicionar ao site ao lado de Animações Lottie.

    O painel Elementos está aberto no Editor do Wix Studio. O cursor está clicando para adicionar uma animação ao site.
  5. (Em uma aba separada do navegador) Copie o URL JSON da animação salva através da sua conta LottieFiles.
  6. Cole o URL da animação no Editor:
    1. Clique no elemento Lottie no 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?
Clique em Visualizar animação na parte superior do painel Configurações para ver como ela fica antes de ser publicada.
Adicionando um novo elemento lottie ao Editor e incorporando o link da animação no painel Configurações
Trabalhando com breakpoints:
Você pode personalizar o tamanho da animação Lottie por breakpoint, para que tenha a aparência ideal em todas as telas. 

Alterar a animação Lottie

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

Para alterar a animação:

  1. Selecione o elemento Animações Lottie.
  2. Clique no ícone Configurações .
  3. Cole o URL da nova animação em Qual é o URL da animação?.
Um GIF mostrando onde copiar o URL da animação Lottie e como ele muda instantaneamente na tela quando você faz isso

Definir como a animação é reproduzida

Usando as alavancas, você pode escolher como a animação Lottie é reproduzida no site do seu cliente. Escolha se ela é reproduzida continuamente e adicione um botão de pausa/reprodução para dar aos visitantes do site mais controle.

Para definir como a animação é reproduzida:

  1. Selecione o elemento Animações Lottie.
  2. Clique no ícone Configurações .
  3. Use as alavancas para definir o comportamento da animação:
    • Reproduz continuamente:
      • Ativada: a animação é reproduzida continuamente enquanto os visitantes estão na página.
      • Desativada: a animação é reproduzida apenas uma vez quando a página é carregada.
    • Mostra botão de pausa/reprodução
      • Ativada: os visitantes podem pausar e reproduzir a animação conforme necessário.
      • Desativada: os visitantes não podem pausar nem retomar (reproduzir) a animação.
O painel de configurações de um elemento de animação lottie. As duas alavancas são destacadas.

Adicionar um nome acessível a uma animação Lottie

Adicione um nome acessível à sua animação no painel Configurações. Nomes acessíveis informam os visitantes que usam tecnologias assistivas sobre o propósito e o conteúdo da animação e podem melhorar a classificação de SEO do site. 
Você também pode marcar a animação como decorativa se ela não for uma parte necessária do conteúdo ou função da página.

Para adicionar um nome acessível:

  1. Selecione o elemento Animações Lottie.
  2. Clique no ícone Configurações .
  3. Role para baixo até Acessibilidade e escolha o que você quer fazer:
    • Insira a descrição de texto em Nome acessível.
    • Marque a animação como decorativa ao marcar a caixa de seleção.
O painel de configurações de uma animação Lottie. O cursor está clicando no campo de nome acessível.
É importante saber que:
Apenas arquivos Lottie no formato JSON são compatíveis com sites Wix. Por motivos técnicos, nem todos os campos dos arquivos JSON podem ser contidos. As animações Lottie podem, portanto, parecer um pouco diferentes em um site Wix online (por exemplo: exibindo um intervalo/valor de movimento reduzido). 

Esse artigo foi útil?

|
Contrate um profissionalEncontre um Parceiro Wix que pode ajudar você a alcançar os objetivos do seu site.
Começar
Neste artigo
  • Importar animações do LottieFiles
  • Alterar a animação Lottie
  • Definir como a animação é reproduzida
  • Adicionar um nome acessível a uma animação Lottie

Esse artigo foi útil?

|