Você já visitou um site e ficou impressionado com as animações e os gráficos interativos? Você pode imaginar que esse tipo de animação exige muita programação e conhecimento técnico para ser criada, mas com as animações Lottie, é mais fácil do que você pensa!
As animações Lottie são animações vetoriais que podem ser facilmente adicionadas ao seu site usando ferramentas como WordPress e Elementor. Através do plugin LottieFiles para WordPress, você pode adicionar e personalizar rapidamente as animações no seu site WordPress usando o editor Gutenberg.
Vamos mostrar passo a passo como adicionar e usar animações Lottie no WordPress e no Elementor.
Entendendo as animações de Lottie
Antes de nos aprofundarmos nos detalhes de como adicionar animações Lottie ao WordPress ou Elementor, vamos revisar alguns conceitos básicos sobre animações Lottie.
Primeiramente, o que são exatamente as animações Lottie? Bem, Lottie é uma biblioteca desenvolvida pelo Airbnb que renderiza animações do After Effects em tempo real e as exporta como arquivos JSON. Esses arquivos JSON podem ser facilmente usados na web, tornando-os uma escolha popular para desenvolvedores e designers web que desejam adicionar animação e interatividade aos seus sites.
Então, onde você pode encontrar animações da Lottie? Felizmente, existem muitos recursos disponíveis para encontrar e baixar animações da Lottie. Um recurso popular é o LottieFiles.com, que possui uma enorme biblioteca de animações da Lottie, gratuitas e pagas, que você pode navegar e baixar.
Outra opção é criar suas próprias animações Lottie usando o Adobe After Effects e exportá-las como arquivos JSON.
Veja também: Como converter um design do Adobe XD em um site WordPress?
Depois de obter suas animações Lottie, o próximo passo é baixá-las para uso no WordPress ou Elementor. Isso é bem simples: basta baixar o arquivo JSON da animação escolhida e salvá-lo em seu computador.
Por que você deve adicionar animações Lottie ao seu site?
Aqui estão alguns bons motivos para você não perder a oportunidade de usar a Lottie Animation em seu site:
Excelente experiência do usuário
Em primeiro lugar, as animações Lottie podem aumentar o engajamento e tornar seu site mais atraente. Ao adicionar animação e interatividade ao seu site, você pode criar uma experiência de usuário mais dinâmica, o que ajuda a manter os visitantes por mais tempo.
Não afeta o desempenho do site
Além de melhorar a experiência do usuário, as animações Lottie também podem ter um desempenho melhor do que os gráficos animados tradicionais. Como as animações Lottie são baseadas em vetores, elas têm um tamanho de arquivo muito menor do que GIFs ou outras animações tradicionais. Isso significa que elas podem ser carregadas mais rapidamente e não comprometem o desempenho do seu site.
Escalável
Outra vantagem de usar animações Lottie é a sua escalabilidade: elas podem ser ampliadas ou reduzidas sem perder qualidade ou resolução. Isso as torna uma excelente opção para design responsivo, onde é necessário que os gráficos tenham ótima aparência em diversos tamanhos de tela.
Personalizável
Por fim, as animações Lottie são altamente personalizáveis. Você pode ajustar a velocidade, as configurações de repetição e outras propriedades da sua animação para que se adaptem ao design do seu site e à experiência do usuário. E como as animações Lottie são criadas no Adobe After Effects, você tem muito controle sobre a própria animação.
Em resumo, as animações Lottie são uma ótima maneira de adicionar interesse visual e interatividade ao seu site. Se você busca melhorar a experiência do usuário e o desempenho do seu site, definitivamente vale a pena considerar o uso de animações Lottie.
Adicionando animações Lottie no WordPress
Agora que você entendeu o que são animações Lottie e por que você deve usá-las, vamos entender como adicioná-las e usá-las no WordPress
- O primeiro passo é instalar o plugin LottieFiles. Você pode fazer isso acessando a seção “Plugins” do painel do WordPress e pesquisando por “LottieFiles”.
- Depois de encontrar o plugin, clique em “Instalar” e, em seguida, em “Ativar” para habilitá-lo em seu site.
- Crie uma nova publicação ou página no WordPress usando o editor Gutenberg.
- Adicione um novo bloco "Lottie" à sua página clicando no botão "Adicionar bloco" e pesquisando por "Lottie" na biblioteca de blocos.
- Nas configurações do bloco Lottie, clique no botão “Descobrir Animação” para procurar e selecionar um arquivo de animação Lottie do seu computador ou da biblioteca LottieFiles.
- Após selecionar a animação, você pode ajustar a velocidade, as configurações de repetição e outras propriedades nas configurações do bloco.
- Você também pode adicionar interações à sua animação Lottie usando o botão “Adicionar interação” nas configurações do bloco. Isso permite que você acione uma ação específica quando um usuário clicar ou passar o cursor sobre a animação.
Quando estiver satisfeito com a sua animação Lottie, salve a sua publicação ou página e a sua animação estará online no seu site WordPress!
Adicionando animações Lottie no Elementor
Se você usa o Elementor como construtor de sites, adicionar animações Lottie é muito fácil. O Elementor possui um widget Lottie dedicado que facilita a adição de animações Lottie às suas páginas.
Para começar, basta arrastar e soltar o widget Lottie na sua página do Elementor. Em seguida, clique no widget para abrir as configurações do Lottie.
Nas configurações do Lottie, você pode fazer o upload do seu arquivo Lottie do seu sistema ou adicioná-lo por meio de um link externo. Depois que o arquivo Lottie for carregado, você verá uma prévia da sua animação no widget.
A partir daqui, você pode personalizar sua animação ajustando a velocidade, as configurações de repetição e muito mais. Você também pode adicionar interações à sua animação, como eventos de clique ou efeitos de foco, usando o recurso de interações integrado do Elementor.
Conclusão
Parabéns, agora você aprendeu como adicionar e usar animações Lottie no WordPress e no Elementor!
Seguindo os passos descritos neste blog, você pode adicionar animações envolventes e interativas ao seu site sem precisar de conhecimentos avançados de programação ou experiência técnica.
Então, experimente adicionar animações Lottie ao seu site WordPress ou Elementor. Com a animação certa, você pode aprimorar a experiência do usuário, comunicar informações importantes e adicionar um toque visual interessante ao seu site.
Se você está com dificuldades para adicionar animações Lottie ao seu site WordPress ou Elementor, não se preocupe! O serviço especializado em desenvolvimento WordPress pode ajudar. Nossa equipe tem anos de experiência na criação de sites envolventes e dinâmicos usando o WordPress, e podemos ajudar você a dar vida à sua visão.
