Faça o botão animado Adicionar ao carrinho tremer

Por que criar um botão animado?

Adicionar animação ao seu botão “Adicionar ao carrinho” é uma maneira poderosa de chamar a atenção para ele, garantindo que sua chamada para ação (CTA) se destaque na página. Essa técnica pode aumentar o envolvimento do usuário e aumentar a taxa de cliques, tornando mais provável que os usuários realizem a ação desejada.

Uma das animações mais eficazes e comumente usadas é o efeito “shake”, que adiciona um movimento dinâmico ao botão, tornando difícil para os usuários não perceberem.

Veja este exemplo:

Crie um botão animado para adicionar ao carrinho com GemPages

Criar uma animação de shake para seu botão no GemPages é simples e personalizável. Siga estas etapas para implementar e ajustar o efeito:

Etapa 1: habilitar animação nas configurações do botão

Uma vez localizado no Editor GemPages, selecione o Adicionar ao Carrinho botão na sua página para abrir suas configurações.

Na barra lateral esquerda, vá para Avançado aba. Role para baixo até Animação opção e ative-a.

Etapa 2: aplique a animação Shake

Selecione os Agitação efeito das opções de animação. Você pode configurar o botão para tremer apenas ao passar o mouse ou tremer ao aparecer, como preferir.

Então, ajuste o Configurações de animação para controlar como o efeito de vibração se comporta.

• Intensidade: Defina quão forte é o movimento de agitação.
• Velocidade: Defina a rapidez com que o efeito de vibração acontece. 
• Demora: Especifique um atraso (em segundos) antes do início da animação.
• Facilitando: Escolha como a animação progride ao longo do tempo:
  • Linear: Uma velocidade constante em todo o percurso.
  • Facilidade de entrada: Começa devagar e acelera.
  • Saída fácil: Começa rápido e desacelera.
  • Fácil entrada e saída: Uma combinação de início e fim lentos.
• Ciclo: Decida se a animação de agitação deve ser repetida continuamente ou ocorrer apenas uma vez.

Para saber mais sobre Configurações de animação, você pode ler Este artigo.

Etapa 3: salvar e publicar

Na barra superior, salve as atualizações e clique em Publicar para tornar suas alterações públicas na vitrine.