Editor do Wix Harmony: adicionar e personalizar uma animação
4 min
Neste artigo
- Adicionar animação a um elemento
- Personalizar uma animação
- Adicionar animações ao seu site mobile
Este artigo se refere ao novo Editor do Wix Harmony, lançado em janeiro de 2026. Se você não tem certeza se está usando o Editor do Wix Harmony ou o Editor Wix, veja mais informações aqui.
Dê vida ao site com animações que trazem movimento e deixam tudo mais interessante. Escolha entre opções como entrada, rolagem, loop e efeitos de mouse, de acordo com quando você quer que a animação apareça.
Personalize cada animação para criar a aparência exata que você deseja, ajustando configurações como distância, duração e pausa para combinar com sua visão. Todas as animações mobile são criadas para telas menores, para que seu site tenha um visual impressionante em qualquer dispositivo.
Você sabia?
Você pode aplicar diferentes animações e efeitos ao mesmo elemento.
Adicionar animação a um elemento
Adicione movimento e energia ao site aplicando animações nos elementos. Escolha entre vários efeitos para dar vida a cada parte da página e criar uma experiência que os visitantes não vão esquecer.
Para adicionar animação:
- Vá para o seu editor.
- Clique no elemento relevante.
- Clique no ícone Animação
na barra de ação. - Selecione uma animação entre as opções disponíveis.
- Entrada: a animação apresenta um elemento na tela. Ela é reproduzida apenas uma vez, quando o elemento aparece pela primeira vez.
- Loop: a animação é reproduzida em um loop contínuo.
- Rolagem: a animação é reproduzida quando um visitante se aproxima do elemento ao rolar a página para cima e para baixo.
- Efeitos do mouse: a animação começa a se mover quando o cursor do visitante passa sobre o elemento.
Observação:
Elementos no seu cabeçalho são animados apenas uma vez, durante a primeira visita à página.
Personalizar uma animação
Depois de adicionar uma animação a um elemento, personalize-a para combinar com a aparência do seu site. Ajuste opções como intensidade, direção e pausa para criar o efeito exato que você deseja e fazer com que seus visitantes se sintam engajados.
Observação:
As opções de personalização disponíveis dependem da animação que você escolhe.
Para personalizar a animação:
- Vá para o seu editor.
- Selecione o elemento relevante.
- Clique no ícone Animação na barra de ação.
- (Se ainda não tiver feito isso) Selecione uma animação entre as opções disponíveis.
- Clique em Personalizar para ajustar a animação escolhida:
- Intensidade: clique no dropdown para selecionar a intensidade da animação quando reproduzida.
- Direção: selecione de qual direção a animação entra (por exemplo: sentido horário, pela direita).
- Distância: use o slider para alterar a distância entre o ponto de início e fim do efeito.
- Duração: use o slider para ajustar por quanto tempo você quer que a animação seja reproduzida.
- Pausa: use o slider para aumentar ou reduzir a pausa entre o carregamento da página e o início da animação.
- Velocidade: arraste o slider para alterar a velocidade do efeito. Quanto menor o número, mais rápido o efeito.
- Eixo do movimento: decida se o elemento se move horizontalmente, verticalmente ou em ambos os eixos.
- Tipo de animação: escolha um tipo de animação para dentro, para fora ou se ele contínua ao rolar a página.
- Pivô: escolha o ponto de referência a partir do qual o elemento começa a se mover.
- Estilo de movimento: selecione a intensidade do movimento, como suave ou moderada.
Adicionar animações ao seu site mobile
Você pode adicionar animações ao site mobile, assim como no desktop, para os visitantes terem uma experiência envolvente em qualquer dispositivo. As animações mobile são feitas especialmente para telas e resoluções menores, então tudo se encaixa perfeitamente sem você precisar fazer nada.
Observação:
As animações que você adiciona no desktop também aparecem no seu site mobile, mas você pode escolher uma animação diferente para o mobile (ou desativá-la) sem alterar a animação no desktop.
Para adicionar animação no mobile:
- Vá para o seu editor.
- Clique no ícone Mobile
no canto superior direito da página. - Clique no elemento relevante.
- Clique no ícone Animação
na barra de ação. - Selecione uma animação entre as opções disponíveis.
Contrate um profissionalEncontre um Parceiro Wix que pode ajudar você a alcançar os objetivos do seu site.
