Editor do Wix Studio: adicionar animações aos ícones do botão
5 min
Neste artigo
- Adicionar uma animação predefinida do ícone
- Criar animações de ícone personalizadas
- Fazer o design do ícone
- Requisitos e diretrizes para ícones personalizados
Você usa botões estilizados? Adicione animações de ícone para criar efeitos atraentes, tornando os sites dos seus clientes interativos nos mínimos detalhes.
Escolha entre a variedade de ícones animados predefinidos do Wix Studio para um efeito pronto ou combine um ícone de inicialização e encerramento para criar uma animação personalizada. Você pode até fazer upload dos seus próprios arquivos SVG para dar um toque personalizado.
Como funcionam as animações do ícone do botão?
Adicionar uma animação predefinida do ícone
Escolha uma das nossas animações de ícone incríveis para edição rápida. Após selecionar o efeito desejado, você pode definir a duração.
Para adicionar um ícone animado predefinido:
- Vá para o seu editor.
- Clique no botão estilizado relevante.
- Clique em Configurações.
- Clique em Animado em Tipo de ícone.
- Escolha o que fazer a seguir:
- Selecione o ícone desejado em Escolha um ícone
- Clique no ícone Adicionar
para explorar nossa variedade de ícones animados no Gerenciador de Mídia.
- (Opcional) Arraste o slider para alterar a Duração da animação.
Dica:
Passe o mouse sobre nossos ícones predefinidos para visualizar sua animação.
Criar animações de ícone personalizadas
Crie suas próprias animações de ícone para botões no site do seu cliente. Ao selecionar um ícone de inicialização e um ícone de encerramento, você pode criar uma animação perfeita e exclusiva para o site do seu cliente. Junte ícones do Wix ou use 2 dos seus próprios arquivos SVG.
Para criar animações personalizadas:
- Vá para o seu editor.
- Clique no botão estilizado relevante.
- Clique em Configurações.
- Selecione Animado em Tipo de ícone.
- Clique no ícone Adicionar
e selecione Criar novo. - Configure seus ícones de inicialização e encerramento:
- Clique no ícone Adicionar
em Ícone de inicialização. - Selecione um arquivo na aba Mídia do Wix ou faça upload/selecione o seu próprio em Arquivos do site.
- Clique em Escolher arquivo.
- Repita os passos anteriores para o Ícone de encerramento.
- Clique no ícone Adicionar
- (Opcional) Clique em Voltar na parte superior e use o slider para definir a Duração.
Dicas:
- Você pode combinar seu próprio arquivo com um ícone do Wix.
- Use a caixa de visualização para garantir que o efeito fique como você deseja.
Fazer o design do ícone
Personalize o ícone para que ele combine com a sua visão de design, com a marca exclusiva do seu cliente e com o botão específico. Redimensione o ícone, altere sua cor e gire-o para que o botão fique mais dinâmico.
Você pode personalizar o design do estado interativo do botão, dando a você a oportunidade de adicionar uma camada extra de interatividade. Por exemplo, faça com que o ícone gire ou mude de cor ao passar o mouse.
Para personalizar o design do ícone:
- Vá para o seu editor.
- Clique no botão estilizado relevante.
- Clique no ícone Abrir inspetor
no canto superior direito do editor.
- Selecione o Estado relevante em Design: Normal ou Interativo.
- Clique em Ícone em Design.
- Use as opções disponíveis para personalizar o design do ícone:
- Redimensione o ícone.
- Altere a cor do ícone e ajuste a opacidade.
- Gire o ícone para um ângulo diferente.
Requisitos e diretrizes para ícones personalizados
Os ícones personalizados têm alguns requisitos. Para fazer upload e usar seus próprios arquivos, eles devem ser:
- Completamente pretos (#000000)
- Em um formato SVG
- Não maiores que 250 KB
Observação:
Se você criou seus arquivos SVG no Adobe Ilustrador ou no Figma, eles devem ser convertidos em um caminho composto antes de serem exportados.
Existem também algumas práticas recomendadas a serem consideradas ao criar ícones. Recomendamos seguir as diretrizes abaixo para garantir uma experiência de animação mais suave.
- Certifique-se de que os ícones de inicialização e encerramento tenham a mesma posição inicial.
- Verifique se os dois ícones têm o mesmo número de pontos.
- Use ícones preenchidos (sem corte).
- Use várias formas menores para criar um ícone SVG, ao invés de uma forma maior.
- Dimensione as formas ao redimensioná-las para manter sua qualidade.
- Use a visualização de pixel do programa para garantir o alinhamento com os pixels na prancheta.
- Se os seus ícones tiverem formas muito diferentes, você pode seguir essas dicas para uma transição ainda mais suave:
- Use versões transformadas dos ícones (um ícone de inicialização que foi ligeiramente transformado no ícone de encerramento e vice-versa).
- Oculte formas de um ícone no outro (por exemplo: ocultar formas do ícone de encerramento no ícone de inicialização).
Importante:
Não podemos fornecer suporte ou solução de problemas para arquivos SVG que você cria fora do Wix.
Contrate um profissionalEncontre um Parceiro Wix que pode ajudar você a alcançar os objetivos do seu site.
