header-logo
Confira como usar o Wix para construir seu site e negócio.
Personalize e gerencie seu site com os recursos do Wix.
Gerencie assinaturas, planos e faturas.
Administre seu negócio e conecte-se com os membros.
Compre, conecte ou transfira um domínio para o seu site.
Expanda seu negócio e presença online.
Aumente sua visibilidade com recursos de SEO e marketing.
Acesse recursos avançados e otimize sua produtividade.
Encontre soluções, problemas conhecidos ou contate-nos.
placeholder-preview-image
Domine novas habilidades com nossos cursos e tutoriais.
Confira nossas dicas de web design, marketing e mais.
Aumente o tráfego orgânico vindo dos motores de busca.
Desenvolva um site único com a nossa plataforma full-stack.
Alcance seus objetivos com a ajuda de um especialista.
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

5 min
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?

|